一步步教你利用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 相关文章推荐
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
javascript中var的重要性分析
Feb 11 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
javascript 代码是如何被压缩的示例代码
May 06 Javascript
解决Vue大括号字符换行踩的坑
Nov 09 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的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
js编写选项卡效果
2017/05/23 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
python中selenium库的基本使用详解
2020/07/31 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
EJB3.1都有哪些改进
2012/11/17 面试题
幼儿园儿童节主持词
2014/03/21 职场文书
团拜会策划方案
2014/06/07 职场文书
政风行风整改方案
2014/10/25 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android