vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

一、前言

  三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习。

  图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式 前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式 前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期对于很多开发人员需要有个适应的过程,特别是初中级的前端处理业务逻辑方面的能力比较欠缺),二则提升用户体验。今天分享下在项目开发中写的的图片上传 vue组件。

二、处理问题

  这里用h5做图片上传考虑到浏览器支持的问题,这里考虑的场景是在做webapp的时候

  1.移动web图片上传还包括拍摄上传,但是在移动端会出现拍摄的照片会旋转,处理这个问题需要得到图片旋转的情况,可以用exif.js来获取,具体可以参看文档

  2.图片压缩

  3.旋转

三、代码

1组件代码

<template>
    <div>
        <input type="file" style="display: none;" id="img-upload" multiple accept="image/*" @change="uploadImg($event)"/>
    </div>
</template>
<script>
    import EXIF from ‘../../../Resource/Global/Js/exif‘
    export default{
        name:"image-html5-upload",
        props:{
            imgArr:{
                type:Array,
                twoWay: true,
                default:Array
            },
            imgNumLimit:{//一次最多可以上传多少张照片
                type:Number,
                default:4
            }
        },
        methods:{
            "uploadImg": function(e){
                let tag = e.target;
                let fileList = tag.files;
                let imgNum = fileList.length;
                let _this = this;
                _this.imgArr = [];//图片数据清零
                if(this.imgArr.length + imgNum > this.imgNumLimit){
                    alert(‘一次最多上传‘+this.imgNumLimit+‘张图片!‘);
                    return;
                }
                var Orientation;
                for(let i=0;i<imgNum;i++){
                    EXIF.getData(fileList[i], function(){
                        Orientation = EXIF.getTag(fileList[i], ‘Orientation‘);
                    });
                    let reader = new FileReader();
                    reader.readAsDataURL(fileList[i]);
                    reader.onload = function(){
                        var oReader = new FileReader();
                        oReader.onload = function(e) {
                            var image = new Image();
                            image.src = e.target.result;
                            image.onload = function() {
                                var expectWidth = this.naturalWidth;
                                var expectHeight = this.naturalHeight;
                                if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
                                    expectWidth = 800;
                                    expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
                                } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
                                    expectHeight = 1200;
                                    expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
                                }
                                var canvas = document.createElement("canvas");
                                var ctx = canvas.getContext("2d");
                                canvas.width = expectWidth;
                                canvas.height = expectHeight;
                                ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
                                var base64 = null;
                                //修复ios上传图片的时候 被旋转的问题
                                if(Orientation != "" && Orientation != 1){
                                    switch(Orientation){
                                        case 6://需要顺时针(向左)90度旋转
                                            _this.rotateImg(this,‘left‘,canvas);
                                            break;
                                        case 8://需要逆时针(向右)90度旋转
                                            _this.rotateImg(this,‘right‘,canvas);
                                            break;
                                        case 3://需要180度旋转
                                            _this.rotateImg(this,‘right‘,canvas);//转两次
                                            _this.rotateImg(this,‘right‘,canvas);
                                            break;
                                    }
                                }
                                base64 = canvas.toDataURL("image/jpeg", 0.8);
                                if(fileList[i].size / 1024000 > 1){
                                    _this.imgScale(base64, 4)
                                }else{
                                    _this.imgArr.push({"src": base64});
                                }
                                console.log(JSON.stringify(_this.imgArr));
                            };
                        };
                        oReader.readAsDataURL(fileList[i]);
                    }
                }
            },
            "imgScale": function(imgUrl,quality){
                let img = new Image();
                let _this = this;
                let canvas = document.createElement(‘canvas‘);
                let cxt = canvas.getContext(‘2d‘);
                img.src = imgUrl;
                img.onload = function(){
                    //缩放后图片的宽高
                    let width = img.naturalWidth/quality;
                    let height = img.naturalHeight/quality;
                    canvas.width = width;
                    canvas.height = height;
                    cxt.drawImage(this, 0, 0, width, height);
                    _this.imgArr.push({"src": canvas.toDataURL(‘image/jpeg‘)});
                }
            },
            "rotateImg":function (img, direction,canvas) {//图片旋转
                var min_step = 0;
                var max_step = 3;
                if (img == null)return;
                var height = img.height;
                var width = img.width;
                var 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);
                }
                var degree = step * 90 * Math.PI / 180;
                var 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;
                }
            }
        }
    }
