知乎 网站开发工具凡科网站建站教程

将非 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() //读取filereader.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 = imageWidthcanvas.height = imageHeightcontext.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的都转成jpegif (!["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},});},// 文件转base64toBase64(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>