许多年前，小学生们转发QQ信息“今天是马化腾生日，只要复制转发此信息，就可以获得一个月qq会员“。现在，大家转发朋友圈“请给我一面国旗@微信官方” 重点是，上面的还是这群人！
emmmm，你还在艾特微信官方吗？？
国庆节还没有到，腾讯迎国庆换新颜活动却已经结束啦，好多小伙伴还没来得及换，应广大朋友的要求，我们就用canvas简单来实现一下吧~ 欢迎体验：给你的微信头像加个小红旗吧
http://study.whosmeya.com/demo/canvas-image-concat.html
代码如下：
<body> <h3>请选择图片</h3> <input id="ipt" type="file" accept="image/*" mutiple="mutiple" /> <h3>剪裁后图片</h3> <img id="imgCut" style="border: 1px solid rgba(0, 0, 0, 0.15);" /> <h3>合成后图片(长按图片保存)</h3> <img id="imgConcat" style="border: 1px solid rgba(0, 0, 0, 0.15);" /> </body>
<script> window.onload = function () { const [w, h, s] = [150, 150, 3]; // 生成图片宽, 生成图片高, 生成图片放大倍数 var ipt = document.getElementById('ipt'); // 剪裁后原图 var imgCut = document.getElementById('imgCut'); imgCut.style.width = `${w}px`; imgCut.style.height = `${h}px`; // 剪裁后合成图 var imgConcat = document.getElementById('imgConcat'); imgConcat.style.width = `${w}px`; imgConcat.style.height = `${h}px`; // 合成画布 var canvas = document.createElement('canvas'); canvas.width = w * s; canvas.height = h * s; var ctx = canvas.getContext('2d'); var reader = new FileReader(); var img = new Image(); // 用户上传图 var imgTop = new Image(); // 头像框图 imgTop.src = '../images/national-flag.png'; imgTop.setAttribute("crossOrigin", 'anonymous'); img.addEventListener('load', function () { var iw = img.width; // 用户上传图片宽 var ih = img.height; // 用户上传图片高 var r = w / h; // 目标图片宽高比 // 计算裁剪 var sx, sy, sWidth, sHeight; if (iw / ih > r) { sHeight = ih; sWidth = sHeight * r; } else { sWidth = iw; sHeight = sWidth / r; } sx = (iw - sWidth) / 2; sy = (ih - sHeight) / 2; ctx.fillStyle = '#ffffff'; // canvas 背景颜色 ctx.drawImage(img, sx, sy, sWidth, sHeight, 0, 0, w * s, h * s); // canvas添加用户图 imgCut.src = canvas.toDataURL("image/png"); ctx.drawImage(imgTop, 0, 0, w * s, h * s); // canvas添加头像框图 imgConcat.src = canvas.toDataURL("image/png"); }) reader.addEventListener('load', function (e) { img.src = e.target.result; }) ipt.addEventListener('change', function (e) { reader.readAsDataURL(e.target.files[0]); }) } </script>
大家赶紧实现起来吧，附国旗框框一张~
