vue 上传图片进行压缩图片

afterRead(file){if(this.fileList.length > 1){this.fileList.splice(1);this.$msg({text:'只能选择这么多!',type:'info'})return false;}let maxSize = 1 * 1024 * 1024;  //自己定义的文件大小，超过多少M就开始压缩(现在是1M)let fileObj = file.file;  // 当前的图片if (fileObj.size > maxSize) {this.imgcompress(fileObj, file);}else{//没有大于1兆直接执行let Files = this.Files;Files.push(file.file);} },

 imgcompress(file, files) {const img = document.createElement('img')const reader = new FileReader(); // 读取文件资源实例reader.readAsDataURL(file);   //读取图片资源reader.onload = e => {        //读取成功img.src = e.target.result;const { width: originWidth, height: originHeight } = img; //上传的图片的宽高const maxWidth = 1000, //设置一个canvas 的最大宽高maxHight = 1000;if (originWidth > maxWidth || originHeight > maxHight) {//计算出图片的缩放比例if (originWidth > originHeight) {//宽 大于 高const Proportion = Math.ceil(originWidth / maxWidth);let targetWidht = parseInt(originWidth / Proportion); //目标的宽度let targetHeight = parseInt(originHeight / Proportion); //目标的高度this.createCanvasCompress(targetWidht, targetHeight, img, files);} else {const Proportion = Math.ceil(originHeight / maxHight); //高大于宽let targetWidht = parseInt(originWidth / Proportion); //目标的宽度let targetHeight = parseInt(originHeight / Proportion); //目标的高度let bold = this.createCanvasCompress(targetWidht,targetHeight,img,files);}} else {let quality = 0.8;this.createCanvasCompress(originWidth,originHeight,img,files,quality);}};
},

 createCanvasCompress(targetWidth, targetHeight, img, files, quality) {let that = this;return new Promise((resolve, reject) => {const canvas = document.createElement("canvas");const context = canvas.getContext("2d");// 设置宽高度为等同于要压缩图片的尺寸canvas.width = targetWidth;canvas.height = targetHeight;context.clearRect(0, 0, targetWidth, targetHeight);//将img绘制到画布上console.log(targetWidth, targetHeight);context.drawImage(img, 0, 0, targetWidth, targetHeight);let bold = canvas.toBlob(function(blob) {resolve(blob);that.Files.push(blob); //压缩之后的图片//拿到的是blob格式的图片，需要把blob格式转换为file格式let files1 = new window.File([blob], files.file.name, {type: files.file.type})console.log（files1 ）},"image/png",quality);});// 创建画布
},

vue 上传图片进行压缩图片相关推荐

vue之原生上传图片并压缩图片大小（1）
vue之上传图片并压缩图片大小 vue之上传图片并压缩图片大小 vue之上传图片并压缩图片大小这里使用的是 compressorjs , 安装 npm i compressorjs 注意:这个插件是 ...
java 使用Thumbnailator 上传图片并压缩图片大小
http://www.cnblogs.com/miskis/p/5500822.html java 上传图片并压缩图片大小 Thumbnailator 是一个优秀的图片处理的Google开源Java ...
vue：前端压缩图片上传
网上关于vue前端压缩图片后再上传到的代码很多,大家可以一试~ compressImage.js文件 // 压缩图片 export function compressImage({ file, con ...
vant上传图片时压缩图片
vant上传图片,有图片的宽高大小限制,可以上传时压缩图片,在这里记录一下. 压缩图片大小 afterRead(file){console.log(file,'0000')this.face = [] ...
Vue lrz localResizeIMG 压缩图片
文章目录 1.下载依赖 npm i lrz 2.引入要使用的页面 import lrz from 'lrz' 3.使用lrz压缩图片 /*** 添加图片* */afterRead(file) {fil ...
html图片上传布局,上传图片（压缩图片再上传），布局参考以前的文章（https://www.jianshu.com/p/d379ab1b3eec）...
引入一个js: 百度网盘链接:https://pan.baidu.com/s/1KO9gH4r6bP-foYVAQn5AxQ 提取码:mgcm 复制这段内容后打开百度网盘手机App,操作更方便哦 ht ...
js 压缩图片及ajax上传图片
js 压缩图片及ajax上传图片 js压缩图片 ajax 上传文件最近做的一个微信活动中需要用到图片上传功能,具体就是用户通过手机拍照上传图片来参与活动.在测试的过程中我们发现上传的图片非常大.我们 ...
前端实现压缩图片的功能（vue-element）
前言: 随着现在手机像素,拍照功能越来越好,随之而来的是本地图片越来越大,那么如何更好的将本地图片上传到后端接口呢?这是后台管理系统常见的场景和头疼的问题,这里分享下个人的方法. 实现效果: 如下图所 ...
node 压缩图片_为了你安全压缩图片我操碎了心
近期有几个用户询问压缩的都是证件照和扫码件图片,太美工具站是否安全?我如实的按本文末尾回答了.虽然本站去年底就发布并上线了不上传图片的压缩图片工具-自定义图片压缩,可以从技术上永久解决了私密.隐私图片 ...
vue 在结合 vant 写移动端时上传图片之前，压缩图片大小
认定了就要好好的珍惜对待,人生不容辜负,你必须要更加努力 .加油骚年. 正文: vue 在结合 vant 写移动端的时上传图片给后台一般是直接上传整个文件那么肯定对图片的大小有限制这时候就需要 ...

vue 上传图片进行压缩图片

vue 上传图片进行压缩图片相关推荐

最新文章

热门文章