应用canvas对多照片拼合拼导出来照片的方式

2021-02-23 01:11 jianzhan

先说下canvas制图的基础方式,以下:

const myCanvas = document.createElement('canvas');
    myCanvas.width = 400;
    myCanvas.height = 400;
const ctx = myCanvas.getContext('2d');
const img = new Image();
img.src = "1.jpg";
//当照片载入结束的情况下在drawImage,不然将会照片都还没载入结束
img.onload=()=>{
    ctx.drawImage(img, 0, 0, 100, 50);
}

英语的语法:

drawImage(image, x, y)

以canvas上特定的座标点刚开始,依照图象的初始规格尺寸绘图全部图象。

drawImage(image, x, y, width, height)

以canvas上特定的座标点刚开始,以特定的尺寸(width和height)绘图全部图象,图象会全自动放缩。

drawImage(image, imageX, imageY, imageWidth, imageHeight, x, y, width, height)

将特定图象的部分图象(以(imageX, imageY)为左上角、宽度为imageWidth、高宽比为imageHeight的矩形框一部分)绘图到canvas中以( x, y)为左上角座标、宽度为width、高宽比为height的矩形框地区中

这次多图拼合的业务流程情景是做不一样內容的订制共享照片,用到的照片元素有,情况照片、外链照片、网站logo、订制生产制造的2维码图,必须处理的难题,全是在画布转照片輸出时产出的。关键有3点:

1、照片的跨域难题;
2、绘图多图,导致的画布污染;
3、照片的尺寸;

最先照片的跨域难题,这个难题在网络上早已有许多有关信息内容,处理方法以下:

img.setAttribute('crossOrigin', 'anonymous');

当处理完跨域难题后,在多图拼合导出来后,出現了新的出错信息内容:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted Canvases may not be exported.

我发现这个难题时,查询在网上的材料,大多数也是用上面的跨域方式处理的,但是我显著在我的业务流程情景里是无论用的。

根据对编码的清查,我发现,情况图+2维码图时,其实不会报这个不正确,如外链照片做了跨域解决,独立应用时,也不容易出错。而logo照片全是当地的文档,明显不可该是跨域难题。

那末2维码图和情况图可以不错误的缘故,应当在于2维码照片源是base64文件格式的。

因而,我试着将logo图应用画布导出来base64文件格式,随后和情况图+2维码图开展拼合,导出来时果真没再出错。

全部处理多图拼合导出来时,Tainted Canvases的难题,应当是将照片元素做成base64的文件格式,就可以够防止了。

由于我的业务流程情景中有外链照片,并且并不是全部的外链都对我域名做了跨域容许的解决,因此,在转化成外链照片的base64数据信息时,但是应用img.onerror恶性事件的解决,用缺省图更换。

由于有在画总图以前,有对多图的各自解决,因而,应用Promise解决将会会更好1些。

在照片导出来的尺寸难题上,导出来时尽可能应用

myCanvas.toDataURL('image/jpeg', encoderOptions)

encoderOptions:能够从0到1的区段内挑选照片的品质。假如超过赋值范畴,可能应用默认设置值 0.92。别的主要参数会被忽视。

以上本人对canvas拼合多图并导出来照片的工作经验总结。 期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。