<!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>
