一步步教你利用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 刷新页面的代码小结 推荐
Apr 02 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
Aug 03 Javascript
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作的文本留言本的例子(六)
2006/10/09 PHP
php基础知识:类与对象(3) 构造函数和析构函数
2006/12/13 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
python时间整形转标准格式的示例分享
2014/02/14 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python中super函数用法实例分析
2019/03/18 Python
python自定义时钟类、定时任务类
2021/02/22 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python装饰器代码深入讲解
2021/03/01 Python
货代行业个人求职简历的自我评价
2013/10/22 职场文书
自考毕业生自我鉴定
2013/11/04 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
成品库仓管员岗位职责
2014/04/06 职场文书
《将心比心》教学反思
2014/04/08 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
校园运动会广播稿
2014/10/06 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
Go 语言结构实例分析
2021/07/04 Golang
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python