前端js实现canvas压缩图片并上传

一. 上传前压缩图片的好处

  1. 可以减少用户的等待时间，提升使用体验，目前手机拍摄的图片文件大小一般在几 M 左右，文件直接上传时会有卡顿现象。
  2. 可以减少服务端的存储空间。
  3. 再次回去图片资源是也可以快速的加载。虽然目前阿里云的 oss 有相对应的 api 可以通过降低图片质量等方法减少体积，不过使用 canvas 可以直接减少源文件的体积。

因此我们很有必要对上传的图片进行压缩。

二. 处理流程

主要包括以下流程：

  1. 用户通过van-uploader选择图片。
  2. 使用FileReader进行图片预览。
  3. 将图片绘制到canvas画布上，使用canvas画布的能力进行图片压缩，todataurl()方式会把图片自动转成base64。
  4. 将压缩后的Base64（DataURL）格式的数据转换成Blob对象进行上传，或者直接上传base64格式，这个根据自己需求。
  5. 将图片上传服务端，上传时候创建Formdata对象实例 new FromData()，把base64或Blob，append()到Formdata里面请求服务端接口，提交图片。
  6. 上传成功，后台接口返回图片的URL。

三. 了解概念

在写代码之前，先来了解几个概念。当然也可以跳过这部分，直接看代码。

1）new FileReader()
我们先来看看官方文档的介绍 FileReader

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

FileReader常用的两个方法如下：

FileReader.onload： 处理load事件。即该钩子在读取操作完成时触发，通过该钩子函数可以完成例如读取完图片后进行预览的操作，或读取完图片后对图片内容进行二次处理等操作。
FileReader.readAsDataURL()：读取方法，并且读取完成后，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容（比如图片）。

在图片上传中，我们可以通过readAsDataURL()方法进行了文件的读取，并且通过result属性拿到了图片的Base64(DataURL)格式的数据，然后通过该数据实现了图片预览的功能。

2）new FormData()
我们先来看看官方文档的介绍 FormData 对象的使用

FormData 对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据 (keyed data)，而独立于表单使用。如果表单enctype属性设为 multipart/form-data，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。

let formdata = new FormData()
console.log(formdata)

打印

操作方法：new FormData()对象的作用以及使用方法

3）new Image()

我们先来看看官方文档的介绍 Image()

Image()函数将会创建一个新的HTMLImageElement实例。它的功能等价于 document.createElement('img')。
Image对象是JS中的宿主（或内置）对象，他代表嵌入的图像。当我们创建一个Image对象时，就相当于给浏览器缓存了一张图片，Image对象也常用来做预加载图片（也就是将图片预先加载到浏览器中，当浏览图片的时候就能享受到极快的加载速度）。在HTML页面中，标签每出现一次，也就创建了一个Image对象。

建立图像对象：`let 图像对象名称=new Image([宽度],[高度])`
图像对象的属性： `border complete height hspace lowsrc name src vspace width`
图像对象的事件：`onabort onerror onkeydown onkeypress onkeyup onload`

在这里插入图片描述

var img = new Image(); //创建一个Image对象 ，会渲染为img标签
img.src = "17.png";  //相当于给浏览器缓存了一张图片
img.onload = function(){alert("img is loaded")};  //onload 事件在图片加载完成后立即执行。
img.onerror = function(){alert("error!")};  // 当图片加载出现错误，会触发，经常在该事件中将图片导向报错图片，以免页面上出现红色的叉叉
img.border="3px solid #ccc";

4）canvas的toDataURL()方法
我们先来看看官方文档的介绍HTMLCanvasElement.toDataURL()

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为 96dpi。

语法：

canvas.toDataURL(type, encoderOptions);

参数:

type：图片格式，默认为 image/png,可以是其他image/jpeg等
encoderOptions：0到1之间的取值，主要用来选定图片的质量，只要导出为jpg和webp格式的时候此参数才有效果。默认值是0.92，超出范围也会选择默认值。

返回值:

返回值是一个数据url，是base64组成的图片的源数据、可以直接赋值给图片的src属性。

5）图片的展示方式有三种：分别为file(文件流)、blob(本地流)、base64(二进制流)

四. 代码实现

1）通过van-uploader来获取图片

