cannvas的imagedata对象
1.4k5WEBcanvas2019-02-212019-08-04

背景介绍

ImageData 是canvas的图像数据,由 ImageData() 构造函数返回一个实例化的对象, 三个可读属性

  • data:一个 Uint8ClampedArray 类型的一维数组,包含RGBA 顺序的数据,每4个元素表示一个RGBA 值即对应一个像素, 左上角在数组的索引0位置,像素从左到右被处理,然后往下,遍历整个数组
    RGBA: R - 红色(0-255)、G - 绿色(0-255)、B - 蓝色(0-255)、A - alpha 通道(0-255; 0 是透明的,255 是完全可见的)
    Uint8ClampedArray(8位无符号整型固定数组): 类型化数组表示一个由值固定在0-255区间的8位无符号整型组成的数组;如果你指定一个在 [0,255] 区间外的值,它将被替换为0或255;如果你指定一个非整数,那么它将被设置为最接近它的整数。(数组)内容被初始化为0。

  • width:以像素为单位的图像的宽

  • height:以像素为单位的图像的高

三个参数的关系是:data.length = height * width * 4
不满足这个关系的时候就会报错:” The input data length is not a multiple of (4 * width).” ,不要问我为什么知道

构建一个ImageData 对象

使用canvas API

createImageData(): 传入宽和高获得一个ImageData对象或者传入一个已经存在的ImageData对象渲染到画布

1
2
3
var canvas = document.getElementById("canvas")
var ctx = canvas.getContext("2d")
console.log(ctx.createImageData(200, 200))

getImageData(): 提取一个矩形区域的图像数据,返回一个ImageData对象
ctx.getImageData(矩形区域的左上角 x 坐标, 矩形区域的左上角 y 坐标, 矩形区域的宽度, 矩形区域的高度)
下面是一个简单的小例子让div背景色随着鼠标指针下的图片颜色变化而变化,思路是使用 getImageData() 获取鼠标下1像素的区域,也就是一个RGBA值赋值给div
运行时注意canvas图片使用 getImageData() 的跨域问题

1
2
3
4
5
6
7
8
9
10
11
12
13
let img = new Image()
img.src = './static/img/1547436818106.png'
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
img.onload = () => {
ctx.drawImage(img, 0, 0)
img.style.display = 'none'
}
let color = document.getElementById('color')
canvas.addEventListener('mousemove', (e) =>{
let pixel = ctx.getImageData(e.layerx, e.layery, 1, 1)
color.style.background = 'rgba(' + pixel.data[0] + ',' + pixel.data[1] + ',' + pixel.data[2] + ',' + (pixel.data[3] / 255) + ')'
})

直接使用ImageData()构造函数创建, data可为空

当data为空时会自动按照width和height的大小,以0填充整个像素矩阵,也就是一个空白画布
若需要传入data图像数据,要注意 width * height * 4 = data.length

1
2
let imagedata = new ImageData(data, width, height)
// ImageData { width: width, height: height, data: Uint8ClampedArray[width * height * 4] }

操作像素

putImageData(): 对画布进行像素数据的写入,也就是将指定的 ImageData 对象放到画布上,7个参数,前3个为必填
ctx.putImageData(imagedata, 图像数据在目标画布中的位置X坐标, Y坐标, 在图像数据中截取一个矩形区域左上角的位置X坐标, Y坐标, 矩形区域Width, Height);
一个小例子图片灰度处理,思路是使用 getImageData() 获取当前 ImageData 数据,然后遍历 data 数组改变 RGBA 的值,最后在使用 putImageData() 放回画布

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let img = new Image()
img.src = './static/img/shareedu.png'
let canvas = document.getElementById('canvas')
let ctx = canvas.getContext('2d')
img.onload = () => {
ctx.drawImage(img, 0, 0)
img.style.display = 'none'
}
document.getElementById('btn').addEventListener('click', ()=>{
let pre = ctx.getImageData(0,0,canvas.width, canvas.height)
let data = pre.data
for (var i = 0; i < data.length; i += 4) {
let avg = (data[i] + data[i +1] + data[i +2]) / 3
data[i] = avg
data[i + 1] = avg
data[i + 2] = avg
}
ctx.putImageData(pre, 0, 0)
})

drawImage(): 在画布上绘制图像,9个参数,image, dx, dy为必填
image: 图像源
sx: 选择需要的图像源区域,矩形选择框的左上角 X 轴坐标。
sy: 矩形选择框的Y 轴坐标。
sWidth: 需要绘制到目标上下文中的,image的矩形(裁剪)选择框的宽度。如果不说明,整个矩形(裁剪)从坐标的sx和sy开始,到image的右下角结束。
sHeight: 需要绘制到目标上下文中的,image的矩形(裁剪)选择框的高度。
dx: image的左上角在目标canvas上 X 轴坐标。
dy: image的左上角在目标canvas上 Y 轴坐标。
dWidth: image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放
dHeight: image在目标canvas上绘制的高度。 允许对绘制的image进行缩放
一个小例子将图片放在鼠标指定位置

1
2
3
4
5
6
7
8
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d")
let img = new Image()
img.src = './static/img/shareedu.png'
document.getElementById('canvas').addEventListener('mousedown', (e)=>{
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
ctx.drawImage(img, e.offsetX, e.offsetY, 200, 200)
})

imageSmoothingEnabled, 这是个属性设置图片是否平滑,只需要将他赋值为true(平滑)或者false(不平滑)

canvas.toDataURL(‘image/png’, quality) 返回一个包含图片展示的 data URI , 2个参数, 图片格式默认为png, 0到1的品质选择(图片格式为 image/jpeg 或 image/webp的情况下)

canvas.toBlob(callback, type, encoderOptions),创建一个Blob对像,用以展示canvas上的图片,3个参数
callback:回调函数返回一个blob对象
type:图片格式,默认为’image/png’
encoderOptions: 0到1的品质选择(图片格式为 image/jpeg 或 image/webp的情况下)

一些canvas的小例子

自己学习过程中用canvas写的一些小东西,源码带有注解给大家参考,会坚持不断更新这个目录….

环形百分比动画
示例图片
粒子动画
示例图片
电子画板
示例图片
图片裁剪
示例图片

本站和canvas有关的文章

canvas动画篇