怎么解決canvas.toDataURL()報錯問題？解決方案總結(jié)！

今天我們來和大家分享有關于：“怎么解決canvas.toDataURL()報錯問題？”這個問題，希望小編的分享對于大家的學習有所幫助！

報錯詳盡信息

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

關鍵詞

• canvas.toDataURL()
• crossOrigin
• Access-Control-Allow-Origin

前言

最近在做一個創(chuàng)意類的圖片合成工具，大概齊就是通過拼接自定義的文字和圖片信息生成一張商品圖片類似的功能，項目中用到了fabric.js這個畫板庫，最后一步在保存圖片的時候報上面的一長串錯誤，墻內(nèi)墻外搜了一遍，給出的解決方案都不全面，為避免同學們再次踩坑，于是有了此文

正文

我們在convertDOM2Image時，如果DOM內(nèi)存在圖片資源，該資源所在的web-server是不支持跨域的，保存圖片是不會成功的。

因此在排查問題時，首先要確定

• web-server是否允許跨域，我們以nginx為例，response-header內(nèi)要存在Access-Control-Allow-Orgin:xxxx(可以是*,安全性要求比較高的可以根據(jù)主域名自定義)
• 如果是img標簽, 是否添加了crossorigin="anonymous", 如果是Image對象，同樣是否添加了改屬性obj.crossOrigin='anonymous'
• 如果還不行，這里先不把答案放出來，我們先看看栗子

在接下來的栗子中我們會用到將Image轉(zhuǎn)換為canvas對象的方法：

function convertImageToCanvas(image) {
// 創(chuàng)建canvas DOM元素，并設置其寬高和圖片一樣 
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
// 我們在實際的開發(fā)中，需要將抓換后的base64圖片編碼傳輸?shù)胶笈_圖片服務器，由server直接存儲或者生成一張圖片；
// 所以會用到 toDataURL
console.log(canvas.toDataURL('image/jpeg'))
return canvas;
}

栗子1

本地未設置跨域允許選項crossorigin=anonymous,web-server未設置跨域允許選項：

<div id="d1">
<img style="width: 300px;height: 240px;" src="http://jb51.net/images/cover_thumbnail_3rd.jpg" alt="">
<p>本地未設置跨域允許選項crossorigin=anonymous,web-server未設置跨域允許選項</p>
</div>
<button onclick="setCanvas('d1')">canvas保存</button>

function setCanvas(DOMID) {
let img = document.getElementById(DOMID).querySelector('img')
document.body.appendChild(convertImageToCanvas(img))
}

很顯然，報錯

栗子2

本地標簽內(nèi)設置跨域允許選項, web-server未設置跨域允許選項

這次連圖片都出不來，直接報錯

這個好理解，瀏覽器同源策略限制嘛

Access to image at 'xxxx' (redirected from 'xxxx') from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

栗子3

本地未設置跨域允許選項crossorigin=anonymous, web-server設置跨域允許選項

報錯，妥妥的。

栗子4

本地標簽內(nèi)設置跨域允許選項crossorigin=anonymous, web-server設置跨域允許選項：

<div id="d4">
<img style="width: 300px;height: 240px;" src="https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png" alt="" crossorigin="anonymous">
<p>本地設置跨域允許選項`crossorigin=anonymous`,`web-server`設置跨域允許選項</p>
</div>
<button onclick="setCanvas('d4')">canvas保存</button>

居然可以了，但是~如果在代碼內(nèi)設置跨域呢？

栗子5

function setCanvas(DOMID) {
let img = document.getElementById(DOMID).querySelector('img')

img.crossOrigin= 'anonymous'

document.body.appendChild(convertImageToCanvas(img))
}

報錯

我看官方文檔的意思是必須同步設置crossOrigin=anonymous，該圖片憑證才會被信任

This means that CORS is enabled and credentials are sent if the image is fetched from the same origin from which the document was loaded.

否則緩存的圖像數(shù)據(jù)仍然會被畫布視為有污染的跨源內(nèi)容.

怎么辦？重新取一遍圖片唄，加個隨機數(shù)，圖片還是那個圖片，不過加了個馬甲，瀏覽器就不認識了

栗子6

function setCanvas(DOMID) {
let img = document.getElementById(DOMID).querySelector('img')

img.src =img.src+'?v='+Math.random()
img.crossOrigin= 'anonymous'

img.onload=()=>{
document.body.appendChild(convertImageToCanvas(img))
}
}

binggo, 完美解決

所以我們在開發(fā)過程中，新建圖片，更換圖片，還原圖片等功能代碼內(nèi)，最好每一次都加個隨機數(shù)，以保證源都是最新的，不走緩存

多說一點吧，關于fabric.js的相關跨域配置見下方

let _fabricConfig = {
// ....
crossOrigin:'anonymous'
};
/* fabric對象 */
let _fabricObj = new fabric.Canvas(id, _fabricConfig);


// 新建圖片對象時
let imgInstance = new fabric.Image.fromURL(url + '?v='+ Math.random(), img => {}, {crossOrigin: 'anonymous'})

// 動態(tài)更新圖片時
let currentActive = _fabricInstance.getActiveObj();
currentActive.setSrc(randomURL, img =>{}, {crossOrigin: 'anonymous'})

github:http://github.com/phillyx

那么以上就是有關于：“怎么解決canvas.toDataURL()報錯問題？”這個問題的解決方法的總結(jié)更多有關于這方面的相關內(nèi)容我們都可以在W3Cschool中進行學習！