2018-04-28 13:23:40 2037瀏覽
當我們用canvas繪圖時常常會遇到一些跨域的問題，那么在遇到問題的時候我們應(yīng)該如何解決呢?本篇文章小編就帶讀者們一塊來看一下扣丁學堂HTML5在線視頻教程講解的canvas繪圖時遇到的跨域問題以及解決方法，希望對HTML5感興趣或者是正在參加HTML5培訓學習的小伙伴有所幫助。
示例如下：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>crossorigin</title>
</head>
<body>
<canvaswidth="600"height="300"id="canvas"></canvas>
<imgid="image"alt="">
<script>
varcanvas=document.getElementById('canvas');
varctx=canvas.getContext('2d');
varimage=newImage();
image.onload=function(){
ctx.drawImage(image,0,0);
document.getElementById('image').src=canvas.toDataURL('image/png');
};
image.src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
</script>
</body>
當在瀏覽器中打開這個頁面時，你會發(fā)現(xiàn)這個問題：
UncaughtDOMException:Failedtoexecute'toDataURL'on'HTMLCanvasElement':Taintedcanvasesmaynotbeexported.
這是受限于CORS策略，會存在跨域問題，雖然可以使用圖像，但是繪制到畫布上會污染畫布，一旦一個畫布被污染，就無法提取畫布的數(shù)據(jù)，比如無法使用畫布toBlob(),toDataURL(),或getImageData()方法；當使用這些方法的時候會拋出上面的安全錯誤。
這是一個苦惱的問題，但幸運的是img新增了crossorigin屬性，這個屬性決定了圖片獲取過程中是否開啟CORS功能：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>crossorigin</title>
</head>
<body>
<canvaswidth="600"height="300"id="canvas"></canvas>
<imgid="image"alt="">
<script>
varcanvas=document.getElementById('canvas');
varctx=canvas.getContext('2d');
varimage=newImage();
image.setAttribute('crossorigin','anonymous');
image.onload=function(){
ctx.drawImage(image,0,0);
document.getElementById('image').src=canvas.toDataURL('image/png');
};
image.src='https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3497300994,2503543630&fm=27&gp=0.jpg';
</script>
</body>
對比上面兩段JS代碼，你會發(fā)現(xiàn)多了這一行：
image.setAttribute('crossorigin','anonymous');
就是這么簡單，完美的解決了。
以上就是扣丁學堂HTML5在線視頻教程講解的canvas繪圖時遇到的跨域問題以及解決方法，同學們看懂了嗎？想要了解更多HTML5開發(fā)內(nèi)容的小伙伴可以登錄扣丁學堂官網(wǎng)查詢?？鄱W堂HTML5在線學習在行業(yè)內(nèi)有著良好的口碑，除了有專業(yè)的老師和與時俱進的課程體系之外，還有大量的HTML5基礎(chǔ)教程供學員觀看學習。扣丁學堂H5技術(shù)交流群：559883758。
【關(guān)注微信公眾號獲取更多學習資料】
查看更多關(guān)于“HTML5開發(fā)技術(shù)資訊”的相關(guān)文章>>
全國免費咨詢熱線
郵箱：codingke@1000phone.com
官方群：148715490
返回頂部