1.封装压缩图片方法


methods:{compress(img) {var url = null;var canvas = document.createElement("canvas");var scale = img.height / img.width;canvas.width = 720;canvas.height = 720 * scale;var ctx = canvas.getContext("2d");ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(img, 0, 0, canvas.width, canvas.height);url = canvas.toDataURL("image/jpeg");return url; //这里返回的是一个base64}
}

2.封装base64转二进制方法


methods:{dataURItoBlob(dataURI) {let byteString = window.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 window.Blob([ab], {type: mimeString})}
}

3.实际应用

    add_img(event) {let file = event.target.files[0]if (/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(event.target.value)) {this.uploadLoading=truelet reader = new FileReader()let self = thisreader.readAsDataURL(file)let img = new Image;reader.onload = function (e) {img.src = this.result;img.onload = function () {let base = e.target.resultlet fileItem = fileif( self.isCompress){ //根据自己的需求判断是否需要压缩base = self.compress(img)  //这里调用此前封装的要是图片方法，返回的是一个base64.fileItem =  self.dataURItoBlob(base) //在这里将base64转为二进制.}let formdata = new window.FormData()formdata.append('file', fileItem)utilsApi.upload(formdata).then(res => {console.log('上传成功')self.uploadLoading=false}).catch(e => {event.target.value = ''self.uploadLoading=false});}}} else {this.$notify.error({title: '上传图片错误',message: '请上传gif|jpg|jpeg|png|GIF|JPG|PNG格式图片'})}}

使用js压缩图片后转为二进制上传相关推荐

axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目基于Vue.js+axios ...
thinkphp6,压缩图片内存，并上传到oss,质量影响不大。
首先安装官方推荐的上传云端插件 Thans / thinkphp-filesystem-cloud 1采用composer安装 composer require thans/thinkphp-file ...
jquery.uploadify 限制上传数量删除图片后无法再次上传
限制数量: 增加配置项 uploadLimit 值为限制上传的数量处理方法: //在删除的处理程序中添加 //更新已上传成功的文件数量 var swfu = $('#multi_upload').d ...
js 将图片置灰_JS 上传一张图片让其部分变灰色
是让图片全部变成灰色还是部分变成灰色?前者直接传一个灰色图片就好,后者获取要变灰的部分,然后直接像素值相减就可 ` if(this.imageStatus.invert){ var w = dest_ ...
掌握JS压缩图片，这一篇就够了
前言公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传 npm ,可通过 ...
了解 JS 压缩图片，这一篇就够了
作者:wuwhs https://segmentfault.com/a/1190000023486410 前言公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动 ...
js 导出pdf上传至oss_前端上传图片到oss，压缩图片后上传至oss（补充图片文件旋转90度问题）...
上传图片如果过大,等待时间过长体验不好,于是使用js压缩图片再上传,无关图片清晰度. /** * 压缩图片 * @param file 图片文件 * @param callback 回调函数,压缩完要 ...
js压缩图片（ajax上传）
js压缩图片(ajax.form提交)(pc.mobile测试ok)(Java) 1. 目的: 上传先进行图片压缩,然后再把压缩后的图片上传到服务器. 2. 思路: 上传前用js对图片压缩,把利用ca ...
js 压缩图片及ajax上传图片
js 压缩图片及ajax上传图片 js压缩图片 ajax 上传文件最近做的一个微信活动中需要用到图片上传功能,具体就是用户通过手机拍照上传图片来参与活动.在测试的过程中我们发现上传的图片非常大.我们 ...

使用js压缩图片后转为二进制上传

1.封装压缩图片方法

2.封装base64转二进制方法

3.实际应用

使用js压缩图片后转为二进制上传相关推荐

最新文章

热门文章