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

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

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

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

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

第一个效果：灰度图

插入html如下：

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>

第二种效果：浮雕图效果

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>

html 图像处理灰度图和浮雕图类PS相关推荐

照片生成STL浮雕文件视频演示，图片转灰度图，灰度图转STL浮雕图
图片转成STL浮雕图视频教程,照片转成灰度图转STL文件操作演示把彩色照片转成STL浮雕图视频教程,照片转成灰度图操作演示,把手机拍的照片转成浮雕图效果示例,照片转成灰度图效果示例,彩色照片转成浮雕 ...
精雕软件怎么把图片转成灰度图_怎么把普通的照片变成浮雕用的灰度图精雕图灰度图浮雕图之间怎么能联系起来使用...
怎么把普通的照片变成浮雕用的灰度图用PS啊,里面有这种效果的,若需要帮忙的话,可以加发给我一份啊,尽量帮你哈,呵呵用 photoshop 把照片变成灰度图,用PS做有很多方法,介绍两种: 方法1: ...
1015葛芮杉李睿莹|1-圖像处理与人脸识别的结合应用。群里贴图2-每组学会一个新的ffmpeg的命令，用于视音频处理（自学：看文档，搜索等）3-每组学会2个图像处理的函数，贴图
#人脸识别+裁切+粘贴 import cv2 import numpy as np import pandas as pd import os from matplotlib import pyplo ...
推荐一款超级好用的开源画图工具：用例图、架构图、时序图、类图、E-R图、甘特图
在项目开发的过程中需要各种类型的图来进行支撑,比如用例图.系统架构图.时序图.类图.E-R图,甚至项目管理的甘特图等等.为了画这些图我们往往需要寻找各类付费.免费的软件进行操作. 今天给大家推荐一款开 ...
【UML 建模】UML建模语言入门 -- 静态图详解类图对象图包图静态图建模实战
发现个好东西思维导图, 最近开始用MindManager整理博客 . 作者 :万境绝尘转载请注明出处 : http://blog.csdn.net/shulianghan/article/deta ...
****** 五十 ******、软设笔记【UML分析和意义】-类图、对象图、状态图、活动图、顺序图、协作图、构件图、部署图，动静态模式...
一.类图(Class Diagram) 描述一组类.接口.协作已经它们之间的图,用来显示系统中各个类的静态结构图. 类之间的关系(relationship) *依赖(dependency) *泛化(g ...
UML实践---用例图、顺序图、状态图、类图、包图、协作图
转载:http://www.uml.org.cn/oobject/200901203.asp 面向对象的问题的处理的关键是建模问题.建模可以把在复杂世界的许多重要的细节给抽象出.许多建模工具封装了UM ...
UML实践----用例图、顺序图、状态图、类图、包图、协作图
http://www.uml.org.cn/oobject/200901203.asp UML实践----用例图.顺序图.状态图.类图.包图.协作图 2009-01-20 作者:Randy Mille ...
Eclipse 插件用法：Eclipse 利用 Amateras UML 生成 Java 类图、时序图和 UML 类图
文章目录前言一.安装 Eclipse 官方提供的安装框架 GEF 1.1.Eclipse 中第三方插件更新/安装策略 1.2.为什么选择 GEF 框架? 1.3.GEF 框架安装二.安装 Ama ...

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

html 图像处理灰度图和浮雕图类PS相关推荐

最新文章

热门文章

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

html 图像处理 灰度图和浮雕图类PS相关推荐

最新文章

热门文章

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

html 图像处理灰度图和浮雕图类PS相关推荐