<van-field name="business_license" :rules="[{ required: true, message: '请上传图片' }]"><template #input><van-uploader:max-size="3000 * 1024"@oversize="onOversize":after-read="afterReadLicense":before-delete="deleteLicense"v-model="form.licenseArray":max-count="1"/></template>
</van-field>

    //获取上传图片大小，进行压缩处理compressImg (file) {let quality = 1if (file.file.size / (1024 * 1024) > 1) {quality = 1 / Math.ceil(file.file.size / (1024 * 1024)) // 默认到1m以下}quality = quality / 2 // 默认质量减半（超过1m的图片，默认质量为500k）var that = thisreturn new Promise(function (resolve, reject) {if (file == []) {reject(error)} else {if (that.isImageAutomaticRotation) {that.imgHandle(file.file, quality).then(res => {resolve(res)})} else {lrz(file.file, { quality: quality }).then(res => {resolve(res.base64)})}}})},// 这是图片上传压缩的核心所在，我们先使用CanvasRenderingContext2D.drawImage()方法将上传的图片文件在画布上绘制出来;// 再使用Canvas.toDataURL()将画布上的图片信息转换成base64(DataURL)格式的数据。imgHandle (file, quality) {return new Promise(function (resolve, reject) {let fileType = file.typelet imgResult = ''let reader = new FileReader()reader.readAsDataURL(file)reader.onload = function () {let img = new Image() //先创建图片对象img.src = this.resultlet canvas = document.createElement('canvas')let ctx = canvas.getContext('2d')img.onload = function () { //图片加载完后// 做适配let width = 500if (img.width < 500) {width = img.width}canvas.width = widthcanvas.height = (img.height / img.width) * widthctx.drawImage(img, 0, 0, canvas.width, canvas.height)  //绘制图像；把大图片画在一张小画布上，压缩就这么实现了// 返回base64//quality表示导出的图片质量,只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92imgResult = canvas.toDataURL(fileType, quality)resolve(imgResult)// 这时可能后端要求我们传文件格式图片 base64转Blob// const blobImg = that.converrVase64UrlToBlob(imgResult , fileType)// resolve(blobImg)}}reader.onerror = function (error) {reject(error)}})},// base64转BlobconverrVase64UrlToBlob (base64, mimeType) {// mimeType 图片类型，例如 mimeType='image/png'const bytes = window.atob(base64.split(',')[1]) // atob方法用于解码base64// 创建一个长度为 bytes.length 的 buffer(一个二进制文件), 它会分配一个 16 字节（byte）的连续内存空间，并用 0 进行预填充。const ab = new ArrayBuffer(bytes.length)// Uint8Array —— 将 ArrayBuffer 中的每个字节视为 0 到 255 之间的单个数字（每个字节是 8 位）。这称为 “8 位无符号整数”。const ia = new Uint8Array(ab)for (let i = 0; i < bytes.length; i++) {// 更改里面的初始化内容ia[i] = bytes.charCodeAt(i)}// 创建blob格式数据，并传入二进制文件和文件原本类型return new Blob([ia], { type: mimeType })},// 上传前置处理// 将图片上传到服务端afterReadLicense (file) {this.compressImg(file).then(res => {let formData = new FormData()formData.append('m_pic', res)  //append方法往formData里添加数据formData.append('token', sessionStorage.getItem('token'))console.log(formData.get('m_pic'), 'm_pic') //只能通过get方法查看添加的m_pic//请求接口，上传图片indexApi.uploadImg(formData).then(response => {if (response.data.code === 200) {this.form.business_license = response.data.data.url //赋值} else {this.$toast.fail(response.data.message)}}).catch(error => {console.log(error)})})},

// 封装的上传图片接口uploadImg (val) {return formRequest({url: 'merchant/upload_img',method: 'post',data: val,headers: {'Content-Type': 'multipart/form-data'}})},

注意：
在实际开发中，我们要不要把图片转化为FormData形式上传到服务端，这就看具体的业务需要了。
我们还可以把canvas压缩过的图片，通过axios请求 URL，并通过FormData附带额外的参数，上传到阿里云oss，会返回一个url，就是我们上传到阿里云的图片地址；然后前端拼成一个图片 url 用于from表单提交上传。

学习过程中参考了其他文章：
浅析图片上传及canvas压缩的流程（canvas图片压缩）
Canvas怎么实现上传并压缩图片
vue + elementUi + upLoadIamge组件 上传文件到阿里云oss

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/143813.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

JS前端图片压缩上传-纯js

JS前端图片压缩上传-纯js

JS前端图片压缩上传-纯js 最近在做一个手机端的图片上传&#xff0c;写了一个比较符合自己要求的方法&#xff0c;可供参考 在做这个功能模块时&#xff0c;我遇到了以下问题&#xff0c;都花费了大量时间&#xff1a; 1. 不知道怎么压缩图片&#xff0c;&#xff08;代码和…
阅读更多...
JS前端图片压缩上传

JS前端图片压缩上传

