Canvas基本图片操作与处理

RhodesRoxanne 发布于16天前
0 条问题

前言

Canvas是H5中新增的技术,主要运用在图片的处理和动画的绘制上,随着Canvas的使用场景越来越多,了解Canvas对平时开发大有裨益,这篇文章将介绍Canvas基本图片操作与处理

图片上传与绘制

将图片上传并绘制到Canva中是最常见的Canvas的图片处理,这个上传与绘制的过程是怎么实现的呢?下面举个例子:

<canvas id="myCanvas"></canvas>
<input type="file" id="file">
let upload = document.getElementById('file')
upload.onchange = (event) => {
  let file = event.target.files[0]
  let fileReader = new FileReader()
  fileReader.onload = (e) => {
    let img = new Image()
    img.src = e.target.result
    img.onload = () => {
      let canvas = document.getElementById('myCanvas')
      canvas.width = img.width
      canvas.height = img.height
      let context = canvas.getContext('2d')
      context.drawImage(img, 0, 0)
    }
  }
  fileReader.readAsDataURL(file)
}

这个上传与绘制的过程可以总结为两步:

  • 通过FileReader对象将input上传的file对象转化为base64格式的图片
  • 创建Image对象,将对象绘制在canvas上

这里为什么要将base64格式的地址复制给Image对象,然后再将Image对象绘制到Canvas上而不是直接绘制呢?

这是因为Canvas上绘制时并不支持url作为图片源,Canvas只支持下面几种图片源:

  • Image()函数构造的或者任何<img>元素
  • <video>元素作为图片源,可以抓取当前帧作为图像
  • 另一个<canvas>元素作为源
  • 高性能位图作为图片源

Canvas在绘图时还有一个需要注意的点就是:Canvas在绘制不同域名下的图片会出现跨域的错误,如图:

Canvas基本图片操作与处理

被污染的Canvas,其实就是因为图片跨域的问题的,这时需要两步走:

  • 图片服务器响应头添加Access-Control-Allow-Origin为*或者指定域名
  • 设置Image的crossOrigin属性img.setAttribute("crossOrigin",'Anonymous')

简单示例代码:

let img = new Image()
img.setAttribute("crossOrigin",'Anonymous')
img.src = './images/avatar.jpeg'
img.onload = () => {
  let canvas = document.getElementById('myCanvas')
  canvas.width = img.width
  canvas.height = img.height
  let context = canvas.getContext('2d')
  context.drawImage(img, 0, 0)
  console.log(canvas.toDataURL('image/png', 1.0))
}

更多跨域相关内容可以看 这里

图片变换

图片缩放

Canvas中图片缩放的实际上是通过画布的缩放来达到的,因此默认的缩放中心是在画布原点(0, 0),但是一般情况下我们做缩放时都希望图片中心是缩放中心,这里有两种办法能达到图片中心作为缩放中心的缩放效果,接下来分别来看这两种办法的示例:

第一种:

let canvas = document.getElementById('myCanvas')
canvas.width = img.width
canvas.height = img.height
let context = canvas.getContext('2d')
context.translate(img.width / 2, img.height / 2)
context.scale(0.5, 0.5)
context.translate(-img.width / 2, -img.height / 2)
context.drawImage(img, 0, 0, img.width, img.height)

第一种方法就是画布平移,先将画布原点移到图像中心,然后再做画布缩放,再将画布平移还原,最后绘制图片,此时绘制的图片就是以图片中心做的缩放

第二种:

let canvas = document.getElementById('myCanvas')
canvas.width = img.width
canvas.height = img.height
let context = canvas.getContext('2d')
let paintWidth = img.width / 2
let paintHight = img.height / 2
let originX = 0 // 原图片X坐标
let originY = 0 // 原图片Y坐标
let paintX = originX + (img.width - paintWidth) / 2 // 缩放后的图片X坐标
let paintY = originY + (img.height - paintHight) / 2 // 缩放后的图片Y坐标
context.drawImage(img, paintX, paintY, paintWidth, paintHight)

第二种就是最直接的计算当图片以左上角作为缩放中心,缩放后的图片位置产生的位置偏移,将位置偏移加上在进行图片绘制

图片旋转

Canvas的图片旋转和图片缩放一样,默认的旋转中心也是画布的原点(0, 0),此时也需要平移画布来实现图片的中心旋转,举个例子

