canvas的神奇用法

canvas有一个神奇的方法getImageData这个玩意。它可以获取canvas内图像的没一个像素点的颜色值获取，而且可以改变。

如果你有各种滤镜的算法。那么用canvas就可以实现图片的滤镜转化，可以做成类似美图秀秀那样的功能。

使用方法：

1：先将图片导入画布。

2：var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);  //用这个将图片每个像素点的信息获取出来，得到一个数组。注意得到的信息不是[[r,g,b,a],[r,g,b,a]]这样的二维数组而是[r,g,b,a,r,g,b,a]这样的按rgba顺序排列的单个的数组。

3：这一步就是开始将每个像素的rgba改变。这里简单介绍一下灰度效果的算法及实现步骤。

function gray(canvasData)
{
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
 // add black border
 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;
 }
 }
}
return canvasData;
}

4：context.putImageData(canvasData, 0, 0); //处理完像素颜色值之后，记得要这一句将画布重绘

这些个代码就是将图片转化为黑白效果的代码，具体可以实现多少效果就得看你掌握的滤镜算法有多少了。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 使用canvas进行图像编辑的实例

    使用canvas进行图像编辑的实例

    前面的话 本文将分为几个小功能的形式来详细介绍canvas图像编辑 缩放 下面是一张分析图,假设默认情况下,图片和canvas宽高相同.图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大小和图片的坐标位置 W(宽) = canvas.width * scale H(高) = canvas.height * scale x坐标 = (W - canvas.width)/2; y坐标 = (H - canvas.height)/2; 因此,代码如下 <canvas id="dra

  • js生成缩略图后上传并利用canvas重绘

    一般在处理图片上传时,通常的逻辑都是将源图片上传到服务器端,再由服务器端的语言进行缩放大小的操作. 此种模式一般可以满足大部分的需求,但当我们所需要的图片仅仅是一个符合规定大小的源图片的缩略图,再使用此种模式,将是一种浪费服务端资源以及带宽的方式,故我们考虑在浏览器端生成小图后再进行上传操作. //以下为源代码 复制代码 代码如下: function drawCanvasImage(obj,width, callback){ var $canvas = $('<canvas></canv

  • 使用JavaScript+canvas实现图片裁剪

    canvas是一个可以让我们使用脚本绘图的标签,它提供了一系列完整的属性和方法.我们可以借此来实现图形绘制,图像处理甚至实现简单的动画和游戏制作. canvas标签只有两个属性:width和height,用来设定画布的宽和高,如果没有通过标签属性或者脚本来设置,默认为300*150; 好了,canvas的介绍就先到这里,下面我们来看看javascript结合canvas实现图片的裁剪代码: 复制代码 代码如下: var selectObj = null; function ImageCrop(c

  • canvas的神奇用法

    canvas有一个神奇的方法getImageData这个玩意.它可以获取canvas内图像的没一个像素点的颜色值获取,而且可以改变. 如果你有各种滤镜的算法.那么用canvas就可以实现图片的滤镜转化,可以做成类似美图秀秀那样的功能. 使用方法: 1:先将图片导入画布. 2:var canvasData = context.getImageData(0, 0, canvas.width, canvas.height);  //用这个将图片每个像素点的信息获取出来,得到一个数组.注意得到的信息不是

  • 详解C++语言中std::array的神奇用法

    概述 std::array是在C++11标准中增加的STL容器,它的设计目的是提供与原生数组类似的功能与性能.也正因此,使得std::array有很多与其他容器不同的特殊之处,比如:std::array的元素是直接存放在实例内部,而不是在堆上分配空间:std::array的大小必须在编译期确定:std::array的构造函数.析构函数和赋值操作符都是编译器隐式声明的--这让很多用惯了std::vector这类容器的程序员不习惯,觉得std::array不好用.但实际上,std::array的威力

  • 利用Android画圆弧canvas.drawArc()实例详解

    利用Android画圆弧canvas.drawArc()实例详解

    前言 在学习android中图形图像处理技术这部分内容时,对绘制圆弧函数canvas.drawArc()的用法.参数含义及画图原理很是不理解,在网上搜索了一些,加上自己的理解,在此做个小总结,下面来一起看看吧. 示例代码 public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint) { drawArc(oval.left,

  • Linux中“!”你不知道的惊叹用法总结

    前言 实际上,不起眼的"!"在linux中有着很多让你惊叹的妙用.本文就来细数那些"!"的神奇用法.下面话不多说了,来一起看看详细的介绍吧 执行上一条命令 例如,在执行完上面一条命令后,可以使用下面的方式再次执行上一条命令: $ whereis bash #执行命令 bash: /bin/bash /etc/bash.bashrc /usr/share/man/man1/bash.1.gz $ !! #再次执行上一条命令 whereis bash bash: /bi

  • Android自定义View基础开发之图片加载进度条

    Android自定义View基础开发之图片加载进度条

    学会了Paint,Canvas的基本用法之后,我们就可以动手开始实践了,先写个简单的图片加载进度条看看. 按照惯例,先看效果图,再决定要不要往下看: 既然看到这里了,应该是想了解这个图片加载进度条了,我们先看具体用法,再看自定义View的实现: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.co

  • Python中的列表生成式与生成器学习教程

    列表生成式 即创建列表的方式,最笨的方法就是写循环逐个生成,前面也介绍过可以使用range()函数来生成,不过只能生成线性列表,下面看看更为高级的生成方式: >>> [x * x for x in range(1, 11)] [1, 4, 9, 16, 25, 36, 49, 64, 81, 100] 写列表生成式时,把要生成的元素x * x放到前面,后面跟for循环,就可以把list创建出来,十分有用,多写几次,很快就可以熟悉这种语法. 你甚至可以在后面加上if判断: >>

  • Python分支语句与循环语句应用实例分析

    本文实例讲述了Python分支语句与循环语句应用.分享给大家供大家参考,具体如下: 一.分支语句 1.if else语句 语法: if 条件判断: 执行的语句块1 else : 执行语句块2 当满足条件的时候则执行语句块1 ,不满足条件就执行语句块2 注意:1.条件判断后面要加冒号":": 2.执行语句块需要缩进[4个空格]. else 与 if对齐,else后面要加":",语句块缩进4个空格 ''' 从控制台输入年龄,如果年龄小于18岁,打印"未成年人禁

  • Android编程之绘图canvas基本用法示例

    本文实例讲述了Android编程之绘图canvas基本用法.分享给大家供大家参考,具体如下: MainActivity的代码如下: package example.com.myapplication; import android.os.Bundle; import android.app.Activity; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedIns

  • AngularJS打开页面隐藏显示表达式用法示例

    本文实例讲述了AngularJS打开页面隐藏显示表达式用法.分享给大家供大家参考,具体如下: 1.使用 ng-cloak, 同时要在css加入一行 [ng-cloak] {display: none;} 样式 [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 2.使用ng-bind, 代替{{}} 这个不太方便,因为使用ng-bin

  • Android开发使用自定义View将圆角矩形绘制在Canvas上的方法

    本文实例讲述了Android开发使用自定义View将圆角矩形绘制在Canvas上的方法.分享给大家供大家参考,具体如下: 前几天,公司一个项目中,头像图片需要添加圆角,这样UI效果会更好看,于是写了一个小的demo进行圆角的定义,该处主要是使用BitmapShader进行了渲染(如果要将一张图片裁剪成椭圆或圆形显示在屏幕上,也可以使用BitmapShader来完成). BitmapShader类完成渲染图片的基本步骤如下: 1.创建BitmapShader类的对象 /** * Call this

随机推荐