主頁 > 知識庫 > 使用canvas對多圖片拼合并導出圖片的方法

使用canvas對多圖片拼合并導出圖片的方法

熱門標簽:欣鼎電銷機器人 效果 電話機器人技術 高德地圖標注商戶怎么標 惡搞電話機器人 地圖標注軟件打印出來 智能電銷機器人被禁用了么 ok電銷機器人 如何查看地圖標注 黃石ai電銷機器人呼叫中心

先說下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的矩形區(qū)域中

這次多圖拼合的業(yè)務場景是做不同內(nèi)容的定制分享圖片,用到的圖片元素有,背景圖片、外鏈圖片、網(wǎng)站logo、定制生產(chǎn)的二維碼圖,需要解決的問題,都是在畫布轉圖片輸出時產(chǎn)出的。主要有3點:

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

首先圖片的跨域問題,這個問題在網(wǎng)上已經(jīng)有很多相關信息,解決辦法如下:

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

當解決完跨域問題后,在多圖拼合導出后,出現(xiàn)了新的報錯信息:

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

我發(fā)現(xiàn)這個問題時,查看網(wǎng)上的資料,大多也是用上面的跨域方法解決的,可是我明顯在我的業(yè)務場景里是不管用的。

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

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

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

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

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

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

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

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

encoderOptions:可以從0到1的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍,將會使用默認值 0.92。其他參數(shù)會被忽略。

以上個人對canvas拼合多圖并導出圖片的經(jīng)驗總結。 希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

標簽:金昌 中山 阿壩 萍鄉(xiāng) 盤錦 綏化 赤峰 聊城

巨人網(wǎng)絡通訊聲明:本文標題《使用canvas對多圖片拼合并導出圖片的方法》,本文關鍵詞  使用,canvas,對,多,圖片,拼,;如發(fā)現(xiàn)本文內(nèi)容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《使用canvas對多圖片拼合并導出圖片的方法》相關的同類信息!
  • 本頁收集關于使用canvas對多圖片拼合并導出圖片的方法的相關信息資訊供網(wǎng)民參考!
  • 推薦文章