前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法。
前面介绍的特效中灰度效果最简单,就从这里开始介绍吧。
1.获取图像数据
- img.src = ’http://bloglaotou.duapp.com/wp-content/themes/frontopen2/tools/filter/image2.jpg’;
- canvas.width = img.width;
- canvas.height = img.height;
- var context = canvas.getContext(“2d”);
- context.drawImage(img, 0, 0);
- var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);
2.通过灰度算法处理图像数据
- // 1.灰度效果
- //计算公式 .299 * r + .587 * g + .114 * b;
- // calculate gray scale value
- for ( var x = 0; x < canvasData.width; x++) {
- for ( var y = 0; y < canvasData.height; y++) {
- // Index of the pixel in the array
- var idx = (x + y * canvasData.width) * 4;
- var r = canvasData.data[idx + 0];
- var g = canvasData.data[idx + 1];
- var b = canvasData.data[idx + 2];
- var gray = .299 * r + .587 * g + .114 * b;
- // assign gray scale value
- canvasData.data[idx + 0] = gray; // Red channel
- canvasData.data[idx + 1] = gray; // Green channel
- canvasData.data[idx + 2] = gray; // Blue channel
- canvasData.data[idx + 3] = 255; // Alpha channel
- // 加上黑色的边框
- if(x < 8 || y < 8 || x > (canvasData.width - 8) || y > (canvasData.height - 8))
- {
- canvasData.data[idx + 0] = 0;
- canvasData.data[idx + 1] = 0;
- canvasData.data[idx + 2] = 0;
- }
- }
- }
3.把新的图像数据写入canvas
- context.putImageData(canvasData, 0, 0);
4.效果预览
点这里看预览
相关推荐
3.12_Canvas来实现更复杂的滤镜效果(灰度___黑白___反色___模糊___马赛克滤镜算法)|使用Canvas进行像素
HTML5 canvas实现的图片三角形灰度滤镜效果源码.zip
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯 JavaScript可调用的API文件。
css3实现图片模糊,canvas实现交互设计,简单,简单,简单,简单,简单,简单单
好了,canvas的介绍就先到这里,下面我们来看看javascript结合canvas实现图片的裁剪代码: 代码如下: var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) { var c
使用canvas利用像素操作实现图片马赛克效果
是一个模拟摄像机拍摄电视屏幕画面时出现点状颗粒的效果,有兴趣研究的朋友可以尝试更多的效果,代码没有经过优化,只是一个粗糙的Demo,喜欢的朋友可以研究下
原生JavaScript+canvas实现图片裁剪功能,介绍css属性clip
2、将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,如:”image/webp”,”image/jpeg”,”image/png”。 3、最后将canvas转换为图片,显示在网页中。点击右键保存,就得到了不同格式的图片了。 ...
使用canvas实现的 导入图片,图片扩大,图片缩小,选中图片,支持图片的事件,可以移动图片
实现涂鸦基本功能、更改笔触大小颜色、更改背景图、橡皮檫、历史记录、清屏和保存功能
使用canvas实现粒子流动效果示例的源代码,含有非常详细的代码注释。
我们使用HTML5的canvas标签可对图片进行旋转操作,对于ie8版本以下不支持HTML5的浏览器,可使用IE特有的滤镜效果来实现... 更详细canvas图片左右旋转效果教程,http://www.sucaihuo.com/js/27.html。你也可以在素材...
使用js+canvas绘图,结合svg图形,实现标尺栏和网格效果。
本文实例为大家分享了canvas实现画图、滤镜效果的具体代码,供大家参考,具体内容如下 1、用canvas来实现画图的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...
最新canvas实现曲线进度条效果 最新canvas实现曲线进度条效果
html5 canvas画布实现液体波浪动画效果 html5 canvas画布实现液体波浪动画效果
JavaScript canvas实现镜像图片效果 本文实例为大家分享了JavaScript canvas实现镜像图片效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...
Js之canvas获取图片主色调,近似色,互补色,以及根据图片颜色获取主题配色方案详解、插件。