vue 图片压缩 使用image-conversion实现图片压缩到指定大小 // 导入import*asimageConversionfrom'image-conversion'/** * 压缩小图到100kb */compressImg(file) {console.log('file: ', file)returnnewPromise((resolve, reject) =>{if(file.size/1024<=100) {resolve(file) }else{try{ imageConversion.compr...
const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7); // 0.7 表示压缩质量 console.log(compressedDataUrl); } }; reader.readAsDataURL(file); }); 二、使用第三方库如compress.js Compress.js 是一个轻量级的 JavaScript 库,专门用于图片压缩。它支持多种压缩配置,使用起来也相对简单。 安装...
2.引入 import ImageCompressorfrom'js-image-compressor' 3.使用 compressionImage (file) {returnnewPromise((resolve, reject) =>{//eslint-disable-next-line no-newnewImageCompressor({ file: file, quality:0.8, maxWidth:1500, maxHeight:1500, redressOrientation:false,//压缩前回调beforeCompress: functio...
不做压缩}// 生成canvasletcanvas=document.createElement('canvas');letcontext=canvas.getContext('2d');canvas.height=compressedHeight;canvas.width=compressedWidth;context.clearRect(0,0,compressedWidth,compressedHeight);context.drawImage(img,0,0,compressedWidth,compressedHeight);letbase64=canvas.toDataURL('...
a vue plgin for image upload , crop and compress(vue图片剪裁压缩上传插件)Version 1.0.9 License ISC Keywordsvueimagepicturephotouploadercropcropperfileavatar文件上传头像图片剪裁上传压缩 INSTALL Version: Static Static Latest Patch Latest Minor Latest Major Open in jsfiddle Learn more...
$ npm install vue-image-crop-compress-upload Usage Props 名称类型默认说明 fieldString'upload'Upload input filename, used for server side get the file stream. valueBooleantwoWayshow or not urlString''Server api path,like "/avatar/upload" ...
压缩后图片信息的获取(在compressUpload中通过图片的base64格式获取) // 获取压缩后图片的信息this.compressedImg = new Image();this.compressedImg.src = compressData;this.compressedImg.height = height;this.compressedImg.width = width;this.compressedImg.size = (blobImg.size / 1024 / 1024).toFixed(2...
imgCompress(path,obj,statu){let _this = this //这里的this 是把vue的实例对象指向改变为_thisvar img = new Image();if(statu == 'zheng') {img.src = _this.avatar1;}else {img.src = _this.avatar2}img.onload = function(){var that = this; //这里的this 是把img的对象指向改变为that/...
使用图片压缩工具:如image-webpack-loader。 npm install image-webpack-loader --save-dev 配置Webpack处理图片: module.exports = { chainWebpack: config => { config.module .rule('images') .use('image-webpack-loader') .loader('image-webpack-loader') ...
// 参数: base64地址,压缩比例,回调函数(返回压缩后图片的blob和base64)compressPic:function(base64,scale,callback){constthat=this;let_img=newImage();_img.src=base64;_img.onload=function(){let_canvas=document.createElement("canvas");letw=this.width/scale;leth=this.height/scale;_canvas.setAttrib...