<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html,body{ width: 100%; } </style> </head> <body> <button onclick="hec()"> 合成图片</button> <script> function hec(){ dataurl=ca.toDataURL("image/png"); console.log(dataurl) var bigImg = document.createElement("img"); bigImg.src=dataurl; bigImg.style.width=10+"%"; bigImg.style.height=20+"%"; document.body.appendChild(bigImg); //document.getElementById("你的div").appendChild(bigImg); //$("你的div").html(bigImg); } var dataurl; var img1; var img2; //var ca=document.getElementById(‘mycanvas‘); var ca=document.createElement("canvas"); var ctx=ca.getContext(‘2d‘); function init(){ img1=new Image; img2=new Image; img1.setAttribute("crossorigin","Aninomous"); img2.setAttribute("crossorigin","Anonymous"); img1.src="http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLFPJR06vhs1iccMd3hFzJ3GXAFm4VljTErIq6ejH3ZicIvfz9DqKxecXkKlUsZtDYYXOo9h0icQWZDw/0" img2.src="https://qnlite.gtimg.com/qqnewslite/20190924/avatar/head1.png" //var img1=document.getElementById(‘img1‘); //var img2=document.getElementById(‘img2‘); ca.width=300; ca.height=300; img1.onload=function(){ ctx.drawImage(img1,0,0,300,300); ctx.drawImage(img2,0,0,300,300); } } init(); </script> </body> </html>
原文：https://www.cnblogs.com/azure-zero/p/11580058.html