1. 程式人生 > >canvas圖片跨域問題

canvas圖片跨域問題

context raw cross sso 並且 wid get gin cti

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";

canvas圖片跨域問題