找回密码
当前位置：前端开发者 > HTML > 正文

canvas合成图片 / 截屏思路

2018-07-24 分类：HTML 阅读(726) 评论(0)

网站前端开发用什么软件|前端工程开发主要是要什么技术|前端h5高级开发工程师

很多手机上的应用都有这样一个需求：选择背景图片，然后上传自己头像，然后合成一张图片分享出去。思路是这样的：
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>什么是计算机前端开发：canvas</title>
    <style>
        canvas {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 10px;
            top: 10px
        }
        #sc {
            border: 10px solid #000;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <input type=”file” id=”photo”>
    <canvas id=”cvs”></canvas>
    <img id=”sc”>
    </div>
    <input type=”button” value=”生成” id=”scbtn”>
    <script>
        document.getElementById(‘photo’).addEventListener(‘change’, function (e) {
            img = new Image();
            var files = this.files;
            var reader = new FileReader();
            reader.readAsDataURL(files[0]);
            reader.onload = function (e) {
                var mb = (e.total / 1024) / 1024;
                if (mb >= 2) {
                    alert(‘文件大小大于2M’);
                    return;
                }
                img.src = this.result;
                img.style.width = “80%”;
                var c = document.getElementById(“cvs”);
                var ctx = c.getContext(“2d”);
                ctx.drawImage(img, 10, 10);
            }
        });
        var btn = document.getElementById(“scbtn”);
        btn.onclick = function () {
            var tt = document.getElementById(“cvs”).toDataURL(“image/png”);
            document.getElementById(‘sc’).setAttribute(“src”, tt);
        }
    </script>
</body>
</html>

大致思路就是：每上传一张图片，就用canvas的drawImage()方法绘制出来图像，图像会自动叠加，然后生成的时候，用toDataURL方法转换成一张新图片添加到DOM里，这个过程中可以添加拖拽效果之类的

前端开发原生是什么|前端开发需要学什么书|微信前端开发是什么

赞(0)
前端开发者 » canvas合成图片 / 截屏思路
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论