let img = new Image()
img.setAttribute("crossOrigin",'Anonymous')
img.src = './images/avatar.jpeg'
img.onload = () => {
let canvas = document.getElementById('myCanvas')
  canvas.width = img.width
  canvas.height = img.height
  let context = canvas.getContext('2d')
  context.translate(img.width / 2, img.height / 2)
  context.rotate(30 * Math.PI / 180)
  context.translate(-img.width / 2, -img.height / 2)
  context.drawImage(img, 0, 0, img.width, img.height)
}

镜像变换

镜像变换可以以图片垂直中线为对称轴,左右镜像的变换叫水平镜像,或者水平中线为对称轴,上下镜像的变换叫垂直镜像,一般水平镜像用的比较多,这里就来看一个水平镜像的例子:

let img = new Image()
img.setAttribute("crossOrigin",'Anonymous')
img.src = './images/avatar.jpeg'
img.onload = () => {
  let canvas = document.getElementById('myCanvas')
  canvas.width = img.width
  canvas.height = img.height
  let context = canvas.getContext('2d')
  context.translate(img.width / 2, img.height / 2)
  context.scale(-1 , 1)
  context.translate(-img.width / 2, -img.height / 2)
  context.drawImage(img, 0, 0, img.width, img.height)
}

原图:

Canvas基本图片操作与处理

水平镜像:

Canvas基本图片操作与处理

镜像操作的原理其实很简单:就是将scale设置为负值,当x轴的缩放为负值时,就是水平镜像,当y轴的缩放为负值时就是垂直镜像

对称轴翻转

对称轴翻转指的是图片沿着左上角至右下角的对角线翻转,来看用代码Canvas是怎么实现的:

let img = new Image()
img.setAttribute("crossOrigin",'Anonymous')
img.src = './images/avatar.jpeg'
img.onload = () => {
  let canvas = document.getElementById('myCanvas')
  canvas.width = img.width
  canvas.height = img.height
  let context = canvas.getContext('2d')
  context.translate(img.width / 2, img.height / 2)
  context.scale(-1 , 1)
  context.rotate(90 * Math.PI / 180)
  context.translate(-img.width / 2, -img.height / 2)
  context.drawImage(img, 0, 0, img.width, img.height)
}

翻转图:

Canvas基本图片操作与处理

实现原理:先做水平镜像,然后顺时针旋转90度,由于先做的水平镜像,坐标轴会被水平翻转,顺时针旋转90度实际是逆时针旋转90度

图片灰度

图片的灰度效果是Canvas非常常见的一个图片处理效果,先来看实现灰度效果的代码:

let img = new Image()
img.setAttribute("crossOrigin",'Anonymous')
img.src = './images/avatar.jpeg'
img.onload = () => {
  let canvas = document.getElementById('myCanvas')
  canvas.width = img.width
  canvas.height = img.height
  let context = canvas.getContext('2d')
  context.drawImage(img, 0, 0, img.width, img.height)
  let imageData = context.getImageData(0, 0, img.width, img.height)
  let data = imageData.data
  for (let i = 0; i < data.length; i += 4) {
    let average = (data[i] + data[i + 1] + data[i + 2]) / 3
    data[i] = average
    data[i + 1] = average
    data[i + 2] = average
  }
  context.putImageData(imageData, 0, 0)
}

灰度效果图:

Canvas基本图片操作与处理

实现思路:

  • 先将图片绘制在canvas上
  • 利用getImageData方法获取每个像素点的rgb值
  • 求出每个像素点的rgb平均值,然后重新赋值
  • 利用putImageData将重新计算的imageData对象绘制到图片上

这里可能会有人对getImageData和putImageData这两个api不是很熟悉,想要了解这个两个api的可以点 getImageData putImageData

总结

Canva在图片的处理上凸显的作用越来越大,因此写了这篇文章对Canvas基本图片操作与处理做了简单的介绍,希望看了这篇文章对大家了解Canvas能有所帮助。如果有错误或不严谨的地方,欢迎批评指正,如果喜欢,欢迎点赞

查看原文: Canvas基本图片操作与处理

  • purpleduck
  • bluecat
  • purpleladybug
  • beautifulpeacock
  • tinymouse
  • organicelephant
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。