請給我一面紅旗@微信官方
阿新 • • 發佈：2019-09-26
許多年前，小學生們轉發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>大家趕緊實現起來吧，附國旗框框一張~
&n