使用canvas实现图片压缩

only_do 发布于2019-08-22 11:03 / 3145人阅读

摘要：如果超出取值范围，将会使用默认值。返回的是字符串，如果要转成进制测试结果由所拍摄的图片上传，由平均左右压缩至再见

那，首先通过URL.createObjectURL(file)从file对象直接取得了图片的地址

前面就不详细说了，开始压缩咯 ( ´ ▽ ` )ﾉ

噢，有个注意点:

每次调用createObjectURL的时候，一个新的URL对象就被创建了，即使是同一个file对象，也会创建一个新对URL对象，所以，为了最佳性能和内存使用，当不再需要这个对象的时候要URL.revokeObjectURL()释放它。

开始压缩

创建一个compressImage函数，将之图片的地址url作参数传入：

compressImage (url) {
  let cvs = document.createElement("canvas")
  let ctx = cvs.getContext("2d")
  let img = new window.Image()
  img.src = url
  img.onload = () => {
    cvs.width = img.width
    cvs.height = img.height
    setTimeout(() => {
      ctx.drawImage(img, 0, 0, cvs.width, cvs.height)
      this.newImageData = cvs.toDataURL("image/jpeg", 0.1)
    }, 0)
    this.showPreviewer = true
  }
},

这里说说

canvas.toDataURL(type, encoderOptions)
HTMLCanvasElement.toDataURL() 方法接受两个参数，type和encoderOptions

type是可选的，图片格式，默认是 image/png，encoderOptions表示图片质量，在type为image/jpeg 或 image/webp时可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

toDataURL()返回的是base64字符串，如果要转成2进制

convertToBinary (dataURI) {
  let byteString = window.atob(dataURI.split(",")[1])
  let ab = new ArrayBuffer(byteString.length)
  let ia = new Uint8Array(ab)
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  let bb = new window.Blob([ ab ])
  return bb
}

测试结果：由iphone6所拍摄的图片上传，由平均1.9M左右压缩至170k

*･゜ﾟ･*:.｡..｡.:*･"(*ﾟ▽ﾟ*)"･*:.｡. .｡.:*･゜ﾟ･*

再见

海外云主机云服务器使用canvas画图 js实现视频压缩 php实现页面压缩图片压缩

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91697.html

vue下实现input实现图片上传，压缩，拼接以及旋转

摘要：背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎躯一震，以为会是一个棘手的问题，当你读完这篇文章的时候，你会发现都是你瞎操作了，真相就是这么简单背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎...

megatron 2019-08-23 13:40 评论0 收藏0
vue下实现input实现图片上传，压缩，拼接以及旋转

摘要：背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎躯一震，以为会是一个棘手的问题，当你读完这篇文章的时候，你会发现都是你瞎操作了，真相就是这么简单背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎...

Invoker 2019-08-02 12:05 评论0 收藏0
vue下实现input实现图片上传，压缩，拼接以及旋转

摘要：背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎躯一震，以为会是一个棘手的问题，当你读完这篇文章的时候，你会发现都是你瞎操作了，真相就是这么简单背景作为一名前端工作人员，相信大家在开发系统的时候，经常有遇到需要这么一种需求，就是需要为用户保存上传的图片，很多小白遇到这个问题的时候，都会虎...

ChristmasBoy 2019-08-29 17:22 评论0 收藏0
Vue使用mixins手写压缩图片代码

摘要：一介绍本文将介绍再项目中通过对图片进行压缩后使用。把图片能转换成出发事件对赋值完成，触发事件生成，调用回调函数。将图片将转成格式把转换成文件四压缩完成使用五参考链接压缩图片到以下一、介绍本文将介绍再Vue项目中通过js对图片进行压缩后使用。（纯前端实现，不依赖后台）主要使用Canvas.toDataURL(type, encoderOptions)对图片大小进行调整参数描...

CoXie 2019-08-22 15:23 评论0 收藏0
基于canvas的图片压缩函数实现

摘要：由于图片压缩中使用了大量异步操作，这里使用语法处理异步问题基本思路是先将数据读取为类型的数据，再将绘制到，通过的转换为数据并压缩数据，最后再将数据转换为数据类型，再上传到服务器。下面是具体的实现方式。由于图片压缩中使用了大量异步操作，这里使用es7 async 语法处理异步问题基本思路是:先将file数据读取为DataUrl类型的数据，再将DataUrl绘制到canvas，通过ca...

neuSnail 2019-08-23 15:13 评论0 收藏0