网站没有做伪静态是什么样子,十大美妆电商平台,企业vi设计欣赏,wordpress 是什么开源协议目录 将非 jpeg 格式图片转为 jpeg 格式压缩图片使用 将非 jpeg 格式图片转为 jpeg 格式
/common/compressImage/convertImage
// 思路是创建一个图片#xff0c;将file等于这个图片#xff0c;然后创建一个canvas图层 #xff0c;将canvas等比例缩放#xff0c;
//然后用… 目录 将非 jpeg 格式图片转为 jpeg 格式压缩图片使用 将非 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