JS前端图片压缩上传重点知识 最近在做一个手机端的图片上传&#xff0c;写了一个比较符合自己要求的方法&#xff0c;可供参考 在做这个功能模块时&#xff0c;我遇到了以下问题&#xff0c;都花费了大量时间&#xff1a; 1. 不知道怎么压缩图片&#xff0c;&#xff08;代码…
阅读更多...
图片纯前端JS压缩的实现

图片纯前端JS压缩的实现

一、功能体验 先看demo&#xff1a;使用canvas在前端压缩图片并上传demo 如下截图&#xff1a; 点击文件选择框&#xff0c;我们不妨选一张尺寸比较大的图片&#xff0c;例如下面这种2M多的钓鱼收获照&#xff1a; 于是图片歘歘歘地传上去了&#xff1a; 此时我们点击最终…
阅读更多...
JavaScript 图像压缩

JavaScript 图像压缩

JavaScript 可以使用类似于 canvas 和 web workers 来实现图像压缩。 使用 canvas&#xff0c;可以将图像绘制到 canvas 上&#xff0c;然后使用 canvas 提供的 toBlob() 或 toDataURL() 方法将其转换为不同格式的图像。在这些方法中指定图像质量参数即可实现压缩。 使用 web…
阅读更多...
英文论文（sci）解读复现【NO.11】一种先进的基于深度学习模型的植物病害检测：近期研究综述

英文论文（sci）解读复现【NO.11】一种先进的基于深度学习模型的植物病害检测：近期研究综述

此前出了目标检测算法改进专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读发表高水平学术期刊中的 SCI论文&a…
阅读更多...
如何自己制作简历模板？简历在线制作的方法介绍

如何自己制作简历模板？简历在线制作的方法介绍

找工作时好看并有意义的简历是十分重要的事儿&#xff0c;如何制作一份出色的简历&#xff0c;在漫天的简历中脱颖而出呢&#xff1f;如何自己制作简历模板&#xff1f;今天七分简历--简历在线制作就来给大家介绍方法吧。 1.选用正确的简历模板 所谓正确的简历模板&#xff0c;…
阅读更多...
怎么从手机上下载应聘简历模板？个人简历如何从手机做？

怎么从手机上下载应聘简历模板？个人简历如何从手机做？

​当我们找工作时&#xff0c;一般都会先准备一份应聘简历&#xff0c;当我们投递简历或者面试时都会用到&#xff0c;那么如果想要用手机来制作一份简历时&#xff0c;该如何操作呢&#xff1f;想要制作简历&#xff0c;那么首先要下载一份自己喜欢的简历模板&#xff0c;会让…
阅读更多...
手机怎么做个人简历？多行业简历模板自由选择

手机怎么做个人简历？多行业简历模板自由选择

如何利用手机来制作简历呢&#xff1f;现在找工作的时候&#xff0c;大多会使用手机来查看各种招聘app软件的信息来选择自己喜欢的工作。那么为了能够更好的获取面试的机会&#xff0c;那么准备一份优质的个人简历是必不可少的&#xff0c;那么从手机上如何下载一个精美简历模板…
阅读更多...
简历怎么制作？简历制作的步骤是什么？

简历怎么制作？简历制作的步骤是什么？

制作简历最基础的工作就是先了解自己&#xff0c;知道自己的兴趣爱好和职业特长是什么&#xff0c;明确自己以后发展的方向&#xff0c;以此作为依据来制作简历。一份优秀的简历&#xff0c;一般分为以下6个部分。 1、基础信息 只需要介绍求职者的个人信息&#xff0c;如&…
阅读更多...
简历编辑导出工具（类似wps简历助手）

简历编辑导出工具（类似wps简历助手）

目前支持简历的编辑&#xff0c;导出&#xff0c;模块化&#xff0c;顺序调整&#xff0c;导出样式选择&#xff0c;完成进度等功能&#xff0c;已经完全可以满足简历编辑的基本需求 在线体验地址&#xff1a;需要的可以私信我&#xff0c;避免网站被攻击 一.项目架构 前端&a…
阅读更多...
wps怎么免费导出简历_WPS表格办公—一键添加简历模板

wps怎么免费导出简历_WPS表格办公—一键添加简历模板

我们在利用WPS文字与Word文字进行日常办公时&#xff0c;经常需要输入各种各样文档&#xff0c;当我们毕业季需要面试的时候&#xff0c;一份干净简洁的简历就必不可少了&#xff0c;那么对于WPS小白来说&#xff0c;制作一份简历就太难了&#xff0c;没关系&#xff0c;WPS为大…
阅读更多...
wps怎么免费导出简历_简历模板免费下载wps手机，简历模板免费下载wps可编辑

