html5中如何解決canvas.toDataURL()報錯問題

小編給大家分享一下html5中如何解決canvas.toDataURL()報錯問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

報錯詳盡信息

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

關鍵詞

• canvas.toDataURL()

• crossOrigin

• Access-Control-Allow-Origin

前言

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

正文

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

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

• web-server是否允許跨域，我們以nginx為例，response-header內要存在Access-Control-Allow-Orgin:xxxx(可以是*,安全性要求比較高的可以根據主域名自定義)

• 如果是img標簽, 是否添加了crossorigin="anonymous", 如果是Image對象，同樣是否添加了改屬性obj.crossOrigin='anonymous'

• 如果還不行，這里先不把答案放出來，我們先看看栗子

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

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

栗子1

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

<div id="d1">
<img  src="https://cache.yisu.com/upload/information/20220118/474/141880.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

本地標簽內設置跨域允許選項, 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

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

<div id="d4">
<img  src="https://cache.yisu.com/upload/information/20220118/474/141881.jpg" alt="" crossorigin="anonymous">
<p>本地設置跨域允許選項`crossorigin=anonymous`,`web-server`設置跨域允許選項</p>
</div>
<button onclick="setCanvas('d4')">canvas保存</button>

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

栗子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.

否則緩存的圖像數據仍然會被畫布視為有污染的跨源內容.

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

栗子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, 完美解決

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

多說一點吧，關于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'})

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

以上是“html5中如何解決canvas.toDataURL()報錯問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！