将非 jpeg 格式图片转为 jpeg 格式
/common/compressImage/convertImage
// 思路是创建一个图片，将file等于这个图片，然后创建一个canvas图层 ，将canvas等比例缩放，
//然后用canvas的drawImage将图片与canvas合起来，然后在把canvas的base64转成file即可
export default function ConvertImage(file) {
return new Promise((resolve, reject) => {
const fileName = file.name.substring(0, file.name.indexOf('.'))
let reader = new FileReader() //读取file
reader.readAsDataURL(file)
reader.onloadend = function (e) {
let image = new Image() //新建一个img标签（还没嵌入DOM节点)
image.src = e.target.result //将图片的路径设成file路径
image.onload = function () {
let canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width,
imageHeight = image.height,
data = ''
canvas.width = imageWidth
canvas.height = imageHeight
context.drawImage(image, 0, 0, imageWidth, imageHeight)
data = canvas.toDataURL('image/jpeg')
var newfile = dataURLtoFile(data, fileName + '.jpeg')
resolve(newfile)
}
}
})
}
function dataURLtoFile(dataurl, filename) {
// base64转file对象
let 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 }) //转成了jpeg格式
}
压缩图片
/common/compressImage/compressorjs.js
import Compressor from 'compressorjs' // npm 下载包
/**
* @param image 图片
* @param backType 需要返回的类型blob,file
* @param quality 图片压缩比 0-1,数字越小，图片压缩越小
* @returns
*/
export default function ImageCompressor(image, backType, quality) {
return new Promise((resolve, reject) => {
new Compressor(image, {
quality: quality || 0.6,
success(result) {
let file = new File([result], image.name, {
type: image.type })
if (!backType || backType === 'blob') {
resolve(result)
} else if (backType === 'file') {
resolve(file)
} else {
resolve(file)
}
},
error(err) {
console.log('图片压缩失败---->>>>>', err)
reject(err)
},
})
})
}
使用（小程序有问题）
使用1：封装方法
async getUrl(file) {
this.isShowLoading = true;
for (let i = 0; i < file.length; i++) {
let img = file[i];
const fileType = img.name.substring(img.name.indexOf(".") + 1);
// 判断文件是不是jpeg 不是jpeg的都转成jpeg
if (!["jpeg", "jpg"].includes(fileType)) {
img = await ConvertImage(img); //转陈jpeg格式的file
}
let newImg = await ImageCompressor(img, "file", 0.6); //图片压缩
// newImg 压缩后文件 File
}
},
使用2：不封装方法，直接用
<script>
// ...
import ImageCompressor from "../../common/compressImage/compressorjs.js";
import ConvertImage from "../../common/compressImage/convertImage";
export default {
name: "addCar",
methods: {
jszxszUpload(type) {
uni.chooseImage({
success: async (imageRes) => {
let bool = true;
if (imageRes.tempFiles[0].type) {
if (
!["image/jpeg", "image/jpg", "image/png", "image/heic"].includes(
imageRes.tempFiles[0].type
)
) {
bool = false;
}
} else {
const imgTypeStr = "jpeg, jpg, png, heic";
const type = imageRes.tempFilePaths[0].split(".")[1];
if (imgTypeStr.indexOf(type.toLowerCase()) < 0) {
bool = false;
}
}
if (!bool) {
uni.showLoading({
title: "请上传 jpeg、jpg、png、heic 格式图片",
icon: "none",
});
setTimeout(function () {
uni.hideLoading();
}, 2000);
return;
}
let fileBase64 = "";
//#ifdef H5
/** ** 图片压缩 start ****/
let img = imageRes.tempFiles[0];
const fileType = img.name.substring(img.name.indexOf(".") + 1);
if (!["jpeg", "jpg"].includes(fileType)) {
img = await ConvertImage(img); // 转为 jpeg 格式的 file
}
let newImg = await ImageCompressor(img, "file", 0.6); //图片压缩
/** ** 图片压缩 end ****/
fileBase64 = await this.toBase64(newImg);
//#endif
//#ifdef MP-WEIXIN
// 【注意】小程序中使用该方法转换图片格式/压缩图片有很多问题，此处代码有误，得找其他解决办法
/** ** 图片压缩 start ****/
let imgBlob = imageRes.tempFilePaths[0];
const fileTypeBlob = imgBlob.name.substring(
imgBlob.name.indexOf(".") + 1
);
if (!["jpeg", "jpg"].includes(fileTypeBlob)) {
imgBlob = await ConvertImage(imgBlob); // 转为 jpeg 格式的 file
}
let newImgBlob = await ImageCompressor(imgBlob, "blob", 0.6); //图片压缩
/** ** 图片压缩 end ****/
fileBase64 = await this.downloadAndConvert(newImgBlob);
//#endif
// ... 以 base64 格式上传图片 fileBase64
},
});
},
// 文件转base64
toBase64(file) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = (e) => {
resolve(e.target.result);
};
fileReader.readAsDataURL(file);
fileReader.onerror = () => {
reject(new Error("文件流异常"));
};
});
},
},
};
</script>
注：小程序图片格式转换、压缩图片
https://alexcorvi.github.io/heic2any/
https://github.com/catdad-experiments/heic-convert
heic转成其他格式；也同时可以压缩的；有个质量属性