基于HTML5拖放API：目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能，用户可以选择本地图片文件然后为其添加相框效果
生活随笔
收集整理的這篇文章主要介紹了
基于HTML5拖放API：目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能，用户可以选择本地图片文件然后为其添加相框效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這是一份很簡單的作業，由于百度當時沒找到，就自己寫了一下，命名不是很機智只是為了寫的快且好懂，使用只需要將桌面的圖片拖拉進里面就直接生成一個新的帶相框的圖片，代碼很短好理解。。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>#fileCheck {width: 300px;height: 100px;border: 1px dashed;margin: 20px;}</style> </head> <body> <h3>HTML5拖放API之圖片相框</h3> <hr /> <div id="fileCheck" ondragover="allowDrop(event)" ondrop="drop(event)">請將文件拖放至此處。 </div> <div id="status"></div></body> <script>//ondragover事件回調函數function allowDrop(ev) {//解禁當前元素為可放置被拖拽元素的區域ev.preventDefault();}//ondrop事件回調函數function drop(ev) {//解禁當前元素為可放置被拖拽元素的區域ev.preventDefault();var newdiv=document.createElement("div");newdiv.style.backgroundImage="url(image/photoframe.jpg)";newdiv.style.width=500+"px";newdiv.style.height=440+"px";newdiv.style.position="relative";document.getElementById('status').appendChild(newdiv);var f0 = ev.dataTransfer.files[0];//創建一個文件內容讀取器——FileReadervar fr = new FileReader();//讀取文件中的內容 —— DataURL：一種特殊的URL地址，本身包含著所有的數據fr.readAsDataURL(f0);fr.onload=function () {var img = new Image();img.src = fr.result; //dataURLimg.style.width="310px";img.style.height="250px";img.style.position="absolute";img.style.left=100+"px";img.style.top=100+"px";newdiv.appendChild(img);}} </script> </html>總結
以上是生活随笔為你收集整理的基于HTML5拖放API：目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能，用户可以选择本地图片文件然后为其添加相框效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2022年2022年9月5日中软国际Li
- 下一篇： 索罗斯与因果论2