<p>画布:</p> <canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"> Your browser does not support the HTML5 canvas tag. </canvas> <p>合成的图像:</p> <img id="tulip2" src="" alt="The Tulip" />
<script>
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("tulip"); img.onload = function(){ ctx.drawImage(img,0,0); ctx.drawImage(img,100,100); convertCanvasToImage(); };
//从 canvas 提取图片 image functionconvertCanvasToImage() { var myCanvas = document.getElementById("myCanvas"); var dataURL = myCanvas.toDataURL("image/png"); var img=document.getElementById("tulip2"); img.setAttribute('src', dataURL); console.log(dataURL); }
</script> </body> </html>
注意:若toDataURL方法报错 Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 原因:是由于文件所在的域和图片和页面所在域不同,出现跨域传输的问题。 解决:1.把图片放到本地。2把demo文件放到服务器下