代码整理-js合并图片
说明
- js将两张图片合并为一张，比如一键生成海报图（将二维码合并到海报图上）
操作
html代码
<!DOCTYPE html> <html> <head> <title>js合并图片</title> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript" src="index.js"></script> </body> </html>js代码
// 加载图片 var img1 = new Image(); img1.src = '1.jpg'; var img2 = new Image(); img2.src = '2.jpg'; img1.onload = function() { //获取canvas元素 var canvas = document.getElementById("canvas"); canvas.width = img1.width; canvas.height = img1.height; var ctx = canvas.getContext("2d"); ctx.rect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "#F7F8FA"; ctx.fill(); //将图片1绘制到canvas上 ctx.drawImage(img1, 0, 0); img2.onload = function() { //将图片2绘制到canvas上 ctx.drawImage(img2, canvas.width - 150, canvas.height - 150, 100, 100); }; };