// 通过canvas压缩图片
canvasCompress(file) {
var reader = new FileReader()
var img = new Image()
reader.readAsDataURL(file)
reader.onload = function(e) {
console.log('读取完成', e)
img.src = this.result
}
var width = 480 // 图像大小
var quality = 0.7 // 图像质量
var canvas = document.createElement('canvas')
var drawer = canvas.getContext('2d')
var base64
img.onload = function() {
canvas.width = width
canvas.height = width * (img.height / img.width)
drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
base64 = canvas.toDataURL('image/jpeg', quality)
console.log('压缩后', base64)
}
},
前端js 通过canvas压缩图片
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- gulp配置前端资源自动化 -- less编译 js压缩 图片压缩 1.package.json 文件 2.gul...
- image-compressor 一个简单的JavaScript图像压缩器。使用浏览器的原生canvas.toBl...
- gulp 是一款 nodejs 应用,用于前端开发过程中对代码进行构建,是自动化项目的构建利器。她不仅能对网站资源...
- A、CSS压缩 1、安装Nodejs 2、全局安装gulp 3、在项目目录下安装gulp 4、配置package....