在前端上传图片的操作过程中,当上传服务器时,如果图片过大,可能会影响页面响应速度,这个时候,我们便会对图片进行压缩处理,再上传服务器。

前端对图片进行压缩,一般使用canvas来实现。最后使用canvas API函数toDataURL来获取图片的Base64字符串,然后上传到服务器的时候,会面临两种选择:

  • 直接将图片的Base64字符串post到后端是进行处理和保存;
  • 在前端将Base64字符串转化为二进制的Blob对象形式,再使用(FormData)上传至后端。

在上上篇随笔:移动端H5如何调用相册和相机上传图片、音频、视频中有讲到,FormData的append方法中,value接收file和blob对象形式,canvas转化成URL格式后,我们只能通过转为Blob对象上传(我在网上找到的方法都是转为blob...)

第一种方法的话比较简单,主要交给后端进行处理。而第二种相较复杂一点点,主要实现过程如下:

// 本例使用vue-cli3快速构建

<template>
<div id="app">
<div class="show-box">
<img :src="imgSrc" alt />
</div>
<form class="input-box">
<div class="select">
选择文件
<input type="file" name="upphoto" @change="input" />
<!--后端读取的是name为upphoto的标签-->
</div>
<div class="button" @click="loadImg">点击上传</div>
</form>
</div>
</template> <script>
import $ from "jquery"; export default {
name: "app",
data() {
return {
maxSize: 500, // 限制图片最大为500kb
file: "",
imgSrc: "",
formData: ""
};
},
methods: {
readFileImg(file) {
// 读取图片信息并展示
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
let img = new Image();
img.src = reader.result;
img.onload = () => {
this.imgSrc = img.src;
      // 以上是将选择的图片展示出来
let originWidth = img.naturalWidth,
originHeight = img.naturalHeight,
originSize = file.size / 1024; // 计算图片多少kb
this.compressEvent(img, originSize, originWidth, originHeight);
};
};
reader.onerror = function(error) {
console.log(`error: ${error}`);
};
},
compressEvent(img, originSize, originWidth, originHeight) {
// 将图片绘制到canvas上进行压缩
let canvas = document.createElement("canvas"),
context = canvas.getContext("2d"),
maxSize = this.maxSize;
if (originSize <= maxSize) {
this.formData = new FormData($(".input-box")[0])
return false;
}
let mul = originSize / maxSize,
targetWidth = originWidth / mul,
targetHeight = originHeight / mul;
canvas.width = targetWidth;
canvas.height = targetHeight;
context.clearRect(0, 0, targetWidth, targetHeight); // 清除画布
context.drawImage(img, 0, 0, targetWidth, targetHeight); // 画图 let dataURL = canvas.toDataURL("image/jpeg", 0.1); // 将其转化成base64字符串 let blob = this.dataURItoBlob(dataURL); // 转化为blob格式 this.formData = new FormData();
this.formData.append("file", blob, this.file.name);
},
dataURItoBlob(dataURI) {
// base64格式转化为blob对象
let byteString = atob(dataURI.split(",")[1]); let mimeString = dataURI
.split(",")[0]
.split(":")[1]
.split(";")[0]; let ab = new ArrayBuffer(byteString.length);
let ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
} return new Blob([ab], { type: mimeString });
},
input(event) {
// 选择文件
this.readFileImg(event.target.files[0]);
},
loadImg() {
// 点击上传
$.ajax({
url: "./downFile.php", // 接口地址
type: "POST",
async: false,
data: this.formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
this.imgSrc = "";
},
error: function(error) {
console.log(error);
}
});
}
}
};
</script> <style lang="less">
  // 此处样式文件省略...</style>

【参考文章】

如何使用FromData上传压缩裁剪后的图片Blob对象

H5实现图片先压缩再上传

FormData的使用

MND:FormData对象的使用

【方法】如何实现图片压缩并使用FormData上传的更多相关文章

  1. php canvas 前端JS压缩,获取图片二进制流数据并上传

    <?php if(isset($_GET['upload']) && $_GET['upload'] == 'img'){ //二进制数据流 $data = file_get_c ...

  2. 使用FormData上传文件、图片

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...

  3. 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  4. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

  5. 相册选择头像或者拍照 上传头像以NSData 图片二进制格式 表单上传

    一.点击头像图片 或者按钮 在相册选择照片返回img,网络上传头像要用data表单上传 (1)上传头像属性 // 图片二进制格式 表单上传 @property (nonatomic, strong) ...

  6. 项目总结21:项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库)

    项目总结21:input实现多图上传(FormData)(上传OSS并保存数据库) 备注:本案例,作为Demo,包含少量的项目业务逻辑,input多图上传的逻辑是完整的: 不废话直接上代码 1-前端标 ...

  7. canvas利用formdata上传到服务器

    1.首先绘制canvas图片 <canvas id="myCanvas" width="100" height="100" style ...

  8. (十)HttpClient以multipart/form-data上传文件

    原文链接:https://blog.csdn.net/wsdtq123/article/details/78888734 POST上传文件 最早的HTTP POST是不支持文件上传的,给编程开发带来很 ...

  9. js bese64转化为blob使用FormData上传

    原文 工作示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. Kubernetes-Service(服务)

    ⒈引用 在Kubernetes中,pod通常需要对来自集群内部的其他pod或来自集群外部的客户端的HTTP请求做出响应.pod需要一种寻找其他pod的方法来使用其他pod提供的服务,不像在没有Kube ...

  2. ffmpeg解码音视频过程(附代码)

    0. 引言 最近一直在使用和学习ffmpeg. 工作中需要拉流解码, 获取音频和视频数据. 这些都是使用ffmpeg处理. 因为对ffmpeg接触不多, 用的不深, 在使用的过程中经常遇到不太懂的地方 ...

  3. go环境变量配置 (GOROOT和GOPATH)的区别和含义

    GOROOT就是go的安装路径 在~/.bash_profile中添加下面语句: GOROOT=/usr/local/go export GOROOT 当然, 要执行go命令和go工具, 就要配置go ...

  4. Session Timer机制分析

    Session Timer机制分析 功能介绍 会话初始化协议(SIP)并没有为所建立的会话定义存活机制.尽管用户代理可以通过会话特定的机制判断会话是否超时,但是代理服务器却做不到这点.如此一来,代理服 ...

  5. MySQL自测测试

    #建学生信息表student create table student ( sno varchar(20) not null primary key, sname varchar(20) not nu ...

  6. vue网络不好时不间断请求

    配置默认参数 const { apiConfig: { timeout, retry, retryDelay } } = config; if(timeout) axios.defaults.time ...

  7. canvas之五角星的绘制

    <html> <head> <meta charset=utf-8> <title>绘制简单图形线及矩形</title> <style ...

  8. javascript定义一个list

    JavaScript可以定义数组类型,在javascript语言中List叫Array,它有以下2种定义方式方式1:var array=new Array();方式2:var array=[];通常在 ...

  9. asp.net mvc4 学习1

    1 简介:微软在很早就看到了基于windows系统的web开发平台的需求,这时便开始提出自己的解决方案即微软的第一个基于web开发的平台ASP.再后来随着需求和性能的要求再2002年推出第二个解决方案 ...

  10. C#遍历文件夹下的所有文件

    DirectoryInfo theFolder = new DirectoryInfo(path); DirectoryInfo[] dirInfo = theFolder.GetDirectorie ...