HTML 5 canvas getImageData从外部加载的图像 [英] HTML 5 canvas getImageData from an externally-loaded image
本文介绍了HTML 5 canvas getImageData从外部加载的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我知道由于安全原因，不可能直接进行。但是，我听说有一些图像托管网站，允许他们的图像以类似的方式使用（Google Picasa？）。我可能都错了，但我想知道这是否是真的，如果是这样，我如何从这样的图像获得图像数据。
提前谢谢
是的，有一些公共主机提供可以在画布中使用的图片'getImageData
Dropbox是其中之一： http://www.dropbox.com
要使用这些图片，您必须在加载图片时使用context.crossOrigin ='anonymous'标记：
var image = document.createElement（img）; // Chrome错误防止var image = new Image（）;
image.onload = function（）{
//在Chrome + Mozilla中，您可以使用context.getImageData
//但IE仍会抛出CORS安全错误
}
image.crossOrigin =Anonymous;
image.src =www.CrossOriginSite.com/anyImage.png;
一个剩下的Gotcha是IE浏览器仍然不支持crossOrigin标志，不会让您通过getImageData使用这些图片。
Chrome和Mozilla允许getImageData访问。
..
在Chrome或Mozilla中查看时，此小提琴会成功，但在IE中仍会失败：
http://jsfiddle.net/m1erickson/czmms/
这是代码：
< html>
< head>
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/> <！ - reset css - >
< script type =text / javascriptsrc =http://code.jquery.com/jquery.min.js>< / script>
< style>
body {background-color：ivory; }
canvas {border：1px solid red;}
< / style>
< script>
$（function（）{
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
var canvasCORS = document.getElementById（canvasCORS）;
var ctxCORS = canvasCORS.getContext（2d）;
var canvasAnonymous = document.getElementById（canvasAnonymous）;
var ctxAnonymous = canvasAnonymous.getContext（2d）;
//使用图像WITHOUT crossOrigin = anonymous
//在所有浏览器中失败
var externalImage1 = document.createElement（img ）; // chrome防止新的Image（）;
externalImage1.onload = function（）{
canvas.width = externalImage1.width;
canvas.height = externalImage1.height;
ctx.drawImage（externalImage1,0,0）;
//使用getImageData将黄色替换为黄色
var imageData = recolorImage（externalImage1,0,0,255,255,255,0）;
//将改变的数据放回画布
//这将在CORS违例时失败
ctxCORS.putImageData（imageData，0,0）;
}
externalImage1.src =https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png;
//使用图像WITH crossOrigin = anonymous
//在Chrome + Mozilla中成功，在IE
中仍然失败var externalImage2 = new Image（）;
externalImage2.onload = function（）{
canvas.width = externalImage2.width;
canvas.height = externalImage2.height;
ctx.drawImage（externalImage2,0,0）;
//使用getImageData将黄色替换为黄色
var imageData = recolorImage（externalImage2,0,0,255,255,255,0）;
//将更改后的数据放回画布
//这将在CORS违例时失败
ctxAnonymous.putImageData（imageData，0,0）;
}
externalImage2.crossOrigin =Anonymous;
externalImage2.src =https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png;
function recolorImage（img，oldRed，oldGreen，oldBlue，newRed，newGreen，newBlue）{
var c = document.createElement（'canvas'）;
var ctx = c.getContext（2d）;
var w = img.width;
var h = img.height;
c.width = w;
c.height = h;
//在临时画布上绘制图像
ctx.drawImage（img，0，0，w，h）;
//将整个图像拉入像素数据数组
var imageData = ctx.getImageData（0，0，w，h）;
//检查每个像素，
//将任何旧的rgb更改为new-rgb
for（var i = 0; i
//这个像素是旧的rgb？
if（imageData.data [i] == oldRed&&
imageData.data [i + 1] == oldGreen&
imageData.data [i + 2] == oldBlue
）{
//改成你的新rgb
imageData.data [i] = newRed;
imageData.data [i + 1] = newGreen;
imageData.data [i + 2] = newBlue;
}
}
return（imageData）;
}
}）; // end $（function（）{}）;
< / script>
< / head>
< body>
< p>原始外部图片< / p>
< canvas id =canvaswidth = 140 height = 140>< / canvas>
< p> .getImageData with .crossOrigin ='anonymous'
< p> [在Chrome + Mozilla中成功，在IE中仍然失败]< / p&
< canvas id =canvasAnonymouswidth = 140 height = 140>< / canvas>
< p> .getImageData无.crossOrigin ='anonymous'
< p> [在所有浏览器上失败]< / p&
< canvas id =canvasCORSwidth = 140 height = 140>< / canvas>
< / body>
< / html>
I know it is not possible to do it straightaway due to security reasons. However, I have heard there are some image-hosting websites that allow their images to be used in a similar manner (Google Picasa?). I could be all wrong, but I would like to know if this is true and if so, how can I get image data from such an image.
Thank you in advance.
解决方案
Yes, there are public hosts that serve images that can be used in canvas’ getImageData
Dropbox is one of them: http://www.dropbox.com
To use those images, you must use the context.crossOrigin=’anonymous’ flag when loading the image:
var image=document.createElement("img"); // Chrome bug prevents var image=new Image();
image.onload=function(){
// in Chrome+Mozilla you can use context.getImageData
// but IE still throws the CORS security error
}
image.crossOrigin = "Anonymous";
image.src="www.CrossOriginSite.com/anyImage.png";
One remaining "Gotcha" is that the IE browser still does not honor the crossOrigin flag, so IE still will not let you use these images with getImageData.
Chrome and Mozilla allow getImageData access.
For example...
This Fiddle will succeed when viewed in Chrome or Mozilla, but will still fail in IE:
http://jsfiddle.net/m1erickson/czmms/
Here is code:
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasCORS=document.getElementById("canvasCORS");
var ctxCORS=canvasCORS.getContext("2d");
var canvasAnonymous=document.getElementById("canvasAnonymous");
var ctxAnonymous=canvasAnonymous.getContext("2d");
// Using image WITHOUT crossOrigin=anonymous
// Fails in all browsers
var externalImage1=document.createElement("img"); // chrome bug prevents new Image();
externalImage1.onload=function(){
canvas.width=externalImage1.width;
canvas.height=externalImage1.height;
ctx.drawImage(externalImage1,0,0);
// use getImageData to replace blue with yellow
var imageData=recolorImage(externalImage1,0,0,255,255,255,0);
// put the altered data back on the canvas
// this will FAIL on a CORS violation
ctxCORS.putImageData(imageData,0,0);
}
externalImage1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";
// Using image WITH crossOrigin=anonymous
// Succeeds in Chrome+Mozilla, Still fails in IE
var externalImage2=new Image();
externalImage2.onload=function(){
canvas.width=externalImage2.width;
canvas.height=externalImage2.height;
ctx.drawImage(externalImage2,0,0);
// use getImageData to replace blue with yellow
var imageData=recolorImage(externalImage2,0,0,255,255,255,0);
// put the altered data back on the canvas
// this will FAIL on a CORS violation
ctxAnonymous.putImageData(imageData,0,0);
}
externalImage2.crossOrigin = "Anonymous";
externalImage2.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/colorhouse.png";
function recolorImage(img,oldRed,oldGreen,oldBlue,newRed,newGreen,newBlue){
var c = document.createElement('canvas');
var ctx=c.getContext("2d");
var w = img.width;
var h = img.height;
c.width = w;
c.height = h;
// draw the image on the temporary canvas
ctx.drawImage(img, 0, 0, w, h);
// pull the entire image into an array of pixel data
var imageData = ctx.getImageData(0, 0, w, h);
// examine every pixel,
// change any old rgb to the new-rgb
for (var i=0;i<imageData.data.length;i+=4)
{
// is this pixel the old rgb?
if(imageData.data[i]==oldRed &&
imageData.data[i+1]==oldGreen &&
imageData.data[i+2]==oldBlue
){
// change to your new rgb
imageData.data[i]=newRed;
imageData.data[i+1]=newGreen;
imageData.data[i+2]=newBlue;
}
}
return(imageData);
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Original external image</p>
<canvas id="canvas" width=140 height=140></canvas>
<p>.getImageData with .crossOrigin='anonymous'
<p>[Succeeds in Chrome+Mozilla, still fails in IE]</p>
<canvas id="canvasAnonymous" width=140 height=140></canvas>
<p>.getImageData without .crossOrigin='anonymous'
<p>[Fails on all browsers]</p>
<canvas id="canvasCORS" width=140 height=140></canvas>
</body>
</html>
这篇关于HTML 5 canvas getImageData从外部加载的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
