html 图像处理 灰度图和浮雕图类PS

大家好，又见面了，我是你们的朋友全栈君。

html5 的canvas还有一些很酷炫的效果，接下来讲的是canvas对像素的处理，虽然略有些复杂，但实现出的效果，还是很赞的~~。

为了不让大家失望，先强调一句：下列效果需调用getImageData()，而这个方法会被某些浏览器阻止，如chrome。原因是：

受js同源策略影响，js跨域限制是不能获取非同一域名下的数据的，以下代码是在本地上测试的， 而本地的位置是没有域名的，所以浏览器都认为你是跨域，导致报错。

解决方法：可以用其他的浏览器。或者可以将图片写入PHP，具体可参照 解决getImageData跨域

第一个效果：灰度图

    插入html如下：

 <img id=”img1″ src=”baijuyi.jpg”  />  <input id=”btnGO” type=”button” value=”转成灰度图”/><br />  <canvas id=”c1″ height=”200″ width=”320″></canvas><br />

<script>  function $(id) { return document.getElementById(id); } function init() { $(“btnGO”).οnclick=function() { c1.width=img1.width; c1.height=img1.height; var ctx=c1.getContext(“2d”); ctx.drawImage(img1,0,0,c1.width,c1.height);//将image绘制到canvas上 var imgData=ctx.getImageData(0,0,c1.width,c1.height);//获取image的所有像素点存储在imgData数组里，每四个为一个像素的rgba值；从上到下，从左到右。 //比如imgData.data[0]~imgData.data[3]表示第一个像素点。

for(var i=0;i<imgData.data.length;i+=4) { var r=imgData.data[i],    g=imgData.data[i+1], b=imgData.data[i+2]; var gray =(r*30+g*59+b*11+50)*0.01;//灰度值公式 imgData.data[i]=gray; imgData.data[i+1]=gray; imgData.data[i+2]=gray; } ctx.putImageData(imgData,0,0);//将image重绘到canvas中 } }

</script>

第二种效果：浮雕图效果

<h2>像素操作</h2> <img id=”img1″ src=”baijuyi.jpg”  /> <input id=”btnGO” type=”button” value=”转成浮雕图”/><br /> <canvas id=”c1″ height=”200″ width=”320″></canvas><br />

<script>

function $(id) { return document.getElementById(id); } function init() { $(“btnGO”).οnclick=function()          { c1.width=img1.width;         c1.height=img1.height; var ctx=c1.getContext(“2d”); ctx.drawImage(img1,0,0,c1.width,c1.height); var imgData=ctx.getImageData(0,0,c1.width,c1.height); console.log(imgData); var iData=imgData.data;

               //浮雕效果的实现可以有多种方式，这里介绍较简单的。新的像素色彩值是和右边像素的色彩值相减，然后再加128 for(var i=0;i<img1.height-1;i++) {    for(var j=0;j<img1.width;j++) { var start=(i*img1.width+j)<<2; var r=iData[start]-iData[start+4]+128,    g=iData[start+1]-iData[start+5]+128,    b=iData[start+2]-iData[start+6]+128;    //越界处理    r=(r<0)?0:(r>255)?255:r;    g=(g<0)?0:(g>255)?255:g;    b=(b<0)?0:(b>255)?255:b;    //再转灰度图    var g=(r*30+g*59+b*11+50)*0.01;    iData[start]=g;    iData[start+1]=g;    iData[start+2]=g;    }   }   ctx.putImageData(imgData,0,0);//将新数据绘入canvas中 } } init();//调用函数 </script>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151352.html原文链接：https://javaforall.cn