极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id="view" style="display: none;">
<div id="div">
<p>balabalabala</p>
</div>
<img src="./erwei.jpg" alt="" id="img1">
<img src="./123.jpg" alt="" id="img2">
</div>
<canvas id="myCanvas" width="750" height="2280"></canvas>
<script>
//将文字信息转化为图片
var divContent = document.getElementById("div").innerHTML;
var data = "data:image/svg+xml," + "<svg xmlns='http://www.w3.org/2000/svg' width='100' height='45'>" + "<foreignObject width='100%' height='100%'>" + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>" + divContent + "</div>" + "</foreignObject>" + "</svg>";
var img = new Image();
img.src = data;
img.id="name";
document.getElementsByTagName('body')[0].appendChild(img);
document.getElementById("name").style.display="none";
// 将图片插入canvas
document.getElementById("img2").onload=function(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img1=document.getElementById("img1");
var img2=document.getElementById("img2");
var img3=document.getElementById("name");
ctx.drawImage(img1,150,0,200,200);
ctx.drawImage(img3,350,0,100,45);
ctx.drawImage(img2,0,200,750,2080);
}
//canvas转化成png
var image = new Image();
img.setAttribute('crossOrigin', 'anonymous');
image.src = document.getElementById("myCanvas").toDataURL("image/png");
document.getElementsByTagName('body')[0].appendChild(image);
</script>
</body>
</html>
我拿到一个长图，需要将后台生成的二维码还有用户ID之类的东西拼在一起，然后让用户长按下载后给别人扫；
我用canvas将三块内容拼在一起，但是canvas要实现自适应又会让图片失真，就想将canvas转化成png再显示在页面上。
1.我现在卡在将canvas转化成png这边，最后转出来的图是一个空白的图片；
2.我想是不是因为canvas还没有画完的原因，把最后部分放在onload里面执行又显示图片跨越，始终解决不了
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at HTMLImageElement.document.getElementById.onload (file:///C:/Users/Administrator/Desktop/test2.html:44:52)
3.有没有canvas以外的方法实现这个功能？
