cannvas的imagedata对象

背景介绍

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对象渲染到画布

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

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, quality),创建一个Blob对像,用以展示canvas上的图片,3个参数
callback:回调函数返回一个blob对象
type:图片格式,默认为'image/png'
quality: 0到1的品质选择(图片格式为 image/jpeg 或 image/webp的情况下)

推荐阅读更多精彩内容

  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 2,208评论 1 3
  • 线条样式 绘制直线,第五章知识简单回顾 lineWidth 设置或返回当前的线条宽度,单位为像素 lineCap ...
    Zd_silent阅读 98评论 0 0
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 1,968评论 4 28
  •   HTML5 添加的最受欢迎的功能就是 元素。这个元素负责在页面中设定一个区域,然后就可以通过 JavaScri...
    霜天晓阅读 1,656评论 0 1
  • 一、图形的组合方式 globalAlpha是一个介于0和1之间的值(包括0和1),用于指定所有绘制的透明度。默认值...
    空谷悠阅读 327评论 0 0