canvas两张图片合成一张,canvas加载多张图片

　　先说画布绘制的基本方法，如下：

　　const my canvas=document . createelement( canvas )；myCanvas.width=400myCanvas.height=400const CTX=my canvas . get context( 2d )；const img=new Image()；img . src= 1 . jpg ；//图片加载时在drawImage，否则可能还没加载。img . onload=()={ CTX . draw image(img，0，0，100，50)；}语法：

　　drawImage(图像，x，y)

　　从画布上指定的坐标点开始，按照原图大小绘制整幅图像。

　　drawImage(图像，x，y，宽度，高度)

　　从画布上指定的坐标点开始，以指定的大小(宽度和高度)绘制整个图像，图像将自动缩放。

　　drawImage(图像，图像x，图像y，图像宽度，图像高度，x，y，宽度，高度)

　　将指定图像的局部图像(以(imageX，imageY)为左上角，imageWidth为宽度，imageHeight为高度的矩形部分)绘制到以(x，y)为左上角坐标，宽度为宽度，画布高度为高度的矩形区域中。

　　这种多图马赛克的业务场景是制作不同内容的定制分享图片。使用的图片元素有背景图片、外部链接图片、网站logo、自定义二维码图片。要解决的问题都是画布转换成图片输出时产生的。主要有三点：

　　1.图片跨领域问题；

　　2.画多张图，造成画布污染；

　　3.图片的大小；

　　首先，互联网上有大量相关信息的图片跨域问题，解决方法如下：

　　img.setAttribute(crossOrigin ， anonymous )；跨域问题解决后，多图拼接导出后，出现新的错误信息：

　　未捕获的DOMException:未能对“HTMLCanvasElement”执行“toDataURL”:受污染的画布可能无法导出。

　　当我发现这个问题的时候，互联网上的大部分信息都是用上面的跨域方法解决的，但我显然没有在我的业务场景下工作。

　　查了一下代码，发现背景图片是二维码图片的时候不会报错。比如外链图片跨域处理，单独使用时不会上报。Logo图片都是本地文件，显然不应该是跨域的问题。

　　那么，二维码图像和背景图像之所以能不出错，是因为二维码图像的来源是base64格式。

　　于是，我尝试用canvas将logo图导出为base64格式，然后与背景图二维码图拼接。导出时没有报告错误。

　　为了解决导出多图像时的“污染画布”问题，应该将图片元素制作成base64格式，这是可以避免的。

　　因为我的业务场景中有外链图片，而且并不是所有的外链都对我的网站域名做了跨域权限处理，所以在生成外链图片的base64数据时，我们可以使用img.onerror事件处理，替换为默认图片。

　　因为在画总图之前，对多个图都有单独的处理，所以用Promise处理可能更好。

　　至于图片导出的大小，导出的时候尽量用。

　　Mycanvas.todataurl (image/JPEG ，encoder options)编码器选项：可以从0到1选择画面质量。如果超出值范围，将使用默认值0.92。其他参数被忽略。

　　以上个人总结的canvas组装多张图片和导出图片的经验。希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。