canvas圖片跨域問題

看風景就發表於2017-11-25
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";

 

相關文章