</script>

2.使用方法

<template>
    <div>
        <div class="album-img-list">
            <ul>
                <li v-for="img in imgList"><div class="album-bg-img"><img  :src=‘img.src‘> </div></li>

            </ul>
        </div>
        <div class="album">
            <label for="img-upload">上传照片</label>
                <image-html5-upload :img-arr.sync="imgList"></image-html5-upload>
        </div>
    </div>
</template>

本文版权归作者(谢俊)和博客园所有,欢迎转载,转载请标明出处。

原文地址:http://www.cnblogs.com/net-xiejun/

微信开发群

完整源码下载:https://github.com/xiejun-net/weixin

公众账号:

时间: 2024-10-17 18:25:25

vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理的相关文章

图片上传压缩 Thinkphp

图片上传压缩 待完成 import('ORG.Net.UploadFile'); $upload = new UploadFile(); $upload->maxSize = 4194304; $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg'); $upload->savePath = 'Public/Mxun/vote/'; //略所图 $upload->thumb = true; $upload->thumbTy

H5 图片上传

1.h5 图片异步上传 (1) 异步上传input触发onchange事件的时候,就把图片上传至服务器.后台可能会返回图片的链接等信息,前台可以把图片信息展示给用户看. (2) 另一种情况可能需要前台自己重写提交(如下图): 显示图片的时候,添加一个type='hidden'的input框,用来存后台需要提交的东西(后台会返回,只需要用input存起来) 2.h5 图片同步上传 (1) 同步上传.把图片获取,预览出来.然后在提交服务器 (代码) /** * tinyImgUpload * @pa

HTML5 开发APP(打开相册以及图片上传)

我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图 基本功能是点击按钮就上传图片,然后获取到图片在服务器上的路径. 首先我们要打开相册,使用gallery模块管理系统相册来打开相册 mui('#shangchuan')[0].addEventListener('tap',function(){ chooseImg(); }) function chooseIm

h5图片上传预览

项目中常用到文件上传预览功能,整理一下:如果不想使用 type="file" 的默认样式,可以让其覆盖在一个按钮样式上边,设其透明度为0,或者使用Label关联 html <div> <div class="figure-box" id="figure_box"></div> <input type="file" id="imgUploadBtn" /> &l

h5图片上传简易版(FileReader+FormData+ajax)

一.选择图片(input的file类型) <input type="file" id="inputImg"> 1. input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口:file类型的input会有files属性,保存着文件的相关信息. 2. input.files是一个数组,由传入的file对象组成.每个file对象包含以下属性: lastModified:数值,表示最近一次修改时间的毫秒数: lastModifiedDate

thinkphp开发系列-ueditor1.43修改图片上传路径

最近用的ueditor1.43感觉分厂不错,但是如何能自定义ueditor的上传路径呢 然后进入php目录 打开后参考下图修改

Java图片上传压缩处理

所需要的jar包在:\jdk1.7.0_25\jre\lib\rt.jar里面 package util; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import javax.ima

图片上传压缩方法,测试过,失真度能接受

public Bitmap revitionImageSize(String path) throws IOException { BufferedInputStream in = new BufferedInputStream(new FileInputStream(new File(path))); BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; /

图片上传压缩校正

import Exif from 'exif-js'; /* eslint-disable func-names */ function ImageProcess(file, callback) { let Orientation; // 去获取拍照时的信息,解决拍出来的照片旋转问题 Exif.getData(file, function () { Orientation = Exif.getTag(this, 'Orientation'); }); // console.log("Orient