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. VS2012在win7 64位机中x86和x64下基本类型的占用空间大小(转)

    VS2012在win7 64位机中x86和x64下基本类型的占用空间大小 #include "stdafx.h" #include <windows.h> int _t ...

  2. 笔记38 Spring Web Flow——订单流程(定义基本流程)

    做一个在线的披萨订购应用 实际上,订购披萨的过程可以很好地定义在一个流程中.我们首先从 构建一个高层次的流程开始,它定义了订购披萨的整体过程.接下 来,我们会将这个流程拆分成子流程,这些子流程在较低的 ...

  3. echats问题

    echats 横轴显示不下datazoom配置,加入滚动条 实例博客  https://blog.csdn.net/Zheng_xiao_xin/article/details/80882113 常用 ...

  4. 基于restframework进行token验证

    一般情况下,进入到web网站主页都需要进行token或者其它验证,不能在没有登录的情况下可以查看主页的内容,在用户输入用户名密码后,进行校验成功,后台会返回一个token,用于用于下次访问主页或其它页 ...

  5. Shell case in语句详解

    和其它编程语言类似,Shell 也支持两种分支结构(选择结构),分别是 if else 语句和 case in 语句.在<Shell if else>一节中我们讲解了 if else 语句 ...

  6. IDEA中@Autowired 注解报错~图文

  7. Batch - 重定向符号Redirection >

    总结 Don't use a piping operator, which is what ">" Redirection is. 不要使用管道运算符,即“>”. Di ...

  8. lua数据类型与变量

    Lua数据类型与变量 Lua中有  8个基本类型分别为: nil.boolean.number.string.userdata.function.thread和 table. lua变量三种类型:全局 ...

  9. NX二次开发-UFUN单选菜单对话框uc1603

    NX11+VS2013 #include <uf.h> #include <uf_ui.h> UF_initialize(); //单选菜单对话框 char sPromptSt ...

  10. Spring-Security (学习记录二)--修改为自己的登录页面

    目录 1.修改spring-security.xml配置文件 2.增加login.jsp页面 3.重启项目即可看到效果 1.修改spring-security.xml配置文件 <!-- auto ...