教你使用Canvas处理图片的方法


Posted in HTML / CSS onNovember 28, 2017

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

今天,我们不讲Canvas的图形绘制,而是讲如何对图片进行处理。

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

教你使用Canvas处理图片的方法

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

一、主要API

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

  1. 绘制图像: drawImage()
  2. 获取图像数据: getImageData()
  3. 重写图像数据: putImageData()
  4. 导出图像: 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);
        };
    };
};

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3的Border-radius轻松制作圆角
Dec 24 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 #HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 #HTML / CSS
HTML5响应式(自适应)网页设计的实现
Nov 17 #HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 #HTML / CSS
html5实现移动端适配完美写法
Nov 16 #HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 #HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 #HTML / CSS
You might like
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
js实现图片局部放大效果详解
2019/03/18 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
jQuery中DOM操作原则实例分析
2019/08/01 jQuery
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
2020/08/20 Javascript
Python解析xml中dom元素的方法
2015/03/12 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
详解python中的Turtle函数库
2018/11/19 Python
Python文件常见操作实例分析【读写、遍历】
2018/12/10 Python
Python3中lambda表达式与函数式编程讲解
2019/01/14 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python生成特定分布数的实例
2019/12/05 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
办公室文秘自我评价
2013/09/21 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
马智宇结婚主持词
2014/04/01 职场文书
法人委托书范本
2014/04/04 职场文书
施工安全责任书范本
2014/07/24 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python