前言:哈喽,朋友们,最近一直在马不停蹄地赶项目,很久没有写博客了。今天我们来看一下前端上传图片地时候如何对图片进行压缩

1、图片上传

我近期写项目都是使用的VUE,这里上传图片使用了Element-ui这个组件库

具体代码如下:

<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="data:imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> <style>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style> <script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>

2、选取合适的钩子

这个组件为我们提供了许多钩子

on-preview 点击文件列表中已上传的文件时的钩子 function(file)
on-remove 文件列表移除文件时的钩子 function(file, fileList)
on-success 文件上传成功时的钩子 function(response, file, fileList)
on-error 文件上传失败时的钩子 function(err, file, fileList)
on-progress 文件上传时的钩子 function(event, file, fileList)
on-change 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 function(file, fileList)
before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。 function(file)
before-remove 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。 function(file, fileList)

我这里选择了before-upload这个钩子,在图片上传前对图片进行压缩


3、对图片进行压缩操作

beforeAvatarUpload(file) {
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
const isLt2M = file.size / 1024 / 1024 < 100;
if (!isJPG) {
this.$message.error("上传头像图片只能是 jpg、png 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 100MB!");
}
if (!isJPG || !isLt2M) {
return false;
}
let me = this;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
//图片大于100K压缩
if (file.size > 1024 * 1024 * 0.1) {
let img = new Image();
img.src = this.result;
img.onload = function() {
let originWidth = img.width;
let originHeight = img.height;
let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
canvas.width = 512; //压缩后的宽度
canvas.height = (originHeight * canvas.width) / originWidth;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
me.form.image = canvas.toDataURL("image/jpeg");
};
} else {
me.form.image = this.result;
}
};
return false; //isJPG && isLt2M;
},

这里使用的canvas对图片进行压缩,其原理是通过canvas结合js重新绘制一副 2d 图片,然后给canvas画布设置宽高来完成目标图片的压缩。

以上。

上传图片如何对图片进行压缩canvas的更多相关文章

  1. 前端JS利用canvas的drawImage()对图片进行压缩

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

  2. 使用ajax上传图片,并且使用canvas实现出上传进度效果

    前端代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> &l ...

  3. 分享一个上传图片,图片压缩Unsupported Image Type解决方案

    http://blog.csdn.net/frankcheng5143/article/details/53185201 *************************************** ...

  4. js实现对上传图片的路径转成base64编码,并且对图片进行压缩,实现预览功能1

    参考 https://blog.csdn.net/qq_31965515/article/details/82975381 https://www.cnblogs.com/zhangdiIT/p/78 ...

  5. mac上使用imagealpha命令对图片进行压缩批处理

    #! /bin/bash #BASE_DIR="/Users/jiading/Documents/basepng"; #OUTPUT_DIR="/Users/jiadin ...

  6. 使用chooseImage上传图片,不压缩,使用原图

    参考文章: https://help.aliyun.com/document_detail/92883.html

  7. iOS图片压缩

    项目中常会遇到,上传图片的操作,由于iPhone手机直接拍照的图片往往比较大,一般3-4M,如果直接上传不做处理会浪费用户很多流量,再者有很多场景并不需要高清图片,所以在上传图片前对图片进行压缩,是很 ...

  8. 上传图片时压缩图片 - 前端(canvas)做法

    HTML前端代码: <?php $this->layout('head'); ?> <?php $this->layout('sidebar'); ?> <m ...

  9. js移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...

随机推荐

  1. Java中的String,StringBuffer和StringBuilder

    在了解这个问题的时候查了不少资料,最有帮助的是这个博文:http://swiftlet.net/archives/1694,看了一段时间,咀嚼了一段时间,写一个经过自己消化的博文,希望能帮到大家. 首 ...

  2. OpenLayers测量距离和面积

    <!DOCTYPE html> <html> <head> <title>测量距离和面积</title> <meta http-equ ...

  3. 使用SpringBoot发送mail邮件

    1.前言 发送邮件应该是网站的必备拓展功能之一,注册验证,忘记密码或者是给用户发送营销信息.正常我们会用JavaMail相关api来写发送邮件的相关代码,但现在springboot提供了一套更简易使用 ...

  4. day37 04-Hibernate二级缓存:list和iterate方法比较

    get()和load()方法既可以向一级缓存区放数据,也可以向二级缓存区放数据.这是查询一个的情况.要是查询所有呢?注意, // 查询所有.Query接口的list()方法. // list()方法会 ...

  5. hdu 1296 Polynomial Problem(多项式模拟)

    Problem Description We have learned how to obtain the value of a polynomial when we were a middle sc ...

  6. 安装mysql报错2503

    安装MySQL-5.5.27报这个错误: The installer has encountered an unexpected error installing this package.This ...

  7. 威胁快报|Nexus Repository Manager 3新漏洞已被用于挖矿木马传播,建议用户尽快修复

    背景 近日,阿里云安全监测到watchbog挖矿木马使用新曝光的Nexus Repository Manager 3远程代码执行漏洞(CVE-2019-7238)进行攻击并挖矿的事件. 值得注意的是, ...

  8. 洛谷1081 (NOIp2012) 开车旅行——倍增预处理

    题目:https://www.luogu.org/problemnew/show/P1081 预处理从每个点开始a能走多少.b能走多少.可以像dp一样从后往前推. 但有X的限制.所以该数组可以变成倍增 ...

  9. iOS 7: 如何为iPhone 5s编译64位应用

    随着iPhone 5S的推出,大家开始关心5S上所使用的64位CPU A7. 除了关心A7的性能以外,大家还会关心一个问题,那就是使用A7的64位系统对应用有没有什么要求.特别是应用开发者,大家都比较 ...

  10. Hdu 4251 区间中位数(划分树)

    题目链接 The Famous ICPC Team Again Time Limit: 30000/15000 MS (Java/Others)    Memory Limit: 32768/3276 ...