JS实现图片合成下载，图片可拖动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS实现图片合成下载</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script><!--加载jquery ui主要作用是使用其拖拽的功能-->
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script><!--想要图片合成，核心就是加载使用这个插件-->
    <script>
        function BaseImage(imgFile) {//图片1上传的函数方法
            let f = imgFile.files[0];//获取上传的图片文件
            let filereader = new FileReader();//新建一个图片对象
            filereader.onload = function (event) {//图片加载完成后执行的函数
                let srcpath = event.target.result;//这里获取图片的路径（图片会被转为base6格式）
                $("#baseimg").attr("src", srcpath);//将获取的图片使用jquery的attr()方法插入到id为baseimg的图片元素里
            };
            filereader.readAsDataURL(f);//读取图片（将插入的图片读取显示出来）
        }

        function StyleImage(imgFile) { //图片2上传的函数方法（原理同上）
            console.log('imgFile.files',imgFile.files);
            let f = imgFile.files[0];
            let filereader = new FileReader();
            filereader.onload = function (event) {
                let srcpath = event.target.result;
                $("#styleimg").attr("src", srcpath);
            };
            filereader.readAsDataURL(f);
        }

        $(function () {
            $(".drg").draggable();//这里使用jquery ui的拖拽方法  draggable()；作用是可以让图片2进行拖拽
        });

        function down() {//这个函数是点击下载执行的方法
            html2canvas($(".whole"), { //这是使用了html2canvas这个插件的方法，将class为whole的整个节点绘制成画布
                onrendered: function (canvas) {  //画布绘制完成后执行下面内容，function内的canvas这个参数就是已经被绘制成画布
                    let link = document.createElement("a");//创建一个a标签
                    link.download = "my-image-name.jpg";//a标签增加一个download属性，属性值（my-image-name.jpg）就是合成下载后的文件名
                    link.href = canvas.toDataURL();//canvas.toDataURL()就是画布的路径，将路径赋给a标签的href
                    link.click();//模拟a标签被点击，这样就可以下载了
                },
            })
        }
    </script>
</head>
<body>

<fieldset>
    <input type="file" onchange="BaseImage(this)">
    <legend>上传背景图</legend>
</fieldset>
<fieldset>
    <input type="file" onchange="StyleImage(this)">
    <legend>上传拖动图</legend>
</fieldset>
<fieldset>
    <button onclick="down()">点击合成下载</button>
    <legend>合成图片</legend>

</fieldset>

<div class="whole" style="width: 544px;display: inline-block;position: relative;">
    <img id="baseimg" style="width:100%;height:auto;">
    <div style="height: 100%;width: 100%;top:0;position: absolute;overflow: hidden;">
        <div class="drg" style="position: absolute;width:100px;top: 0px;left: 0px;display: inline-block;">
            <img id="styleimg" style="width:100%;cursor: pointer;">
        </div>
    </div>
</div>

</body>
</html>
posted on 2022-08-22 15:17 小虾米吖~ 阅读(149) 评论(0) 编辑收藏举报