1.html中添加隐藏的input

<imgclass="input-img-wrap"v-on:click="imgClick()":src="fapiao"v-if="fapiao"/><div class="input-img-wrap" @click="imgClick" v-else><img src="../../assets/img/common/+_icon.png" alt="" /><span>上传图片</span></div><inputstyle="display: none;"type="file"id="uploadFile"accept="image/png,image/jpeg"v-on:change="readLocalFile()"
/>

2.压缩图片

核心代码：

1.FileReader将input中的图片本地url变为图片Base64编码。

var localFile = document.getElementById("uploadFile").files[0];

var reader = new FileReader();

reader.onerror

reader.readAsDataURL(localFile , 'UTF-8')

reader.onLoad(function(event) {

content = event.target.result;

})

2.通过Image赋值src，计算图片宽高创建同样宽高的canvas，然后将Image绘制到canvas上，通过canvas.toDataURL("image/jpg", rate)获得压缩的图片Base64数据

data() {return {fapiao: ""};
},
mounted() {vm = this;
},
methods: {imgClick: function() {document.getElementById("uploadFile").click();},//点击选中图片async readLocalFile() {var localFile = document.getElementById("uploadFile").files[0];var reader = new FileReader();var content;var compress = this.compress;reader.onload = function(event) {content = event.target.result;compress(content, 450, function(content0) {console.log("final=" + content0.length / 1024 + "KB");vm.fapiao = content0;});};reader.onerror = function() {alert("error");};reader.readAsDataURL(localFile, "UTF-8");},// 压缩图片compress: function(content, size, callback) {if (content.length <= size * 1024) {callback(content);return;}let canvas = document.createElement("canvas");let ctx = canvas.getContext("2d");let img = new Image();img.src = content;img.onload = function() {let width = img.width;let height = img.height;canvas.width = width;canvas.height = height;// 铺底色ctx.fillStyle = "#fff";ctx.fillRect(0, 0, width, height);ctx.drawImage(img, 0, 0, width, height);let rate = (1024 * size) / content.length;console.log("size=" + size + " rate=" + rate);console.log("**压缩前**" + content.length / 1024 + "KB");//进行压缩content = canvas.toDataURL("image/jpeg", rate);console.log("**压缩后**" + content.length / 1024 + "KB");callback(content);};}}

js手机端上传图片，带压缩图片相关推荐

html5手机端响应式图片相册幻灯片插件特效
html5手机端响应式图片相册幻灯片插件特效作品介绍 1.网页作品简介方面 :html5手机端响应式图片相册幻灯片插件特效 2.网页作品编辑方面:作品下载后可使用任意HTML编辑软件(例如:DW.H ...
手机端网页中图片之间出现白线的解决方法
手机端网页中图片之间出现白线的解决方法参考文章: (1)手机端网页中图片之间出现白线的解决方法 (2)https://www.cnblogs.com/syzdidi/p/9686463.html 备 ...
手机端网页设计尺寸,手机端网页设计图片尺寸
电脑网页的设计尺寸对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window XP常 ...
JS手机端移动端长按longtap事件
JS手机端移动端长按longtap事件移动端并没有所谓的longtap事件,即长按事件.但是,有时候会用到,只能借助touchstart.touchmove.touchend三个事件以及延迟setTi ...
（带手机端）美女图片美女写真网站模板性感美女图片分享网站源码
模板名称:(带手机端)美女图片美女写真网站性感美女图片分享网站该模板属于美女图片类.美女写真.图片分类企业都可使用这款模板使用范围极广,不仅仅局限于一类型的企业,你只需要把图片和产品内容换成你的, ...
zepto.js手机端开宝箱动画js特效
下载地址 zepto.js实现的手机端开宝箱动画特效 dd:
JS 手机端摇一摇苹果IOS13.3高版本处理
苹果IOS13.3高版本需要动作与方向授权以后才能进行摇一摇,授权过程必须有点击才能授权.在进入需要摇一摇的页面的时候可以进行授权,在进行提示点击我用的是手机端swal插件进行提示点击授权. 拒绝授 ...
手机端如何把图片传到php后台,android上传图片到PHP后台全过程
DB2离线和在线全备.增量备份及恢复的操作步骤 1.离线全备份 1).首先确保没有用户使用DB2: $db2 list applications for db sample 2).停掉数据库并重新启动 ...
js手机端图片弹出方法
1 $("img").click(function(){ //获取窗口可视大小 2 var width=$(window).width(); 3 var height=$(wind ...
手机端上传图片出现“没有应用可执行操作”
H5页面上传图片,在PC测试一切正确, 但是在手机端操作,微信浏览器和部分手机自带浏览会出现"没有应用可执行操作",无法弹出选择图片框.代码如下 <input style=& ...

js手机端上传图片，带压缩图片

1.html中添加隐藏的input

2.压缩图片

1.FileReader将input中的图片本地url变为图片Base64编码。

2.通过Image赋值src，计算图片宽高创建同样宽高的canvas，然后将Image绘制到canvas上，通过canvas.toDataURL("image/jpg", rate)获得压缩的图片Base64数据

js手机端上传图片，带压缩图片相关推荐

最新文章

热门文章