canvas圖片跨域問題


canvas的drawImage使用跨域圖片時候,會報錯,解決方法如下:

1. 使用base64替換跨域圖片

如果圖片不大,且只有幾張,可以使用base64,來代替跨域引用圖片。

2. 設置image的crossOrigin屬性,並且設置服務端的 Access-Control-Allow-Origin:* (或允許的域名)

var cvs = document.getElementById('canvas');
var ctx = example.getContext('2d');
var img = new Image();
//配合服務端的Access-Control-Allow-Origin
img.crossOrigin = ''; 
img.onload = function(){
    ctx.drawImage(img,0,0,cvs.width,cvs.height);
    var imgData = ctx.getImageData(100, 100, 1, 1);
};
img.src = "test.png";

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM