canvas里调用getImageData的问题

最新推荐文章于 2024-08-13 15:21:44 发布

mmxmasdasndj

最新推荐文章于 2024-08-13 15:21:44 发布

阅读量1.2w

点赞数

分类专栏： html5 文章标签： canvas

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

网上分析1：

canvas元素支持绘制任意图片元素：

var ctx = document.getElementById("canvas").getContext("2d");
if (ctx){
    var img = new Image();
    img.onload = function(){
        ctx.drawImage(img, 0, 0, 640, 480);
    }
    img.src = img_url;
}

我们还可以通过context的getImageData方法获取图像每个像素的数据，但是如果你的img_url和你的页面不是同源的，那么getImageData会导致错误，比如：

var ctx = document.getElementById("canvas").getContext("2d");
if (ctx){
    var img = new Image();
    img.onload = function(){

        try {

            ctx.drawImage(img, 0, 0, 640, 480);

            var originImageData = ctx.getImageData(0, 0, 640, 480);

        }

        catch (e) {alert(e.message)}      
    }
    img.src = img_url;
}

我们增加了try/catch来捕获异常，在Chrome下你会得到这个错误：SECURITY_ERR: DOM Exception 18，而在Firefox下为：Security error。

网上分析2：

因为本地测试用的图片是文件夹内的，也有可能是一个url，js跨域限制是不能获取非同一域名下的数据的，而本地的位置是没有域名的，url是非同一域名的，所以浏览器都认为你是跨域了，才会报错。
如果一定要测试这个代码，解决办法也容易，我是直接把文件放到了apache根目录，然后localhost访问就OK了。。

// Firefox 下如果要读取本地文件，可以去掉下面这行代码的注释、解决firefox跨域访问的问题
//netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserRead”);

弹出对话框的时候选择allow，并要求记住选择，之后就再也不弹出对话框了，有什么方法可以让他再次弹出对话框？修改~/.Mozilla 目录里的prefs.js文件内容，去掉相关设置就可以了。

总结：经过本人亲自验证，通过服务器（apache/tomcat）访问自己服务器上的图片才能成功测试putImageData(imgData（图片资源）,left,top),但是如果是自己画在canvas上然后获取的资源则不会存在跨域问题

以下是本人的代码测试，按预期结果（图片反色和透明度修改）运行了，如果哪里还有问题希望指出，谢谢

<!DOCTYPE HTML> 
<html>          
<body>  
<canvas id="canvas" width="400" height="400" style="border:1px inset green">     

<p>                 
Your browserdoes not support the canvas element!             
</p>         
</canvas>        


<script type="text/javascript">
var preImage=function(url,callback){  
     var img = new Image(100,100); //创建一个Image对象，实现图片的预下载  
     img.src = url;  

    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数  
         callback.call(img);  
        return; // 直接返回，不用再处理onload事件  
     }  

     img.onload = function () { //图片下载完毕时异步调用callback函数。  
         callback.call(img);//将回调函数的this替换为Image对象  
     };  
} ;
var imgSrc="200.jpg";
preImage(imgSrc,function(){  
fs.start.call(this);

});  
var fs={
start : function(){
 var canvas = document.getElementById('canvas');
 var context= canvas.getContext('2d');
//var imgSrc = document.getElementById('codeex.cn') 


//context.drawImage(imgSrc,10,10); 


context.drawImage(this,10,10); 
var imgd = context.getImageData(10,10,100,100); 
var pix = imgd.data; 
//alert(imgd.width+" "+imgd.height);
//反色处理 
for(var i=0,n=pix.length;i<n;i+=4) 


{ 


 pix[i] = 255 - pix[i]; //红 


 pix[i+1] = 255-pix[i+1]; //绿 


 pix[i+2] = 255-pix[i+2]; //蓝 


 pix[i+3] = pix[i+3]; //alpha 


} 


context.putImageData(imgd,10,230); 
imgd = context.getImageData(10,10,100,100); 


pix = imgd.data; 


//透明处理 透明度0.6 


for(var i=0,n=pix.length;i<n;i+=4) 


{ 


 pix[i] = pix[i]; //红 


 pix[i+1] = pix[i+1]; //绿 


 pix[i+2] = pix[i+2]; //蓝 


 pix[i+3] = pix[i+3]*0.6; //alpha 


} 


context.putImageData(imgd,260,10); 
}
}
        </script>     
</body>  
</html>