话不多说上代码
function splice(){ var canvas = document.createElement("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.rect(0 , 0 , canvas.width , canvas.height); context.fillStyle = "#fff"; context.fill(); var myImage = new Image(); myImage.src = "./2.png"; // 第一张图片, 你自己本地的图片或者在线图片 myImage.crossOrigin = 'Anonymous'; // 跨域问题解决 myImage.onload = function(){ context.drawImage(myImage , 0, 0, 800 , 800); // 横纵坐标和宽高大小, 因为是背景图, 这里设定为铺满 context.font = "60px Sumsun"; context.fillText("我是文字", 350, 450); var myImage2 = new Image(); myImage2.src = "./1.png"; // 第二张图片, 会覆盖到第一张图的上面, 你自己本地的图片或者在线图片 myImage2.crossOrigin = 'Anonymous'; // 跨域问题解决 myImage2.onload = function(){ context.drawImage(myImage2, 175, 175, 225, 225); // 横纵坐标和宽高大小 let base64 = canvas.toDataURL("image/png"); // "image/png" 这里注意一下 let img = document.getElementById('avatar'); // 图片放置到的dom位置 // document.getElementById('avatar').src = base64; img.setAttribute('src' , base64); } } } splice();
请在服务器上测试, 避免因跨域问题无法上线。