canvas 的 imagedata 对象

1.4k6WEBcanvas2019-02-212024-12-07

背景介绍

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() 的跨域问题

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() 放回画布

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进行缩放
一个小例子将图片放在鼠标指定位置

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的情况下）