首页 > 其他分享> > 基于HTML5拖放API：目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能，用户可以选择本地图片文件然后为其添加相框效果

基于HTML5拖放API：目前市面上的一些修图工具软件带有自动为图片添加不同款式相框的功能，用户可以选择本地图片文件然后为其添加相框效果

2020-04-05 17:04:51 作者：互联网

这是一份很简单的作业，由于百度当时没找到，就自己写了一下，命名不是很机智只是为了写的快且好懂，使用只需要将桌面的图片拖拉进里面就直接生成一个新的带相框的图片，代码很短好理解。在这里插入图片描述。

<!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];

        //创建一个文件内容读取器——FileReader
        var fr = new FileReader();
        //读取文件中的内容 —— DataURL：一种特殊的URL地址，本身包含着所有的数据
        fr.readAsDataURL(f0);
        fr.onload=function () {
            var img = new Image();
            img.src = fr.result; //dataURL
            img.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>

标签：style,img,px,相框,添加,newdiv,var,ev,拖放
来源： https://blog.csdn.net/daddykei/article/details/105316155