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

超星學(xué)習(xí)青銅 2021-08-12 14:32:29 瀏覽數(shù) (6530)

反饋

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

報錯詳盡信息

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

關(guān)鍵詞

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

前言

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

正文

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

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

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

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

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

栗子1

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

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

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

很顯然，報錯

栗子2

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

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

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

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

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

報錯，妥妥的。

栗子4

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

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

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

栗子5

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

img.crossOrigin= 'anonymous'

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

報錯

我看官方文檔的意思是必須同步設(shè)置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ù)，圖片還是那個圖片，不過加了個馬甲，瀏覽器就不認(rèn)識了

栗子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ù)，以保證源都是最新的，不走緩存

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

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

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

HTML5

2 人點贊

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

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