使用FileReader + canvas.toDataURL() 实现图片压缩

主要借助FileReader读取文件、canvas的toDataURL(压缩后图片的格式, 要压缩图片的质量0~1)方法实现图片质量压缩。

<template><div><input type="file" @change="fun" /><div style="display: flex"><div><h4>原始图片</h4><img:src="origin"style="width: 300px; height: 300px; margin-right: 10px"/></div><div><h4>压缩图片</h4><img :src="compress" style="width: 300px; height: 300px" /></div></div></div>
</template>

data(){return {origin:"",compress:""}
},
methods: {// 图片压缩compress_img(imgBase64, quality, mimeType) {let [canvas, img] = [document.createElement("canvas"),document.createElement("img"),];img.src = imgBase64;img.onload = () => {// canvas 宽高canvas.width = 300;canvas.height = 300;let ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0, 300, 300); // 从左上角开始绘制，宽高均为400，可自行修改// 将canvas对象转换为base64位编码const newImgBase64 = canvas.toDataURL(mimeType, quality / 100); // 参数：type，文件类型 encoderOptions，取值0~1，可用表示图片的质量// console.log('压缩后的图片:',newImgBase64) // 压缩后的图片base64this.compress = newImgBase64;};},fun (e) {// console.log(e.target.files[0]);const read = new FileReader();read.onload = () => {// read.result 读取原始图片base64this.origin = read.result;// console.log('原始图片: ',read.result)this.compress_img(read.result, 20, "image/jpeg");};read.readAsDataURL(e.target.files[0]);},
}

从上图，可以看出图片质量被压缩之后，变得非常模糊，文件的大小也会变小。

【FileReader、Canvas.toDataURL，实现前端图片压缩】 https://www.bilibili.com/video/BV1s84y1h7Qk/?share_source=copy_web&vd_source=d50c6b3216dda73ea5961ad06d492fa2https://www.bilibili.com/video/BV1s84y1h7Qk/?share_source=copy_web&vd_source=d50c6b3216dda73ea5961ad06d492fa2

使用FileReader + canvas.toDataURL() 实现图片压缩相关推荐

使用canvas.toDataURL把图片转为base64格式
使用canvas.toDataURL把图片转为base64格式 function getBase64(url) {//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 c ...
前端 canvas toDataURL() 转图片生成空白图片问题
这里写自定义目录标题前端 canvas toDataUrl() 转图片生成空白图片问题感谢大神解决方法问题发生解决办法原理 vue项目中的使用总结 2022-05-17追加修改前端 ca ...
小程序canvas生成海报图片压缩和失真问题解决
微信小程序实现canvas按照原图等比例不失真绘制海报图,防止模糊我这里的场景是收款二维码+收款背景图. 绘制二维码我这里绘制二维码使用的 wxapp-qrcode ,也可以使用weapp-qrc ...
php 图片压缩旋转,移动端图片上传旋转、压缩问题的解决方案
本篇文章就给大家带来移动端图片上传旋转.压缩问题的解决方案.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 前言在手机上通过网页 input 标签拍照上传图片,有一些手机会出现图片 ...
使用js将图片压缩到指定大小
可以使用 JavaScript 库或框架来实现图片压缩功能. 例如可以使用 "canvas" 元素和 "FileReader" 对象来实现图片压缩. 以下是一个 ...
【canvas】导出图片背景色
一般是透明底或者黑色,想要白色背景的图片. var imageData = ctx.getImageData( 0,0,w,h); for (var i = 0; i < imageData.d ...
CANVAS运用-对图片的压缩上传（仅针对移动浏览器）
最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等 ...
使用canvas进行图片压缩(前端图片压缩核心处理)
一.原理:实际上就是利用canvas进行重新绘制 1.先将图片的file文件转成baseURL 2.创建一个image标签去接收文件获取图片的宽高和比例. 3.创建canvas画布设置画布的大小. 4 ...
base64压缩/canvas.toDataURL
"jpg和jpeg没有区别,是缩写的程度不同.jpeg文件扩展名应该为.jpeg,dos 时代的8.3文件规定扩展名不能超过3个字符,就使用了.jpg. canvas.toDataURL(t ...

使用FileReader + canvas.toDataURL() 实现图片压缩

使用FileReader + canvas.toDataURL() 实现图片压缩相关推荐

最新文章

热门文章