暂未实现压缩到指定文件大小
也可以是用于插件https://github.com/WangYuLue/image-conversion
/**
* 压缩图片
* @param {type} filePath 图片路径
* @param {type} scale 压缩比例
*/
compressImage(filePath,scale){
const vm = this;
const img = new Image();
img.src = filePath;// 传过来的图片路径在这里用。
img.onload = function () {
const that = this;
console.log(that.width,that.height);
//生成比例
let w = that.width*scale,
h = that.height*scale;
console.log(w,h);
//生成canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = w;
canvas.height = h;
ctx.drawImage(that, 0, 0, w, h);
//1最清晰,越低越模糊。有一点不清楚这里明明设置的是jpeg。弹出 base64 开头的一段 data:image/png;却是png。哎开心就好,开心就好
const base64 = canvas.toDataURL('image/jpeg', 1);
// console.log(base64);
const blob = vm.base64ToBlob(base64,'image/jpeg')
const href = window.URL.createObjectURL(blob); //图片压缩后的blob src
console.log(href);
}
},
/**
* base64转bolb
* @param {type} urlData base64
* @param {type} type 类型image/png||image/jpeg
*/
base64ToBlob(urlData, type) {
let arr = urlData.split(',');
let mime = arr[0].match(/:(.*?);/)[1] || type;
console.log(mime);
// 去掉url的头,并转化为byte
let bytes = window.atob(arr[1]);
// 处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
// 生成视图(直接针对内存):8位无符号整数,长度1个字节
let ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {
type: mime
});
},