{"id":7378,"date":"2018-02-10T23:27:45","date_gmt":"2018-02-10T15:27:45","guid":{"rendered":"http:\/\/www.zhangxinxu.com\/wordpress\/?p=7378"},"modified":"2018-06-25T14:30:57","modified_gmt":"2018-06-25T06:30:57","slug":"crossorigin-canvas-getimagedata-cors","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2018\/02\/crossorigin-canvas-getimagedata-cors\/","title":{"rendered":"\u89e3\u51b3canvas\u56fe\u7247getImageData,toDataURL\u8de8\u57df\u95ee\u9898"},"content":{"rendered":"

by zhangxinxu<\/a> from http:\/\/www.zhangxinxu.com\/wordpress\/?p=7378<\/a>
\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4f46\u9700\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u548c\u51fa\u5904\u3002<\/p>\n

\u4e00\u3001\u9996\u5148\uff0c\u56fe\u7247\u670d\u52a1\u5668\u9700\u8981\u914d\u7f6eAccess-Control-Allow-Origin<\/h3>\n

\u4e00\u822c\u56e2\u961f\u90fd\u4f1a\u6709\u4e00\u4e2a\u4e13\u95e8\u57df\u540d\u653e\u7f6e\u9759\u6001\u8d44\u6e90\uff0c\u4f8b\u5982\u817e\u8baf\u662fgtimg.com<\/code>\uff0c\u767e\u5ea6\u662fbdimg.com<\/code>\uff1b\u6216\u8005\u5f88\u591a\u56e2\u961f\u4f7f\u7528\u7684\u662f\u817e\u8baf\u4e91\u6216\u8005\u963f\u91cc\u4e91\u7684\u670d\u52a1\u3002<\/p>\n

\u800c\u4e3b\u9875\u9762\u6240\u5728\u57df\u540d\u5f80\u5f80\u4e0d\u4e00\u6837\uff0c\u5f53\u9700\u8981\u9700\u8981\u5bf9canvas\u56fe\u7247\u8fdb\u884cgetImageData()<\/code>\u6216toDataURL()<\/code>\u64cd\u4f5c\u7684\u65f6\u5019\uff0c\u8de8\u57df\u95ee\u9898\u5c31\u51fa\u6765\u4e86\uff0c\u800c\u4e14\u8de8\u57df\u95ee\u9898\u8fd8\u4e0d\u6b62\u4e00\u5c42\u3002<\/p>\n

\u9996\u5148\uff0c\u7b2c\u4e00\u6b65\uff0c\u56fe\u7247\u670d\u52a1\u5668\u9700\u8981\u914d\u7f6eAccess-Control-Allow-Origin\u4fe1\u606f\uff0c\u4f8b\u5982\uff1a<\/p>\n

\u5982PHP\u6dfb\u52a0\u54cd\u5e94\u5934\u4fe1\u606f\uff0c*<\/code>\u901a\u914d\u7b26\u8868\u793a\u5141\u8bb8\u4efb\u610f\u57df\u540d\uff1a<\/p>\n

header(\"Access-Control-Allow-Origin: *\");<\/pre>\n
\u6216\u8005\u6307\u5b9a\u57df\u540d\uff1a<\/p>\n
header(\"Access-Control-Allow-Origin: www.zhangxinxu.com\");<\/pre>\n
\u6b64\u65f6\uff0cChrome\u6d4f\u89c8\u5668\u5c31\u4e0d\u4f1a\u6709Access-Control-Allow-Origin\u76f8\u5173\u7684\u9519\u8bef\u4fe1\u606f\u4e86\uff0c\u4f46\u662f\uff0c\u8fd8\u4f1a\u6709\u5176\u4ed6\u7684\u8de8\u57df\u9519\u8bef\u4fe1\u606f\u3002<\/p>\n
\u4e8c\u3001canvas\u56fe\u7247getImageData cross-origin\u8de8\u57df\u95ee\u9898<\/h3>\n
\u5bf9\u4e8e\u8de8\u57df\u7684\u56fe\u7247\uff0c\u53ea\u8981\u80fd\u591f\u5728\u7f51\u9875\u4e2d\u6b63\u5e38\u663e\u793a\u51fa\u6765\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528canvas\u7684drawImage()<\/code> API\u7ed8\u5236\u51fa\u6765\u3002\u4f46\u662f\u5982\u679c\u4f60\u60f3\u66f4\u8fdb\u4e00\u6b65\uff0c\u901a\u8fc7getImageData()<\/code>\u65b9\u6cd5\u83b7\u53d6\u56fe\u7247\u7684\u5b8c\u6574\u7684\u50cf\u7d20\u4fe1\u606f\uff0c\u5219\u591a\u534a\u4f1a\u51fa\u9519\u3002<\/p>\n
\u4e3e\u4f8b\u6765\u8bf4\uff0c\u4f7f\u7528\u4e0b\u9762\u4ee3\u7801\u83b7\u53d6github\u4e0a\u7684\u81ea\u5df1\u5934\u50cf\u56fe\u7247\u4fe1\u606f\uff1a<\/p>\n
var canvas = document.createElement('canvas');\nvar context = canvas.getContext('2d');\n\nvar img = new Image();\nimg.onload = function () {\n    context.drawImage(this, 0, 0);\n    context.getImageData(0, 0, this.width, this.height);\n};\nimg.src = 'https:\/\/avatars3.githubusercontent.com\/u\/496048?s=120&v=4';';<\/pre>\n
\u7ed3\u679c\u5728Chrome\u6d4f\u89c8\u5668\u4e0b\u663e\u793a\u5982\u4e0b\u9519\u8bef\uff1a<\/p>\n
Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.<\/p><\/blockquote>\n
\"\u51fa\u9519\u4fe1\u606f\u622a\u56fe\"<\/p>\n
Firefox\u6d4f\u89c8\u5668\u9519\u8bef\u4e3a\uff1a<\/p>\n
SecurityError: The operation is insecure.<\/p><\/blockquote>\n
\u5982\u679c\u4f7f\u7528\u7684\u662fcanvas.toDataURL()\u65b9\u6cd5\uff0c\u5219\u4f1a\u62a5\uff1a<\/p>\n
Failed to execute ‘toDataURL’ on\u3000’HTMLCanvasElement’: Tainted canvased may not be exported<\/p><\/blockquote>\n
\u539f\u56e0\u5176\u5b9e\u90fd\u662f\u4e00\u6837\u7684\uff0c\u8de8\u57df\u5bfc\u81f4\u3002<\/p>\n
\u90a3\u6709\u6ca1\u6709\u4ec0\u4e48\u529e\u6cd5\u53ef\u4ee5\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u5462\uff1f<\/p>\n
\u53ef\u4ee5\u8bd5\u8bd5crossOrigin<\/code>\u5c5e\u6027\u3002<\/p>\n
\u4e09\u3001HTML crossOrigin\u5c5e\u6027\u89e3\u51b3\u8d44\u6e90\u8de8\u57df\u95ee\u9898<\/h3>\n
\u5728HTML5\u4e2d\uff0c\u6709\u4e9b\u5143\u7d20\u63d0\u4f9b\u4e86\u652f\u6301CORS(Cross-Origin Resource Sharing)\uff08\u8de8\u57df\u8d44\u6e90\u5171\u4eab\uff09\u7684\u5c5e\u6027\uff0c\u8fd9\u4e9b\u5143\u7d20\u5305\u62ec<img><\/code>\uff0c<video><\/code>\uff0c<script><\/code>\u7b49\uff0c\u800c\u63d0\u4f9b\u7684\u5c5e\u6027\u540d\u5c31\u662fcrossOrigin<\/code>\u5c5e\u6027\u3002<\/p>\n
\u56e0\u6b64\uff0c\u4e0a\u9762\u7684\u8de8\u57df\u95ee\u9898\u53ef\u4ee5\u8fd9\u4e48\u5904\u7406\uff1a<\/p>\n
var canvas = document.createElement('canvas');\nvar context = canvas.getContext('2d');\n\nvar img = new Image();\nimg.crossOrigin = '';<\/span>\nimg.onload = function () {\n    context.drawImage(this, 0, 0);\n    context.getImageData(0, 0, this.width, this.height);\n};\nimg.src = 'https:\/\/avatars3.githubusercontent.com\/u\/496048?s=120&v=4';';<\/pre>\n
\u589e\u52a0\u4e00\u4e2aimg.crossOrigin = ''<\/code>\u5373\u53ef\uff0c\u867d\u7136JS\u4ee3\u7801\u8fd9\u91cc\u8bbe\u7f6e\u7684\u662f\u7a7a\u5b57\u7b26\u4e32\uff0c\u5b9e\u9645\u4e0a\u8d77\u4f5c\u7528\u7684\u5c5e\u6027\u503c\u662fanonymous<\/code>\u3002<\/p>\n
crossOrigin<\/code>\u53ef\u4ee5\u6709\u4e0b\u9762\u4e24\u4e2a\u503c\uff1a<\/p>\n\n\n\n\n\n\n
\u5173\u952e\u5b57<\/th>\n\u91ca\u4e49<\/th>\n<\/tr>\n<\/thead>\n
anonymous<\/td>\n\u5143\u7d20\u7684\u8de8\u57df\u8d44\u6e90\u8bf7\u6c42\u4e0d\u9700\u8981\u51ed\u8bc1\u6807\u5fd7\u8bbe\u7f6e\u3002<\/td>\n<\/tr>\n
use-credentials<\/td>\n\u5143\u7d20\u7684\u8de8\u57df\u8d44\u6e90\u8bf7\u6c42\u9700\u8981\u51ed\u8bc1\u6807\u5fd7\u8bbe\u7f6e\uff0c\u610f\u5473\u7740\u8be5\u8bf7\u6c42\u9700\u8981\u63d0\u4f9b\u51ed\u8bc1\u3002<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\u5176\u4e2d\uff0c\u53ea\u8981crossOrigin<\/code>\u7684\u5c5e\u6027\u503c\u4e0d\u662fuse-credentials<\/code>\uff0c\u5168\u90e8\u90fd\u4f1a\u89e3\u6790\u4e3aanonymous<\/code>\uff0c\u5305\u62ec\u7a7a\u5b57\u7b26\u4e32\uff0c\u5305\u62ec\u7c7b\u4f3c'abc'<\/code>\u8fd9\u6837\u7684\u5b57\u7b26\u3002<\/p>\n
\u4f8b\u5982\uff1a<\/p>\n
img.crossOrigin = 'abc';\nconsole.log(img.crossOrigin);    \/\/ \u7ed3\u679c\u662f'anonymous'<\/span><\/pre>\n
\"crossOrigin\u89e3\u6790\u4e3aanonymous\"<\/p>\n
\u53e6\u5916\u8fd8\u6709\u4e00\u70b9\u9700\u8981\u6ce8\u610f\uff0c\u90a3\u5c31\u662f\u867d\u7136\u6ca1\u6709crossOrigin<\/code>\u5c5e\u6027\uff0c\u548c\u8bbe\u7f6ecrossOrigin=\"use-credentials\"<\/code>\u5728\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u90fd\u4f1a\u62a5\u8de8\u57df\u51fa\u9519\uff0c\u4f46\u662f\u6027\u8d28\u4e0a\u5374\u4e0d\u4e00\u6837\uff0c\u4e24\u8005\u6709\u8f83\u5927\u533a\u522b\u3002<\/p>\n
crossOrigin\u517c\u5bb9\u6027<\/strong><\/p>\n
IE11+(IE Edge)\uff0cSafari\uff0cChrome\uff0cFirefox\u6d4f\u89c8\u5668\u5747\u652f\u6301\uff0cIE9\u548cIE10\u4f1a\u62a5SecurityError\u5b89\u5168\u9519\u8bef\uff0c\u5982\u4e0b\u622a\u56fe\uff1a<\/p>\n
<\/p>\n
\u56db\u3001crossOrigin\u5c5e\u6027\u4e3a\u4ec0\u4e48\u53ef\u4ee5\u89e3\u51b3\u8d44\u6e90\u8de8\u57df\u95ee\u9898\uff1f<\/h3>\n
crossOrigin=anonymous<\/code>\u76f8\u5bf9\u4e8e\u544a\u8bc9\u5bf9\u65b9\u670d\u52a1\u5668\uff0c\u4f60\u4e0d\u9700\u8981\u5e26\u4efb\u4f55\u975e\u533f\u540d\u4fe1\u606f\u8fc7\u6765\u3002\u4f8b\u5982cookie\uff0c\u56e0\u6b64\uff0c\u5f53\u524d\u6d4f\u89c8\u5668\u80af\u5b9a\u662f\u5b89\u5168\u7684\u3002<\/p>\n
\u5c31\u597d\u6bd4\u4f60\u8981\u53bb\u522b\u4eba\u5bb6\u91cc\u62ff\u4e00\u4ef6\u8863\u670d\uff0ccrossOrigin=anonymous<\/code>\u76f8\u5bf9\u4e8e\u544a\u8bc9\u5bf9\u65b9\uff0c\u6211\u53ea\u8981\u8863\u670d\uff0c\u5176\u4ed6\u90fd\u4e0d\u8981\u3002\u5982\u679c\u4e0d\u8bf4\uff0c\u53ef\u80fd\u5bf9\u65b9\u5728\u8863\u670d\u91cc\u653e\u4e2a\u7a83\u542c\u5668\u4ec0\u4e48\u7684\uff0c\u5c31\u4e0d\u5b89\u5168\u4e86\uff0c\u6d4f\u89c8\u5668\u5c31\u4f1a\u963b\u6b62\u3002<\/p>\n
\u4e94\u3001IE10\u6d4f\u89c8\u5668\u4e0d\u652f\u6301crossOrigin\u600e\u4e48\u529e\uff1f<\/h3>\n
\u6211\u4eec\u8bf7\u6c42\u56fe\u7247\u7684\u65f6\u5019\uff0c\u4e0d\u662f\u76f4\u63a5\u901a\u8fc7new Image()<\/code>\uff0c\u800c\u662f\u501f\u52a9ajax\u548cURL.createObjectURL()<\/code>\u65b9\u6cd5\u66f2\u7ebf\u6551\u56fd\u3002<\/p>\n
\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n
var xhr = new XMLHttpRequest();\nxhr.onload = function () {\n    var url = URL.createObjectURL(this.response);\n    var img = new Image();\n    img.onload = function () {\n        \/\/ \u6b64\u65f6\u4f60\u5c31\u53ef\u4ee5\u4f7f\u7528canvas\u5bf9img\u4e3a\u6240\u6b32\u4e3a\u4e86\n        \/\/ ... code ...\n        \/\/ \u56fe\u7247\u7528\u5b8c\u540e\u8bb0\u5f97\u91ca\u653e\u5185\u5b58<\/span>\n        URL.revokeObjectURL(url);\n    };\n    img.src = url;\n};\nxhr.open('GET', url, true);\nxhr.responseType = 'blob';\nxhr.send();<\/pre>\n
\u6b64\u65b9\u6cd5\u4e0d\u4ec5IE10\u6d4f\u89c8\u5668OK\uff0c\u539f\u672c\u652f\u6301crossOrigin\u7684\u8bf8\u4f4d\u6d4f\u89c8\u5668\u4e5f\u662f\u652f\u6301\u7684\u3002<\/p>\n
\u4e5f\u5c31\u591a\u8d70\u4e00\u4e2aajax\u8bf7\u6c42\uff0c\u8fd8\u53ef\u4ee5\uff01<\/p>\n
\u6839\u636e\uff0c\u6839\u636e\u5b9e\u8df5\u53d1\u73b0\uff0c\u5728IE\u6d4f\u89c8\u5668\u4e0b\uff0c\u5982\u679c\u8bf7\u6c42\u7684\u56fe\u7247\u8fc7\u5927\uff0c\u51e0\u5343\u50cf\u7d20\u90a3\u79cd\uff0c\u56fe\u7247\u4f1a\u52a0\u8f7d\u5931\u8d25\uff0c\u6211\u731c\u662f\u8d85\u8fc7\u4e86blob\u5c3a\u5bf8\u9650\u5236\u3002<\/p>\n
\u516d\u3001\u7ed3\u675f\u8bed<\/h3>\n
\u6700\u8fd1\u5de5\u4f5c\u4e2d\u5b66\u5230\u7684\u4e00\u70b9\u5c0f\u7ecf\u9a8c\uff0c\u5e0c\u671b\u53ef\u4ee5\u5e2e\u5230\u9047\u5230\u7c7b\u4f3c\u95ee\u9898\u7684\u5c0f\u4f19\u4f34\u3002<\/p>\n
\u611f\u8c22\u9605\u8bfb\uff01<\/p>\n
<\/p>\n
\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002
\n\u672c\u6587\u5730\u5740\uff1ahttp:\/\/www.zhangxinxu.com\/wordpress\/?p=7378<\/a><\/p>\n
\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5bf9\u4e8e\u8de8\u57df\u7684\u56fe\u7247\uff0c\u53ea\u8981\u80fd\u591f\u5728\u7f51\u9875\u4e2d\u6b63\u5e38\u663e\u793a\u51fa\u6765\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528canvas\u7684drawImage() API\u7ed8\u5236\u51fa\u6765\u3002\u4f46\u662f\u5982\u679c\u4f60\u60f3\u66f4\u8fdb\u4e00\u6b65\uff0c\u901a\u8fc7getImageData()\u65b9\u6cd5\u83b7\u53d6\u56fe\u7247\u7684\u5b8c\u6574\u7684\u50cf\u7d20\u4fe1\u606f\uff0c\u5219\u591a\u534a\u4f1a\u51fa\u9519\u3002<\/p>\n
\u90a3\u6709\u6ca1\u6709\u4ec0\u4e48\u529e\u6cd5\u53ef\u4ee5\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u5462\uff1f<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[896],"tags":[53,1216,888,75,1217],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/7378"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=7378"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/7378\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=7378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=7378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=7378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}