vue图片压缩image-conversion
vue图片压缩image-conversion
·
需求
根据图片的URL或者上传图片时将图片进行压缩到10KB
解决方式
使用image-conversion进行压缩
一、安装依赖
npm i image-conversion
页面中引入
import * as imageConversion from 'image-conversion'
使用
//把图片文件作为参数传递到方法中
beforeAvatarUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
console.log('上传头像图片只能是 JPG 或 PNG 格式!');
return false;
}
return new Promise((resolve) => {
// 压缩到100KB,这里的100就是要压缩的大小,可自定义
imageConversion.compressAccurately(file, 10).then(res => {
console.log(res)
resolve(res);
});
})
},
二、根据图片URL进行压缩完整代码
1.将图片URL转为转为file
transferFile.js
function setInitImg(url,callback){
let img = url;//这里是网上随便找的一张图片
let _ = this
let imgRes
getBase64(img, (dataURL) => {
imgRes = dataURLtoFile(dataURL,img);
console.log(imgRes)
callback(imgRes)
});
}
function getBase64(url, callback) {
//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 createElement() 创建 <img> 省去了 append(),也就避免了文档冗余和污染
var Img = new Image(),
dataURL = "";
Img.src = url + "?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存,浏览器会报错;
Img.setAttribute("crossOrigin", "Anonymous"); // 解决控制台跨域报错的问题
Img.onload = function () {
//要先确保图片完整获取到,这是个异步事件
var canvas = document.createElement("canvas"), //创建canvas元素
width = Img.width, //确保canvas的尺寸和图片一样
height = Img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
dataURL = canvas.toDataURL("image/jpeg"); //转换图片为dataURL
callback ? callback(dataURL) : null; //调用回调函数
};
}
function dataURLtoFile(dataurl, filename) {
//将base64转换为文件,dataurl为base64字符串,filename为文件名(必须带后缀名,如.jpg,.png)
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, { type: mime });
}
export{ setInitImg}
2.页面中使用
<template>
<img width="500" :src="conSrc">
<el-button @click="handleClick">点击</el-button>
</template>
<script>
import * as imageConversion from 'image-conversion'
import {setInitImg} from "./transferFile.js";
export default {
data() {
return {
src: '图片URL',
conSrc: ''
}
},
methods: {
handleClick(){
let that=this
//先将url转为file
setInitImg(this.src,file=>{
//将file进行压缩
this.beforeAvatarUpload(file).then(res => {
//最后把file转为base64放到页面上显示
this.translateBlobToBase64(res,function (e){
that.conSrc=e
})
})
})
},
/**
* Blob转Base64
* @param base64 String base64格式字符串
* @param callback Function 获取转换结果e.target.result后执行的回调函数
*/
translateBlobToBase64(blob, callback) {
var reader = new FileReader()
reader.onload = function (e) {
callback(e.target.result)
}
reader.readAsDataURL(blob)
//读取后,result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
},
//把图片文件作为参数传递到方法中
beforeAvatarUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
console.log('上传头像图片只能是 JPG 或 PNG 格式!');
return false;
}
return new Promise((resolve) => {
// 压缩到100KB,这里的100就是要压缩的大小,可自定义
imageConversion.compressAccurately(file, 10).then(res => {
console.log(res)
resolve(res);
});
})
},
}
}
</script>
<style scoped>
</style>
结果:
三、上传文件时进行压缩
此处使用的是element的上传组件,原理都是一样的只不过URL压缩需要先将URL转为file
<template>
<el-upload
ref="uploadRef"
class="upload-demo"
action=""
:auto-upload="false"
:before-upload="handleBeforeUpload"
>
<template #trigger>
<el-button type="primary">select file</el-button>
</template>
<el-button class="ml-3" type="success" @click="submitUpload">
upload to server
</el-button>
<template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template>
</el-upload>
<img width="500" :src="conSrc">
</template>
<script>
import * as imageConversion from 'image-conversion'
export default {
data() {
return {
src: '图片地址',
conSrc: ''
}
},
methods: {
handleBeforeUpload(file) {
let that=this
this.beforeAvatarUpload(file).then(res => {
this.translateBlobToBase64(res,function (e){
that.conSrc=e
})
})
},
submitUpload() {
this.$refs['uploadRef'].submit()
},
/**
* Blob转Base64
* @param base64 String base64格式字符串
* @param callback Function 获取转换结果e.target.result后执行的回调函数
*/
translateBlobToBase64(blob, callback) {
var reader = new FileReader()
reader.onload = function (e) {
callback(e.target.result)
}
reader.readAsDataURL(blob)
//读取后,result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
},
//把图片文件作为参数传递到方法中
beforeAvatarUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
if (!isJpgOrPng) {
console.log('上传头像图片只能是 JPG 或 PNG 格式!');
return false;
}
return new Promise((resolve) => {
// 压缩到100KB,这里的100就是要压缩的大小,可自定义
imageConversion.compressAccurately(file, 10).then(res => {
console.log(res)
resolve(res);
});
})
},
}
}
</script>
<style scoped>
</style>
结果:
更多推荐
已为社区贡献8条内容
所有评论(0)