canvas加載base64字符串圖片 canvas轉base64圖片錯誤

canvas加載base64字符串圖片 canvas轉base64圖片錯誤

碰到一個項目需求，需要將後臺傳過來的圖片還有數據合成一張圖片，（裏面有個連接要轉成二維碼），這個時候第一下想到的肯定就是用canvas，我們先來看一下需求和步驟：

1. 生成一個背景圖片
2. 將二維碼連接轉base64
3. 生成二維碼圖片
4. 將背景圖片畫到canvas上
5. 將二維碼圖片滑到canvas上
6. 將canvas轉base64（因爲需求要將生成的圖片發出去）

話不多少，上代碼

// 我們先生成背景圖片, 背景圖片是外鏈，這裏只體現邏輯
const bgImg = new Image();
bg.src = 'http://bg.jpg';

// 將二維碼連接轉base64，有相關js插件，這裏不多說
const qrCode = createQrCode(qrCode);
const qrCodeImg = new Image();
qrCodeImg.src = qrCode;

//生成canvas

const canvas = document.createElement('canvas');
canvas.height = 900;
canvas.width = 620;
const ctx = canvas.getContext('2d');
ctx.drawImage(bgImg, 0, 0, 260, 900);
ctx.drawImage(QrCodeImg, 0, 0, 100, 100);

以上代碼都只體現邏輯，具體實現就不多說了
這時候我們可以看到我們想要的圖形了，但是這個時候還是canvas，canvas在微信上不能長按發送保存和識二維碼的，這個時候我們就要轉成真的圖片了

const imgUrl = canvas.toDataURL('image/png');
<img src="imgUrl"/>

理論上這個時候我們應該就能得到我們想要的圖片了。可現實總是這麼殘酷，我們會發現報錯了

這是因爲我們再canvas上使用了外鏈圖片，也就是跨域了，所以我們需要在img上加上一個屬性

image.setAttribute('crossOrigin', 'anonymous');
// 或者
image.crossOrigin = '*';
// 切記不使用url圖片時，一定要把上面這一行註釋掉，否則在低版本iOS上就會有問題

現在就可以得到我們想要的效果了，切記base64 的圖片畫到canvas上別加 crossOrigin 屬性，自己當時就是遇到了這麼坑，找了我幾個小時。現在分享出來，希望對碰到同樣問題的朋友能有幫助。