如何使用html5中的canvas對多圖片進行拼合

這篇文章主要介紹“如何使用html5中的canvas對多圖片進行拼合”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“如何使用html5中的canvas對多圖片進行拼合”文章能幫助大家解決問題。

先說下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、定制生產的二維碼圖，需要解決的問題，都是在畫布轉圖片輸出時產出的。主要有3點：

1、圖片的跨域問題；
2、繪制多圖，造成的畫布污染；
3、圖片的大小；

首先圖片的跨域問題，這個問題在網上已經有很多相關信息，解決辦法如下：

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

當解決完跨域問題后，在多圖拼合導出后，出現了新的報錯信息：

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

我發現這個問題時，查看網上的資料，大多也是用上面的跨域方法解決的，可是我明顯在我的業務場景里是不管用的。

通過對代碼的排查，我發現，背景圖+二維碼圖時，并不會報這個錯誤，如外鏈圖片做了跨域處理，單獨使用時，也不會報錯。而logo圖片都是本地的文件，顯然不應該是跨域問題。

那么二維碼圖和背景圖能夠不出錯的原因，應該在于二維碼圖片源是base64格式的。

于是，我試著將 logo 圖使用畫布導出 base64 格式，然后和背景圖+二維碼圖進行拼合，導出時果然沒再報錯。

所有解決多圖拼合導出時，Tainted Canvases 的問題，應該是將圖片元素做成 base64 的格式，就能夠避免了。

因為我的業務場景中有外鏈圖片，而且不是所有的外鏈都對我網站域名做了跨域允許的處理，所以，在生成外鏈圖片的 base64 數據時，可是使用 img.onerror 事件的處理，用缺省圖替換。

因為有在畫總圖之前，有對多圖的分別處理，因此，使用 Promise 處理可能會更好一些。

在圖片導出的大小問題上，導出時盡量使用

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

encoderOptions：可以從0到1的區間內選擇圖片的質量。如果超出取值范圍，將會使用默認值 0.92。其他參數會被忽略。

關于“如何使用html5中的canvas對多圖片進行拼合”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。