Canvas 跨域脫坑實踐

hufeng 發布于2019-08-23 12:49 / 3034人閱讀

摘要：跨域如何解決這里記錄下使用繪圖過程中所遇到的跨域問題和解決方案。先來看下實現方法。跨域正常情況下，如果需要將繪制好的圖像輸出，我們可以調用的或方法來獲取到圖像數據。然而，遇到圖片跨域的情況就有些尷尬了。

Canvas 跨域如何解決？這里記錄下使用 Canvas 繪圖過程中所遇到的跨域問題和解決方案。

先來看下實現方法。

實現方法

目標圖片一般是由圖片 + 文本構成。無論是千奇百怪的大小圖片，還是變幻莫測的各式文本，都能用 canvas api drawImage 和 fillText 方法來完成。

基本流程如下:

獲取 canvas 上下文 -- ctx

const canvas = document.querySelector(selector)
const ctx = canvas.getContext("2d")

繪圖

忽略圖片上的內容，直接用 drawImage 將其畫到 canvas 畫布上即可。

const image = new Image()
image.src = src
image.onload = () => {
    ctx.save()
    // 這里我們采用以下參數調用
    this.ctx.drawImage(image, dx, dy, dWidth, dHeight)
    this.ctx.restore()
}

drawImage 有3種參數使用方式，具體用法可以查看 MDN 文檔。

獲取圖像數據

調用 HTMLCanvasElement DOM 對象提供的 toBlob(), toDataURL() 或 getImageData() 方法，即可。

canvas.toBlob(blob => {
    // 你要的 blob
}, mimeType, encoderOptions)

這里的 mimeType 默認值為 image/png。encoderOptions 指定了圖片質量，可用于壓縮，不過需要 mimeType 格式為 image/jpeg 或者 image/webp。

Canvas 跨域

正常情況下，如果需要將繪制好的圖像輸出，我們可以調用 canvas 的 toBlob(), toDataURL() 或 getImageData() 方法來獲取到圖像數據。然而，遇到圖片跨域的情況就有些尷尬了。可能回報如下錯誤:

Failed to execute "toBlob" on "HTMLCanvasElement": Tainted canvases may not be exported.

或者

Access to image at "https://your.image.src" from origin "https://your.website" has been blocked by CORS policy: No "Access-Control-Allow-Origin" header is present on the requested resource.

先來看看第2種情況。

Access-Control-Allow-Origin
如果你跨域使用某些圖片資源，并且該服務未正確響應 Access-Control-Allow-Origin 頭信息, 則會報出如下錯誤信息:

Access to image at "https://your.image.src" from origin "https://your.website" has been blocked by CORS policy: No "Access-Control-Allow-Origin" header is present on the requested resource.

說明不允許跨域訪問，那么你可以試著讓后臺修改 Access-Control-Allow-Origin 的值為 * 或 your.website, 或者改用同域資源（考慮下？）。

接下來，我們來解決第1種情況。

img.crossOrigin = "Anonymous"
為避免未經許可拉取遠程網站信息而導致的用戶隱私泄露（如 GPS 等信息，具體可搜索 Exif），在調用 canvas 的 toBlob(), toDataURL() 或 getImageData() 會拋出安全錯誤:

Failed to execute "toBlob" on "HTMLCanvasElement": Tainted canvases may not be exported.

如果你的圖片服務允許跨域使用（如果不允許，見上條），那么你該考慮下給 img 元素加上 crossOrigin 屬性，即：

const image = new Image()
image.crossOrigin = "Anonymous"
image.src = src

如此，你便可以拿到圖片數據了。如果沒招，換同域資源吧～

云服務器 GPU云服務器脫坑記 Canvas _canvas 2canvas

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99029.html

優秀博文收藏（不定期更新）

摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永我的書簽我的書簽（謹慎導入，小心覆蓋）工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

sunsmell 2019-08-26 13:54 評論0 收藏0
優秀博文收藏（不定期更新）

摘要：我的書簽我的書簽謹慎導入，小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網絡封包截取工具格式化工具標注工具模擬請求類深入淺出布局你所不知道的動畫技巧與細節常用代碼黑魔法小技巧，讓你少寫不必要的，代碼更優雅一勞永我的書簽我的書簽（謹慎導入，小心覆蓋）工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...

zhangfaliang 2019-08-30 10:57 評論0 收藏0
Vue 脫坑記 - 查漏補缺(匯總下群里高頻詢問的xxx及給出不靠譜的解決方案)

摘要：過程中一些常見的問題講真這本篇文章真的是良心文章，感覺作者了，一些見到過沒見到過的問題都差不多能找到了。 Vue過程中一些常見的問題講真這本篇文章真的是良心文章，感覺作者了，一些見到過沒見到過的問題都差不多能找到了。

calx 2019-08-21 17:39 評論0 收藏0