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. boost 大小端转换

    boost 中有一个edmian 里面有转换函数模板 native_to_little<T> 本地转换为小端 native_to_bit<T> 本地转换为大端

  2. 深度探索C++对象模型之第四章:函数语义学

    C++有三种类型的成员函数:1.static/nonstatic/virtual 一.成员的各种调用方式 C with Classes 只支持非静态成员函数(Nonstatic Member Func ...

  3. WPS Office for Mac如何修改Word文档文字排列?WPS office修改Word文档文字排列方向教程

    Word文档如何改变文字的排列方向?最新版WPS Office for Mac修复了文字排版相关的细节问题,可以更快捷的进行Word编辑,WPS Office在苹果电脑中如何修改Word文档文字排列方 ...

  4. delphi xe10 蓝牙

    //蓝牙 System.Bluetooth //单元中主要包含以下几个类 TBluetoothManager.TBluetoothDeviceList.TBluetoothAdapter.TBluet ...

  5. AnalyticDB for PostgreSQL 6.0 新特性介绍

    阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务 ...

  6. PHP headers_list() 函数

    定义和用法 headers_list() 函数返回已发送的(或待发送的)响应头部的一个列表. 该函数返回包含报头的数组. 语法 headers_list() 提示和注释 提示:如需确定是否已发送报头, ...

  7. NX二次开发-UFUN设置工程图PNG图片高度UF_DRF_set_image_height

    #include <uf.h> #include <uf_drf.h> UF_initialize(); //插入PNG char* file_name = "D:\ ...

  8. NX二次开发-设置对象名称函数UF_OBJ_set_name

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> UF_initialize( ...

  9. NX二次开发-创建图纸尺寸表达式抑制UF_DRF_add_controlling_exp

    #include <uf.h> #include <uf_modl.h> #include <uf_drf.h> #include <uf_obj.h> ...

  10. Unity3D中的线程与协程

    线程 Unity3D是以生命周期主线程循环进行游戏开发. Unity3D中的子线程无法运行Unity SDK(开发者工具包,软件包.软件框架)跟API(应用程序编程接口,函数库). 限制原因:大多数游 ...