canvas圖片的跨域問題


科普文章from MDN

實踐證明這篇里的回答對的:

1.起個服務器再在chrome里試一下,應該會跑通。
2.右鍵chrome,屬性,在目標后面加上(有個空格) --allow-file-access-from-files

http-server以后就click就有效了。

這樣確實也可以,Mac的話用終端帶參數啟動。

想起來之前看到一個純canvas的大轉盤,點了沒反應,估計也是因為跨域。

Canvas.toDataURL 圖片跨域問題可以參看這里

第三種方法:

 img.crossOrigin = "Anonymous"

然而我在function handleFileLoad(evt) {

//加了卻沒解決問題

evt.result.crossOrigin = "Anonymous";}

然而火狐瀏覽器不設置也是好好的,說明報的錯不准?

那還是谷歌讀取本地文件的問題(話說報錯也只提到most likely due to跨域問題)

第四種,據說LoadQueue的第三個參數是設置跨域的:

new createjs.LoadQueue(true, "../_assets/art/");//params(是否XMLHttpRequest模式,路徑)

第三個參數,高人說已經成為過去式了。

 

很菜的一個報錯:如果is not a constructor...

這樣就表示一個類的constructor首字母應該是大寫的,筆誤寫成小寫的就沒法實例化了。

基於base64的轉換:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, 
initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <link rel="stylesheet" href="http://v3.faqrobot.org/hvb/com/css/reset.css?dev=1"> <script type="text/javascript"
src
="http://v3.faqrobot.org/hvb/com/js/jquery-1.11.3.min.js?dev=1"></script> <script type="text/javascript" src="http://v3.faqrobot.org/hvb/com/js/base.js?dev=1"></script> <title>video</title> <style> body, html { width: 100%; height: 100%; } </style> </head> <body> <canvas width="400" height="300"></canvas> <img> <script> ;$(function() { var cav = $('canvas')[0], ctx = cav.getContext('2d'); var img = new Image(); img.src = 'images/robot.png'; img.crossOrigin = '*';//解決跨域問題,需在服務器端運行,也可為 anonymous img.onload = function() { ctx.drawImage(img, 0, 0);//img轉換為canvas ctx.fillRect(0, 0, 50, 50); var base64 = cav.toDataURL('images/png');//注意是canvas元素才有 toDataURL 方法 console.log(base64); $('img')[0].src = base64;//canvas 轉換為 img } }); </script> </body> </html>

無關內容僅作記錄。。


免責聲明!

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



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