一起源码网 › 门户 › 前端设计 › 查看主题

利用HTML5中Canvas处理并存储图片

发布者: 豪劍 | 发布时间: 2018-1-15 15:47| 查看数: 2957| 评论数: 1|帖子模式

HTML5中增加的Canvas元素，配合JS灵活的语法，处理起图片变得异常简单，不需要在客户端用C/C++写一大堆代码，对于熟悉JS的程序员来说，只需要考虑处理图片的逻辑了。

canvas中如果想要处理图片就需要借助ImageData这个对象，就是将画布中某一区域中的图像以RGBA的方式保存下来，存成一个二维数组。

JavaScript代码复制内容到剪贴板

ctx.getImageData（X，Y，W，H） / /获取的ImageData
ctx.putImageData（X，Y，W，H） / /将的ImageData绘在画布上

写了个简单的处理图像的类，可以翻转/灰化/去色/高亮/设单色值

JavaScript代码复制内容到剪贴板

/ **
* @作者诺里斯堂
* /
变种 PS = 功能（配置）{
/ / $扩展（这一点，配置）;
返回此 ;
}
PS.prototype = {
/ /将图像灰化
灰色：功能（CTX，为imageData）{
无功 W = imageData.width，
H = imageData.height，
RET = ctx.createImageData（W，H）;
对（我= 0;我
{
为（J = 0;Ĵ
{
无功指数=（I *高+ J）* 4;
无功红= imageData.data [指数];
变种绿色= imageData.data [索引1];
无功蓝色= imageData.data [索引2];
无功字母= imageData.data [指数3];
变种平均=（红+绿+蓝）/ 3;
ret.data [索引] =平均值;
ret.data [索引1] =平均值;
ret.data [索引2] =平均值;
ret.data [指数3] =阿尔法;
}
}
返回 RET;
}，
/ /生成的ImageData
了createImageData：函数（CTX，ORI，从，W，H）{
无功 RET = ctx.createImageData（W，H）;
无功总= W * H * 4;
从=从*宽* 4;
为（变种 I = 0我“总，我+ +）{
ret.data由[i] = ori.data [从+ I];
}
返回 RET;
}，
/ /生成的ImageData
/ /对称图像反转
createImageDataTurn：函数（CTX，ORI，从，W，H）{
无功 RET = ctx.createImageData（W，H）;
无功总= W * H * 4;
从=从*宽* 4;
为（变种 J = 0;Ĵ
为（变种 I = 0;我
变种 A =（十* W + I）* 4，
B =从+ A，
C =（十* W + W-1）* 4;
ret.data [C + +] = ori.data [B + +];
ret.data [C + +] = ori.data [B + +];
ret.data [C + +] = ori.data [B + +];
ret.data [C + +] = ori.data [B + +];
}
}
返回 RET;
}，
/ /将整个图片设置为某一颜色值
setColorR：函数（CTX，为imageData中，n）{
无功 W = imageData.width，
H = imageData.height，
RET = ctx.createImageData（W，H）;
无功总= W * H * 4;
为（变种 I = 0;我
ret.data由[i] = N; / /为imageData [I];
ret.data [I +1] = imageData.data由[i +1];
ret.data [I 2] = imageData.data [I + 2];
ret.data [I +3] = imageData.data [I + 3];
}
返回 RET;
}，
/ /将整个图片设置为某一颜色值
setColorG：函数（CTX，为imageData中，n）{
无功 W = imageData.width，
H = imageData.height，
RET = ctx.createImageData（W，H）;
无功总= W * H * 4;
为（变种 I = 0;我
无功红= imageData.data [I]，
绿色= imageData.data [I +1]，
蓝色= imageData.data由[i +1];
变种 A =（红+绿+蓝）/ 3;
ret.data由[i] = A;
ret.data由[i +1] = A + N;
ret.data [I 2] =一;
ret.data [I +3] = imageData.data [I + 3];
}
返回 RET;
}，
/ /将整个图片设置为某一颜色值
setColorB：函数（CTX，为imageData中，n）{
无功 W = imageData.width，
H = imageData.height，
RET = ctx.createImageData（W，H）;
无功总= W * H * 4;
为（变种 I = 0;我
ret.data由[i] = imageData.data由[i];
ret.data [I +1] = imageData.data由[i +1];
ret.data [I 2] = N;
ret.data [I +3] = imageData.data [I + 3];
}
返回 RET;
}，
/ /高亮整个图片
突出：函数（CTX，为imageData，N）{
无功 W = imageData.width，
H = imageData.height，
RET = ctx.createImageData（W，H）;
无功总= W * H * 4;
为（变种 I = 0;我
ret.data由[i] = imageData.data由[i] + N;
ret.data由[i +1] = imageData.data由[i +1] + N;
ret.data由[i +1] = imageData.data [I + 2] + N;
ret.data [I +3] = imageData.data [I + 3];
}
返回 RET;
}，
/ /去色紫色247，0，255
removeColor：函数（CTX，为imageData，R，G，B）{
无功 W = imageData.width，
H = imageData.height，
RET = ctx.createImageData（W，H）;
无功总= W * H * 4;
为（变种 I = 0;我
无功红= imageData.data [I]，
绿色= imageData.data [I +1]，
蓝色= imageData.data由[i +1];
/ /相等则全透明
如果相关（r == &&红色绿色==克&&蓝色==二）{
ret.data由[i +3] = 0;
} 否则 {
ret.data由[i] =红色;
ret.data由[i +1] =绿色;
ret.data由[i +1] =蓝色;
ret.data [I +3] = imageData.data [I + 3];
}
}
返回 RET;
}
};
PS = 新的PS（）;

通过一系列操作，渲染好图像后，就需要借助如下的代码将画布中的图像保存成图片

JavaScript代码复制内容到剪贴板

/ /将图像输出为base64的压缩的字符串默认为图像/ PNG
无功数据= canvas.toDataURL（）;
/ /删除字符串前的提示信息“的数据：图像/ PNG;的base64”
变种 B64 = data.substring（22）;
/ / POST到服务器上，生成图片
$后（“save.aspx”，{数据：B64，名：文件名}，函数（）{
/ / OK
}）;

save.aspx中的代码如下：

JavaScript代码复制内容到剪贴板

保护无效的Page_Load（对象发件人，EventArgs的发送）
{
如果（请求[ “名称” ]！= 空）
{
字符串名称=请求[ “名称” ];
串SAVEPATH =使用Server.Mappath（“～/影像/输出/”）;
尝试
{
的FileStream FS = File.Create（SAVEPATH +“/”+名称）;
字节 []字节= Convert.FromBase64String（请求[ “数据” ]）;
fs.Write（字节数，0，bytes.Length）;
fs.Close（）;
}
赶上（例外情况除外）
{
}
}
}

PS：由于沙箱的限制，想在浏览器端通过JS直接存为本地图片，似乎是不大可能，现在网上较为折中的方式为

window.location.href =“图像/八位字节流”+数据

但这种方式不能指定保存的文件名，在FF下默认是xxxxx.part

云存储

收藏0

利用HTML5中Canvas处理并存储图片

最新评论

浏览过的版块

轻源码让程序更轻更快