directTurnIntoBase64(fileObj, callback) {
var r = new FileReader();
// 转成base64
r.onload = function() {
//变成字符串
imgBase64 = r.result;
console.log(imgBase64);
callback(imgBase64);
}
r.readAsDataURL(fileObj); //转成Base64格式
},
compress(fileObj, callback) {
var _this = this;
if(typeof(FileReader) === 'undefined') {
console.log("当前浏览器内核不支持base64图标压缩");
//调用上传方式不压缩
_this.directTurnIntoBase64(fileObj, callback);
} else {
try {
var reader = new FileReader();
reader.onload = function(e) {
var image = $('<img/>');
image.on('load', function() {
var square = 700, //定义画布的大小,也就是图片压缩之后的像素
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = 0, //压缩图片的大小
imageHeight = 0,
offsetX = 0,
offsetY = 0,
data = ''; canvas.width = square;
canvas.height = square;
context.clearRect(0, 0, square, square); if(this.width > this.height) {
imageWidth = square;
imageHeight = square;
offsetX = -Math.round((imageWidth - square) / 2);
} else {
imageHeight = square;
imageWidth = square;
offsetY = -Math.round((imageHeight - square) / 2);
}
context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
var data = canvas.toDataURL('image/jpeg');
//压缩完成执行回调
callback(data);
});
image.attr('src', e.target.result);
};
reader.readAsDataURL(fileObj);
} catch(e) {
console.log("压缩失败!");
//调用直接上传方式 不压缩
_this.directTurnIntoBase64(fileObj, callback);
}
}
},
convertBase64UrlToBlob(urlData) {
var bytes = window.atob(urlData.split(',')[1]); //去掉url的头,并转换为byte //处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for(var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
} return new Blob([ab], {
type: 'image/png'
});
},

以上就是主要代码,接下来引用:

fileChanged(e) {
var _this = this;
const item = e.target.files[0];
    _this.compress(item, function(imgBase64) {
// console.log(imgBase64)
if(item.size > 524288) {
item = _this.convertBase64UrlToBlob(imgBase64);
}
if(item.size > 2097152) {
alert("图片大小不能超过2M");
return;
}
_this.images =URL.createObjectURL(item); //压缩的图片进行回显
_this.files = item;
    });
 },

注意压缩后的图片赋值只能在回调里面进行赋值,如果写到外面会失效。

最后,图片上传给后台要加入到formData里面。

示例:

formData.append("photo", this.files, "file_" + Date.parse(new Date()) + ".png"); //存入
console.log(formData.getAll('photo')); //打印检查

这是使用js压缩图片,在哪都能用的,我是写vue项目时使用过。但其实vue是有相关的压缩图片的依赖的,具体可查看:https://blog.csdn.net/qq_34794264/article/details/80278243

很简单,看看就能用了,更方便点

图片压缩(js压缩,底部有vue压缩图片依赖使用的教程链接)的更多相关文章

  1. iis7 压缩js文件和启用gzip压缩

    压缩js文件 打开IIS 7的配置文件:c:\windows\system32\inetsrv\config\applicationhost.config 在<staticContent loc ...

  2. gulp 压缩 js 和 css 代码

    我们在写出来的代码都是非常规范的,改换行的时候就换行,改tab 的时候就有tab,还有这样做是为了后期维护方便,但是这也导致了内存占用量的增大,当把把代码发到线上,如果网速慢一点,可能很久都加载不出来 ...

  3. maven中用yuicompressor和closure-compiler对js、css文件进行压缩

    转载自:http://matychen.iteye.com/blog/1477350 项目采用maven构建的时候,需要压缩js,css等,网上找了相关资料,自己综合了下-  直接放代码: <! ...

  4. gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块

    1.压缩tinypng图片   gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = ...

  5. 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地

    Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...

  6. Grunt压缩图片和JS

    今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install ...

  7. js使用canvas在前端压缩图片

    HTML代码: <input id="file" type="file"> JS代码: var eleFile = document.querySe ...

  8. js 压缩图片(只缩小体积,不更改图片尺寸)

      1.情景展示 如上图所示,点击上传图片按钮,调用手机摄像头拍照功能. <input onchange="javascript:imgFun.uploadPicture();&quo ...

  9. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

随机推荐

  1. 现如今,最热门的13个Java微服务框架

    曾经的 服务器领域 有许多不同的芯片架构???有哪些芯片架构???和操作系统???,经过长期发展,Java的“一次编译,到处运行”使得它在服务器领域找到一席之地,成为程序员们的最爱. 本文,我们将和大 ...

  2. 引用opencv异常

    1.异常AttributeError: module 'cv2.cv2' has no attribute 'xfeatures2d' 原因:**3.X以后OpenCv只包含部分内容,需要神经网络或者 ...

  3. nodejs的npm修改源

    在国内用npm install时,速度总是不尽如人意,解决办法是修改npm的数据源 npm config set registry https://registry.npm.taobao.org 修改 ...

  4. 单独编译和使用webrtc音频回声消除模块(附完整源码+测试音频文件)

    单独编译和使用webrtc音频降噪模块(附完整源码+测试音频文件) 单独编译和使用webrtc音频增益模块(附完整源码+测试音频文件) 说实话很不想写这篇文章,因为这和我一贯推崇的最好全部编译并使用w ...

  5. NX二次开发-UFUN输入表达式名称,获取它的名称和值UF_MODL_ask_exp

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //创建一个新的表达式,有TAG tag_t ...

  6. NX二次开发-NXOPEN获取所有工程图和所有视图DrawingSheet,DrawingSheetCollection,DraftingView

    NX11+VS2013 #include <NXOpen/Part.hxx> #include <NXOpen/PartCollection.hxx> #include < ...

  7. Spring声明式事务的实现方式选择(JDK动态代理与cglib)

    1.简介 Spring声明式事务的具体实现方式是动态决定的,与具体配置.以及事务代理对象是否实现接口等有关. 2.使用JDK动态代理的情况 在满足下面两个条件时,Spring会选择JDK动态代理作为声 ...

  8. 判断PC端浏览器类型

    if (browserInfo.type !== 'IE' || (browserInfo.type == 'IE' && Number(browserInfo.version) &g ...

  9. hibernate 一对多查询 对多的一方进行分页

    //查询用户留言@Overridepublic List<LeaveWords> getLeaveWords(String userName) {Session session = nul ...

  10. jdk linux配置

    用文本编辑器打开/etc/profile 在profile文件末尾加入: export JAVA_HOME=/usr/share/jdk1.6.0_14 export PATH=$JAVA_HOME/ ...