一步步教你利用Canvas对图片进行处理


Posted in Javascript onSeptember 19, 2017

前言

Canvas,中文译为“画布”,HTML5中新增了<canvas>元素,可以结合JavaScript动态地在画布中绘制图形。

今天,我们不讲Canvas的图形绘制,而是讲如何对图片进行处理,话不多说了,来一起看看详细的介绍吧。

大概流程非常简单,主要分为以下三个步骤:

一步步教你利用Canvas对图片进行处理
Canvas图片处理

是的,就像把大象装进冰箱一样简单,哈哈。

一、主要API

整个流程中所用到的主要Canvas API有:

  • 绘制图像: drawImage()
  • 获取图像数据: getImageData()
  • 重写图像数据: putImageData()
  • 导出图像: toDataURL()

1. drawImage()

顾名思义,该方法就是用于将图像绘制与Canvas画布当中,具体用法有三种:

      ① 在画布上定位图像:context.drawImage(img,x,y)

      ② 在画布上定位图像,并规定图像的宽度和高度:context.drawImage(img,x,y,width,height)

      ③ 剪切图像,并在画布上定位被剪切的部分:context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

以上参数值描述如下表:

参数 描述
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度。(伸展或缩小图像)
height 可选。要使用的图像的高度。(伸展或缩小图像)

2. getImageData()

该方法用于从Canvas画布中获取图像数据,具体用法如下:

获取画布指定矩形范围内的像素数据:var ImageData = context.getImageData(x,y,width,height)

以上参数值描述如下表:

参数 描述
x 开始复制的左上角位置的 x 坐标。
y 开始复制的左上角位置的 y 坐标。
width 将要复制的矩形区域的宽度。
height 将要复制的矩形区域的高度。

该方法会返回一个ImageData对象,该对象有三个属性分别为:width、height和data,而我们最主要用到的就是这个data数组,因为它保存着图像中每一个像素的数据。有了这些数据之后我们便可以对它们进行处理,最后再将其重写至Canvas画布中,这样就实现了对图片的处理转换。对于该data数组具体用法,我们可以在后面的实例中看到。

3. putImageData()

该方法很简单,就是用于将图像数据重写至Canvas画布中,具体用法如下:

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

以上参数值描述如下表:

参数 描述
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标,以像素计。
y ImageData 对象左上角的 y 坐标,以像素计。
dirtyX 可选。水平值(x),以像素计,在画布上放置图像的位置。
dirtyY 可选。水平值(y),以像素计,在画布上放置图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。

4. toDataURL()

这个方法与以上三种方法不同,它是Canvas对象的方法,该方法返回的是一个包含data URI的字符串,该字符串可直接作为图片路径地址填入<img>标签的src属性当中,具体用法如下:

var dataURL = canvas.toDataURL(type, encoderOptions);

以上参数值描述如下表:

参数 描述
type 可选。图片格式,默认为 image/png。
encoderOptions 可选。在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

二、图片处理实例

本实例将通过代码简单介绍如何把彩色图片处理成黑白图片。

<!--HTML-->
<canvas id="canvas" width="600" height="600"></canvas>
<input id="handle" type="button" value="处理图片" />
<input id="create" type="button" value="生成图片" />
<div id="result"></div>
//JavaScript
window.onload = function(){
  var canvas = document.getElementById("canvas"),  //获取Canvas画布对象
    context = canvas.getContext('2d'); //获取2D上下文对象,大多数Canvas API均为此对象方法
  var image = new Image(); //定义一个图片对象
  image.src = 'imgs/img.jpg'; 
  image.onload = function(){ //此处必须注意!后面所有操作均需在图片加载成功后执行,否则图片将处理无效
    context.drawImage(image,0,0); //将图片从Canvas画布的左上角(0,0)位置开始绘制,大小默认为图片实际大小
    var handle = document.getElementById("handle");
    var create = document.getElementById("create");
    handle.onclick = function(){ // 单击“处理图片”按钮,处理图片
      var imgData = context.getImageData(0,0,canvas.width,canvas.height);  //获取图片数据对象
      var data = imgData.data; //获取图片数据数组,该数组中每个像素用4个元素来保存,分别表示红、绿、蓝和透明度值
      var average = 0;
      for (var i = 0; i < data.length; i+=4) {
        average = Math.floor((data[i]+data[i+1]+data[i+2])/3); //将红、绿、蓝色值求平均值后得到灰度值
        data[i] = data[i+1] = data[i+2] = average; 将每个像素点的色值重写
      }
      imgData.data = data;
      context.putImageData(imgData,0,0); //将处理后的图像数据重写至Canvas画布,此时画布中图像变为黑白色
    };
    create.onclick = function(){ // 单击“生成图片”按钮,导出图片
      var imgSrc = canvas.toDataURL(); //获取图片的DataURL
      var newImg = new Image();
      var result = document.getElementById("result");
      newImg.src = imgSrc; //将图片路径赋值给src
      result.innerHTML = '';
      result.appendChild(newImg);
    };
  };
};

可能上面代码写得不是很好,看起来也不是那么好理解,最好自己能够亲自写一写,这样对于自己理解会更加深刻一些。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
关于js获取radio和select的属性并控制的代码
May 12 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
原生js实现旋转木马轮播图效果
Feb 27 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 #Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 #Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 #Javascript
vue 粒子特效的示例代码
Sep 19 #Javascript
jQuery实现简单日期格式化功能示例
Sep 19 #jQuery
慕课网题目之js实现抽奖系统功能
Sep 19 #Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 #jQuery
You might like
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
一个js过滤空格的小函数
2014/10/10 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
python实现拉普拉斯特征图降维示例
2019/11/25 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
python中entry用法讲解
2020/12/04 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
Python中如何定义一个函数
2016/09/06 面试题
公司财务自我评价分享
2013/12/17 职场文书
教学大赛获奖感言
2014/01/15 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
求职信模板
2014/05/23 职场文书
环保志愿者活动方案
2014/08/14 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Python机器学习之PCA降维算法详解
2021/05/19 Python
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js