谈谈图片上传及canvas压缩的流程

更新日期: 2020-05-10阅读: 1.8k标签: canvas

我们通常在做图片上传的时候都会遇上这样的情况,一是后端接口限制上传图片的大小,或者是即使后端没有限制大小,因为图片太大在前端渲染时太慢,造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。

本文在gitthub做了收录:github.com/

本文主要包括以下流程:

  • 用户通过 input 框选择图片
  • 使用 FileReader 进行图片预览
  • 将图片绘制到 canvas 画布上
  • 使用 canvas 画布的能力进行图片压缩
  • 将压缩后的 Base64(DataURL) 格式的数据转换成 Blob 对象进行上传


Input 标签来获取图片

通过设置 input 标签的 type 属性为 file,来让用户可以选择文件,设置 accept 限制选择的文件类型,绑定 onchange 事件,来获取确认选择后的文件

<input type="file" accept="image/*" onchange="loadFile(event)"


FileReader

FileReader 是什么,我们先来看看官方文档的介绍

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader 常用的两个方法如下:

  • FileReader.onload:处理 load 事件。即该钩子在读取操作完成时触发,通过该钩子函数可以完成例如读取完图片后进行预览的操作,或读取完图片后对图片内容进行二次处理等操作。
  • FileReader.readAsDataURL:读取方法,并且读取完成后,result 属性将返回 Data URL 格式(Base64 编码)的字符串,代表图片内容。

在图片上传中,我们可以通过 readAsDataURL() 方法进行了文件的读取,并且通过 result 属性拿到了图片的 Base64(DataURL) 格式的数据,然后通过该数据实现了图片预览的功能

<div class="container">
  <input type="file" accept="image/*" onchange="loadFile(event)" />
</div>
<script>
  const loadFile = function (event) {
    let file =  event.target.files[0]
    const reader = new FileReader()
    reader.onload = function () {
      console.log(reader.result)
      ...
    }
    reader.readAsDataURL(file)
  }
</script>


canvas 压缩图片

这是图片上传压缩的核心所在,我们先使用 CanvasRenderingContext2D.drawImage() 方法将上传的图片文件在画布上绘制出来,再使用 Canvas.toDataURL() 将画布上的图片信息转换成 base64(DataURL) 格式的数据。


drawImage()

drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。参数如下

  • img 规定要使用的图像、画布或视频。
  • sx 可选。开始剪切的 x 坐标位置。
  • sy 可选。开始剪切的 y 坐标位置。
  • swidth 可选。被剪切图像的宽度。
  • sheight 可选。被剪切图像的高度。
  • x 在画布上放置图像的 x 坐标位置。
  • y 在画布上放置图像的 y 坐标位置。
  • width 可选。要使用的图像的宽度。(伸展或缩小图像)
  • height 可选。要使用的图像的高度。(伸展或缩小图像)
var cas = document.querySelector('canvas')
var ctx = cas.getContext('2d')
// 先创建图片对象
var img = new Image()
img.src = './images/1.jpg'

// 图片加载完之后
img.onload = function () {
  ctx.drawImage(img, 206, 111, 32, 38, 100, 100, 32, 38)
}


Canvas.toDataURl()

Canvas.toDataURl() 方法可以将 canvas 画布上的信息转换为 base64(DataURL) 格式的图像信息,纯字符的图片表示形式。该方法接收 2 个参数:

  • mimeType(可选): 表示需要转换的图像的 mimeType 类型。默认值是 image/png,还可以是 image/jpeg, image/webp 等。
  • quailty(可选):quality 表示转换的图片质量。范围是 0 到 1。图片的 mimeType 需要是 image/jpeg 或者 image/webp,其他 mimeType 值无效。默认压缩质量是 0.92。
var canvas = document.createElement('canvas')
canvas.toDataURL("image/jpeg" 0.8)

到这里,我们先来上 canvas 压缩图片的代码

function compress(base64, quality, mimeType) {
  let canvas = document.createElement('canvas')
  let img = document.createElement('img')
  img.crossOrigin = 'anonymous'
  return new Promise((resolve, reject) => {
    img.src = base64
    img.onload = () => {
      let targetWidth, targetHeight
      if (img.width > MAX_WIDTH) {
        targetWidth = MAX_WIDTH
        targetHeight = (img.height * MAX_WIDTH) / img.width
      } else {
        targetWidth = img.width
        targetHeight = img.height
      }
      canvas.width = targetWidth
      canvas.height = targetHeight
      let ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, targetWidth, targetHeight) // 清除画布
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      let imageData = canvas.toDataURL(mimeType, quality / 100)
      resolve(imageData)
    }
  })
}

将 base64 转化为文件

  • 通过 window.atob 将 base-64 字符串解码为 binaryString(二进制文本);
  • 将 binaryString 构造为 multipart/form-data 格式;
  • 用 Uint8Array 将 multipart 格式的二进制文本转换为 ArrayBuffer。
function dataUrlToBlob(base64, mimeType) {
  let bytes = window.atob(base64.split(',')[1])
  let ab = new ArrayBuffer(bytes.length)
  let ia = new Uint8Array(ab)
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i)
  }
  return new Blob([ab], { type: mimeType })
}


将图片上传到服务端

  • 创建一个 FormData,把 blob append 到 FormData 里面
  • 请求服务端接口,提交图片
function uploadFile(url, blob) {
  let formData = new FormData()
  let request = new XMLHttpRequest()
  formData.append('image', blob)
  request.open('POST', url, true)
  request.send(formData)
}

ps:在实际开发中,我们要不要把图片转化为 FormData 形式上传到服务端,这就看具体的业务需要了。我们可以上图片上传到腾讯云,直接返回一个'https.xxx.jgp'的图片 url 用于上传。

来自:https://segmentfault.com/a/1190000022891640

链接: https://www.fly63.com/article/detial/9276

HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。

原生js使用canvas实现图片格式webp/png/jpeg在线转换

javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。

离屏Canvas — 使用Web Worker提高你的Canvas运行速度

现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容

canvas高效绘制10万图形,你必须知道的高效绘制技巧

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力

js用canvas实现简单的粒子运动

在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察

Canvas 点线动画案例

canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径

Canvas在移动端绘制模糊的原因与解决办法

由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!