wps怎么免费导出简历_简历模板免费下载wps手机，简历模板免费下载wps可编辑

现在&#xff0c;无论您在哪里工作&#xff0c;都需要自己准备一份简历。履历代表一个人的形象。拥有良好的履历是踏脚石。只要您可以在一张简历中精简一下您的72种变化&#xff0c;就可以帮助您敲开雇主的门。如果您拥有出色的技能&#xff0c;却不知道如何向他人展示它&#…
阅读更多...
WPS简历模板的图标怎么修改_个人简历模板集锦，简历自我评价怎么写？

WPS简历模板的图标怎么修改_个人简历模板集锦，简历自我评价怎么写？

个人简历是自己学习生活的简短集锦&#xff0c;也是求职者自我评价和认定的主要材料。它是一扇窗户&#xff0c;能使用人单位通过它了解到求职者的部分情况&#xff0c;也能激起用人单位与求职者进一步接触的浓厚兴趣。关注——简历通&#xff0c;海量模板任你挑选。如若求职者…
阅读更多...
软件测试简历，别再做无用的简历了

软件测试简历，别再做无用的简历了

简历是你进入面试的敲门砖&#xff0c;也是留给意向公司的第一印象&#xff0c;所以这个很重要&#xff0c;必须在这上面做足了文章&#xff0c;一份优秀的面试简历是整个面试成败的重中之重&#xff0c;我们会详细分析如何准备简历才能保证简历不被刷掉。 简历通常有这几部分…
阅读更多...
求职简历这样写，轻松搞定面试官

求职简历这样写，轻松搞定面试官

如果你是从网上投的简历&#xff0c;那么必然会经过 HR 的筛选&#xff0c;一张简历 HR 可能也就花 10 秒钟看一下&#xff0c;就会决定你这一关是成功还是失败。 就算你通过了筛选&#xff0c;后面的面试中&#xff0c;面试官也会根据你的简历来判断你究竟是否值得他花费很多…
阅读更多...
WPS简历模板的图标怎么修改_简历无话可说怎么办？复试、调剂简历模板分享！...

WPS简历模板的图标怎么修改_简历无话可说怎么办？复试、调剂简历模板分享！...

文 | 果哥 槟果考研原创(ID&#xff1a;bgky666) 小伙伴们&#xff0c;这段时间准备复试简历了吗&#xff1f;今天文章的内容是手把手教你制作复试简历&#xff0c;文末也给大家附了复试、调剂简历模板&#xff01; 1 复试简历内容 1 个人基本情况 主要包括&#xff1a;姓名、性…
阅读更多...
如何用计算机制作个人简历,制作个人简历的模板（电脑个人简历制作步骤）

如何用计算机制作个人简历,制作个人简历的模板（电脑个人简历制作步骤）

简历是我们求职过程中的一把钥匙&#xff0c;很多应届毕业生都做不好简历&#xff0c;那么今天就来教大家用Excel快速制作简历。 一、简历框架 打开Excel表格&#xff0c;选中7行23列&#xff0c;在【开始】选项卡下方&#xff0c;选择所有框线&#xff1b;然后点击【视图】&am…
阅读更多...
计算机word简历制作教程,用word制作个人简历的方法

计算机word简历制作教程,用word制作个人简历的方法

word中经常会被使用来制作个人简历&#xff0c;利用word制作个人简历具体该如何操作呢?下面是由学习啦小编分享的用word制作个人简历的方法&#xff0c;以供大家阅读和学习。 用word制作个人简历的方法(一) 步骤1&#xff1a;首先打开word&#xff0c;点击插入选项&#xff0c…
阅读更多...
WPS简历模板的图标怎么修改_指导|让疫情之下的应届生，求职简历脱颖而出

WPS简历模板的图标怎么修改_指导|让疫情之下的应届生，求职简历脱颖而出

2020年的开局有些艰难。受疫情来袭的影响&#xff0c;企业复工时间延迟、春季开学时间延迟、部分地区高校研究生复试安排也被推迟……许多大学生或许可以暂时在家做条咸鱼&#xff0c;但是对于应届毕业的同学来讲&#xff0c;时间已经不允许他们佛系下去了。要知道过去每年的“…
阅读更多...
简历模板

简历模板

版权声明&#xff1a;本文为博主原创文章&#xff0c;遵循 CC 4.0 BY 版权协议&#xff0c;转载请附上原文出处链接和本声明。 本文链接&#xff1a; https://blog.csdn.net/qq_35190492/article/details/103761746 有一线大厂面试点思维导图&#xff0c;也整理了很多我的文档…
阅读更多...
最新文章

Copyright @ 2022~2023