国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > HTML5 > 正文

詳解如何解決canvas圖片getImageData,toDataURL跨域問題

2024-09-05 07:22:40
字體:
來源:轉載
供稿:網友

一、首先,圖片服務器需要配置Access-Control-Allow-Origin

一般團隊都會有一個專門域名放置靜態資源,例如騰訊是gtimg.com,百度是bdimg.com;或者很多團隊使用的是騰訊云或者阿里云的服務。

而主頁面所在域名往往不一樣,當需要需要對canvas圖片進行getImageData()或toDataURL()操作的時候,跨域問題就出來了,而且跨域問題還不止一層。

首先,第一步,圖片服務器需要配置Access-Control-Allow-Origin信息,例如:

如PHP添加響應頭信息,*通配符表示允許任意域名:

header("Access-Control-Allow-Origin: *");

或者指定域名:

header("Access-Control-Allow-Origin: www.zhangxinxu.com");

此時,Chrome瀏覽器就不會有Access-Control-Allow-Origin相關的錯誤信息了,但是,還會有其他的跨域錯誤信息。

二、canvas圖片getImageData cross-origin跨域問題

對于跨域的圖片,只要能夠在網頁中正常顯示出來,就可以使用canvas的drawImage() API繪制出來。但是如果你想更進一步,通過getImageData()方法獲取圖片的完整的像素信息,則多半會出錯。

舉例來說,使用下面代碼獲取github上的自己頭像圖片信息:

var canvas = document.createElement('canvas');var context = canvas.getContext('2d');var img = new Image();img.onload = function () {    context.drawImage(this, 0, 0);    context.getImageData(0, 0, this.width, this.height);};img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';

結果在Chrome瀏覽器下顯示如下錯誤:

Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

Firefox瀏覽器錯誤為:

SecurityError: The operation is insecure.

如果使用的是canvas.toDataURL()方法,則會報:

Failed to execute ‘toDataURL’ on ’HTMLCanvasElement’: Tainted canvased may not be exported

原因其實都是一樣的,跨域導致。

那有沒有什么辦法可以解決這個問題呢?

可以試試crossOrigin屬性。

三、HTML crossOrigin屬性解決資源跨域問題

在HTML5中,有些元素提供了支持CORS(Cross-Origin Resource Sharing)(跨域資源共享)的屬性,這些元素包括<img>,<video>,<script>等,而提供的屬性名就是crossOrigin屬性。

因此,上面的跨域問題可以這么處理:

var canvas = document.createElement('canvas');var context = canvas.getContext('2d');var img = new Image();img.crossOrigin = '';img.onload = function () {    context.drawImage(this, 0, 0);    context.getImageData(0, 0, this.width, this.height);};img.src = 'https://avatars3.githubusercontent.com/u/496048?s=120&v=4';';

增加一個img.crossOrigin = ''即可,雖然JS代碼這里設置的是空字符串,實際上起作用的屬性值是anonymous。

crossOrigin可以有下面兩個值:

關鍵字 釋義
anonymous 元素的跨域資源請求不需要憑證標志設置。
use-credentials 元素的跨域資源請求需要憑證標志設置,意味著該請求需要提供憑證。

其中,只要crossOrigin的屬性值不是use-credentials,全部都會解析為anonymous,包括空字符串,包括類似'abc'這樣的字符。

例如:

img.crossOrigin = 'abc';console.log(img.crossOrigin);    // 結果是'anonymous'

另外還有一點需要注意,那就是雖然沒有crossOrigin屬性,和設置crossOrigin="use-credentials"在默認情況下都會報跨域出錯,但是性質上卻不一樣,兩者有較大區別。

crossOrigin兼容性

IE11+(IE Edge),Safari,Chrome,Firefox瀏覽器均支持,IE9和IE10會報SecurityError安全錯誤,如下截圖:

四、crossOrigin屬性為什么可以解決資源跨域問題?

crossOrigin=anonymous相對于告訴對方服務器,你不需要帶任何非匿名信息過來。例如cookie,因此,當前瀏覽器肯定是安全的。

就好比你要去別人家里拿一件衣服,crossOrigin=anonymous相對于告訴對方,我只要衣服,其他都不要。如果不說,可能對方在衣服里放個竊聽器什么的,就不安全了,瀏覽器就會阻止。

五、IE10瀏覽器不支持crossOrigin怎么辦?

我們請求圖片的時候,不是直接通過new Image(),而是借助ajax和URL.createObjectURL()方法曲線救國。

代碼如下:

var xhr = new XMLHttpRequest();xhr.onload = function () {    var url = URL.createObjectURL(this.response);    var img = new Image();    img.onload = function () {        // 此時你就可以使用canvas對img為所欲為了        // ... code ...        // 圖片用完后記得釋放內存        URL.revokeObjectURL(url);    };    img.src = url;};xhr.open('GET', url, true);xhr.responseType = 'blob';xhr.send();

此方法不僅IE10瀏覽器OK,原本支持crossOrigin的諸位瀏覽器也是支持的。

也就多走一個ajax請求,還可以!

根據,根據實踐發現,在IE瀏覽器下,如果請求的圖片過大,幾千像素那種,圖片會加載失敗,我猜是超過了blob尺寸限制。

六、結束語

最近工作中學到的一點小經驗,希望可以幫到遇到類似問題的小伙伴。也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 临猗县| 禹城市| 海宁市| 武胜县| 阿克苏市| 太白县| 榆中县| 宝应县| 若尔盖县| 苏尼特左旗| 红河县| 宁陕县| 仁布县| 神木县| 高安市| 黎城县| 南投市| 永靖县| 余庆县| 灯塔市| 常山县| 长寿区| 疏勒县| 六枝特区| 东山县| 柳江县| 温宿县| 镇宁| 和林格尔县| 延长县| 邻水| 衡南县| 阳西县| 莆田市| 平塘县| 台东县| 长岭县| 涿鹿县| 银川市| 正蓝旗| 普陀区|