vue2移动端上传,预览,压缩图片,解决拍照旋转问题
https://github.com/exif-js/exif-js
http://code.ciaoca.com/javascript/exif-js/demo/
因为最近遇到个移动端上传头像的需求,上传到后台的数据是base64位,其中为了提高用户体验,把比较大的图片用canvas进行压缩之后再进行上传。在移动端调用拍照功能时,会发生图片旋转,为了解决这个问题引入了exif去判断拍照时的信息再去处理图片,这是个很好的插件。关于exif.js可以去他的GitHub上了解,这边直接npm install exif-js --save 安装,然后import一下就可以使用了。以下就是源码,可以直接使用。
- <template>
- <div>
- <div style="padding:20px;">
- <div class="show">
- <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div>
- </div>
- <div style="margin-top:20px;">
- <input type="file" id="upload" accept="image" @change="upload">
- <label for="upload"></label>
- </div>
- </div>
- </div>
- </template>
- <script>
- import Exif from 'exif-js'
- export default {
- data () {
- return {
- headerImage:'',picValue:''
- }
- },
- mounted () {
- },
- methods: {
- upload (e) {
- let files = e.target.files || e.dataTransfer.files;
- if (!files.length) return;
- this.picValue = files[0];
- this.imgPreview(this.picValue);
- },
- imgPreview (file) {
- let self = this;
- let Orientation;
- //去获取拍照时的信息,解决拍出来的照片旋转问题
- Exif.getData(file, function(){
- Orientation = Exif.getTag(this, 'Orientation');
- });
- // 看支持不支持FileReader
- if (!file || !window.FileReader) return;
- if (/^image/.test(file.type)) {
- // 创建一个reader
- let reader = new FileReader();
- // 将图片2将转成 base64 格式
- reader.readAsDataURL(file);
- // 读取成功后的回调
- reader.onloadend = function () {
- let result = this.result;
- let img = new Image();
- img.src = result;
- //判断图片是否大于100K,是就直接上传,反之压缩图片
- if (this.result.length <= (100 * 1024)) {
- self.headerImage = this.result;
- self.postImg();
- }else {
- img.onload = function () {
- let data = self.compress(img,Orientation);
- self.headerImage = data;
- self.postImg();
- }
- }
- }
- }
- },
- postImg () {
- //这里写接口
- },
- rotateImg (img, direction,canvas) {
- //最小与最大旋转方向,图片旋转4次后回到原方向
- const min_step = 0;
- const max_step = 3;
- if (img == null)return;
- //img的高度和宽度不能在img元素隐藏后获取,否则会出错
- let height = img.height;
- let width = img.width;
- let step = 2;
- if (step == null) {
- step = min_step;
- }
- if (direction == 'right') {
- step++;
- //旋转到原位置,即超过最大值
- step > max_step && (step = min_step);
- } else {
- step--;
- step < min_step && (step = max_step);
- }
- //旋转角度以弧度值为参数
- let degree = step * 90 * Math.PI / 180;
- let ctx = canvas.getContext('2d');
- switch (step) {
- case 0:
- canvas.width = width;
- canvas.height = height;
- ctx.drawImage(img, 0, 0);
- break;
- case 1:
- canvas.width = height;
- canvas.height = width;
- ctx.rotate(degree);
- ctx.drawImage(img, 0, -height);
- break;
- case 2:
- canvas.width = width;
- canvas.height = height;
- ctx.rotate(degree);
- ctx.drawImage(img, -width, -height);
- break;
- case 3:
- canvas.width = height;
- canvas.height = width;
- ctx.rotate(degree);
- ctx.drawImage(img, -width, 0);
- break;
- }
- },
- compress(img,Orientation) {
- let canvas = document.createElement("canvas");
- let ctx = canvas.getContext('2d');
- //瓦片canvas
- let tCanvas = document.createElement("canvas");
- let tctx = tCanvas.getContext("2d");
- let initSize = img.src.length;
- let width = img.width;
- let height = img.height;
- //如果图片大于四百万像素,计算压缩比并将大小压至400万以下
- let ratio;
- if ((ratio = width * height / 4000000) > 1) {
- console.log("大于400万像素")
- ratio = Math.sqrt(ratio);
- width /= ratio;
- height /= ratio;
- } else {
- ratio = 1;
- }
- canvas.width = width;
- canvas.height = height;
- // 铺底色
- ctx.fillStyle = "#fff";
- ctx.fillRect(0, 0, canvas.width, canvas.height);
- //如果图片像素大于100万则使用瓦片绘制
- let count;
- if ((count = width * height / 1000000) > 1) {
- console.log("超过100W像素");
- count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
- // 计算每块瓦片的宽和高
- let nw = ~~(width / count);
- let nh = ~~(height / count);
- tCanvas.width = nw;
- tCanvas.height = nh;
- for (let i = 0; i < count; i++) {
- for (let j = 0; j < count; j++) {
- tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
- ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
- }
- }
- } else {
- ctx.drawImage(img, 0, 0, width, height);
- }
- //修复ios上传图片的时候 被旋转的问题
- if(Orientation != "" && Orientation != 1){
- switch(Orientation){
- case 6://需要顺时针(向左)90度旋转
- this.rotateImg(img,'left',canvas);
- break;
- case 8://需要逆时针(向右)90度旋转
- this.rotateImg(img,'right',canvas);
- break;
- case 3://需要180度旋转
- this.rotateImg(img,'right',canvas);//转两次
- this.rotateImg(img,'right',canvas);
- break;
- }
- }
- //进行最小压缩
- let ndata = canvas.toDataURL('image/jpeg', 0.1);
- console.log('压缩前:' + initSize);
- console.log('压缩后:' + ndata.length);
- console.log('压缩率:' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
- tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
- return ndata;
- },
- }
- }
- </script>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- .show {
- width: 100px;
- height: 100px;
- overflow: hidden;
- position: relative;
- border-radius: 50%;
- border: 1px solid #d5d5d5;
- }
- .picture {
- width: 100%;
- height: 100%;
- overflow: hidden;
- background-position: center center;
- background-repeat: no-repeat;
- background-size: cover;
- }
- </style>
vue2移动端上传,预览,压缩图片,解决拍照旋转问题相关推荐
- java 图片上传 预览 demo_图片上传预览
[实例简介] 实现图片上传预览,可以增加新的空数组,并上传和替换.还有删除功能:提交的时候,还可以判断是否有空的img [实例截图] [核心代码] 613ddc50-96b8-4197-ba2e-1e ...
- Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- html 手机qq图片预览,模拟QQ心情图片上传预览示例
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- vue实战--vue+elementUI实现多文件上传+预览(word/PDF/图片/docx/doc/xlxs/txt)
需求 最近在做vue2.0+element UI的项目中遇到了一个需求:需求是多个文件上传的同时实现文件的在线预览功能.需求图如下: 看到这个需求的时候,小栗脑袋一炸.并不知道该如何下手,之前的实践项 ...
- 图片上传预览的几种方式,了解下?
图片上传预览场景基本处处可见,朋友圈发动态配图,身份验证及头像更新,莫过如斯. 原由 最近在研究twitter PC网站的时候,在个人中心的主页,设置个人的背景图的时候,发现twitter有个非常好的 ...
- php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- js实现图片上传预览及进度条
js实现图片上传预览及进度条 原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
- JAVA实现一个图片上传预览功能
这个小项目主要使用java实现了一个简单的图片上传预览功能,废话不多说,先上实现成果 ^ _ ^
最新文章
- Xilinx基于模型的设计工具—Model Composer
- 2021高考成绩一分段查询陕西省,2021年陕西高考一分一段表查询排名方法 成绩排名位次什么时候公布...
- 几种常见的CSS布局
- JavaScript 渐变效果
- centos7 kickstart 使用小结
- EMLO模板GeMedia媒体范儿[小梦修改尊享版]
- python文本进度条代码解释_python动态文本进度条的实例代码
- 【kibana】kibana 7.* 设置中文 汉化
- 对listView的理解
- java base64字符 转图片_JAVA实现图片与base64字符串之间的转换详解
- create session 参数介绍
- UI界面视觉设计之字体要素--安卓-ios-网页常用字体
- WPF界面样式学习及优化
- h5分享到新浪微博 php,h5分享图文链接到微博如何实现
- G6 3.1 线条的属性
- 亚马逊云科技帮助德比软件轻松应对爆发的增长
- vue 给圆遮盖物添加文字 高德地图_【高德地图开发4】---增加覆盖物setMapTextZIndex...
- 英语单词记忆的词根总结
- IMX6ULL鼠标光标显示到oled
- 高中毕业证计算机系,高中毕业证书,急
热门文章
- 中国网络安全法对德国公司的影响
- 2021-11-16 以太网
- 头条竞价php下单系统源码_PHP在线订单系统V8.0竞价单页网站源码 短信提醒+网银支付+支付宝...
- html布局(两列布局的常见方式)
- 示波器显示读取串口数据
- 怎么永久彻底关闭windows 10自动更新
- 等参元八节点matlab,平面四边形八节点等参元matlab程序.docx
- 深度神经网络(DNN)模型
- 树的存储结构一 (一些简单概念)
- X004---alteryx for Excel用户