一步步教你利用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 相关文章推荐
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
Dec 17 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
May 02 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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
使用php4加速网络传输
2006/10/09 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP四舍五入、取整、round函数使用示例
2015/02/06 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
jQuery UI设置固定日期选择特效代码分享
2015/08/27 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
Python常用小技巧总结
2015/06/01 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
文秘专业大学生求职信
2013/11/10 职场文书
促销活动策划方案
2014/01/12 职场文书
单位领导证婚词
2014/01/14 职场文书
科研先进个人典型材料
2014/01/31 职场文书
阿德的梦教学反思
2014/02/06 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
班主任新年寄语
2014/04/04 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
庆祝教师节标语
2014/10/09 职场文书
会计工作检讨书
2015/02/19 职场文书
节约用电通知
2015/04/25 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书