vue項(xiàng)目拍照或上傳圖片并實(shí)現(xiàn)轉(zhuǎn)化為base64格式

更新時(shí)間：2023年11月17日 16:28:21 作者：鑰零零

這篇文章主要介紹了vue項(xiàng)目拍照或上傳圖片并實(shí)現(xiàn)轉(zhuǎn)化為base64格式方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue項(xiàng)目拍照或上傳圖片并轉(zhuǎn)化為base64格式

需求

vue項(xiàng)目中，H5點(diǎn)擊按鈕觸發(fā)上傳圖片或拍照上傳，上傳的圖片使用base64位傳輸?shù)胶笈_(tái)，最終實(shí)現(xiàn)身份證拍照識(shí)別功能。

實(shí)現(xiàn)過(guò)程

（1）設(shè)置一個(gè)按鈕和一個(gè)隱藏的input，點(diǎn)擊按鈕是觸發(fā)按鈕上傳圖片和拍照功能

<div>
   <input id="filePhoto" type="file"  ref="file" accept="image/*" hidden @change="onInputChange($event)" /> 
    <div @click="triggerUpload">
         <img src="@res/images/scenicSpots/add-circle-white.png" />
         <span>上傳圖片</span>
     </div>
</div>

（2）將上傳的圖片轉(zhuǎn)化為base64格式

//點(diǎn)擊圖片觸發(fā)文件上傳
triggerUpload() {
   $("#filePhoto").click();
},
//文件上傳到瀏覽器觸發(fā)事件
onInputChange(el) {
  var self = this;
  var file = el.target.files[0];
  console.log(file)
  var type = file.type.split('/')[0];
  if(type === 'image') {
    //將圖片轉(zhuǎn)化為base64
    var reader = new FileReader();
    reader.readAsDataURL(file); // readAsDataURL方法可以將上傳的圖片格式轉(zhuǎn)為base64,然后在存入到圖片路徑,
    reader.onload = function () {
        var image = reader.result;  // image即base64格式，后面調(diào)用后端請(qǐng)求傳入image
    }
  }else{
    self.$toast.showToast('請(qǐng)正確上傳圖片');
  }

},

vue圖片上傳組件，包括base64、二進(jìn)制上傳及圖片旋轉(zhuǎn)

最近做的vue項(xiàng)目中好多涉及到圖片上傳的，為了方便開(kāi)發(fā)就進(jìn)行了相關(guān)總結(jié)。

因?yàn)楣居泻枚囗?xiàng)目，并且使用的是不同后臺(tái)語(yǔ)言，有的需要通過(guò)base64字符串傳遞，有的需要轉(zhuǎn)換成二進(jìn)制數(shù)據(jù)流傳遞，有的可以直接使用from表單進(jìn)行提交。后來(lái)有涉及到ios上拍照?qǐng)D片會(huì)旋轉(zhuǎn)的問(wèn)題，也一并進(jìn)行了封裝。

好了廢話不多說(shuō)直接上代碼。

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8" />
    <title>圖片上傳</title>
</head>
 
<body>
    <form id="upImg">
        <input type='file' accept="image/*" name="avatar" placeholder="" id="img" />
    </form>
    <img src="" alt="" id='preImg'>
    <!-- 需要引入exif.js插件 -->
    <script src='./exif.js'></script>
    <script>
        
        var domImg = document.querySelector('#img')
        //添加DOM事件
        domImg.onchange = function upLoadImg(e, type) {
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length) return;
            if (files[0].type.indexOf("image") < 0) {
                alert("上傳了非圖片");
                return;
            }
            if (files[0].size > 5 * 1000000) {
                alert("上傳文件過(guò)大");
                return;
            }
            
            // 圖片壓縮成base64
            compress(e.target, (base64, imgFile) => {
                var upImage = new FormData();
                upImage.append("fileName", imgFile.name);
                var blob = convertImgDataToBlob(base64);
                upImage.append("file", blob);
 
                //上傳圖片接口
                this.$http({
                    method: "POST",
                    url: interfaced.aliYun,
                    body: upImage
                }).then(
                    res => {
                        console.log(res);
                    },
                    err => {
                        console.log(err);
                    }
                );
            });
            
            //將base64轉(zhuǎn)換成二進(jìn)制函數(shù)
            function convertImgDataToBlob(base64Data) {
                var format = "image/jpeg";
                var base64 = base64Data;
                var code = window.atob(base64.split(",")[1]);
                var aBuffer = new window.ArrayBuffer(code.length);
                var uBuffer = new window.Uint8Array(aBuffer);
                for (var i = 0; i < code.length; i++) {
                    uBuffer[i] = code.charCodeAt(i) & 0xff;
                }
                var blob = null;
                try {
                    blob = new Blob([uBuffer], {
                        type: format
                    });
                } catch (e) {
                    window.BlobBuilder =
                        window.BlobBuilder ||
                        window.WebKitBlobBuilder ||
                        window.MozBlobBuilder ||
                        window.MSBlobBuilder;
                    if (e.name == "TypeError" && window.BlobBuilder) {
                        var bb = new window.BlobBuilder();
                        bb.append(uBuffer.buffer);
                        blob = bb.getBlob("image/jpeg");
                    } else if (e.name == "InvalidStateError") {
                        blob = new Blob([aBuffer], {
                            type: format
                        });
                    } else {}
                }
                return blob;
            }
            
            //將圖片壓縮成base64函數(shù)
            function compress(event, callback) {
                //圖片方向角
                var Orientation = null;
                var file = event.files[0];
                var reader = new FileReader();
 
                //獲取照片方向角屬性，用戶旋轉(zhuǎn)控制
                EXIF.getData(file, function() {
                    EXIF.getAllTags(this);
                    Orientation = EXIF.getTag(this, 'Orientation');
                });
 
                reader.onload = function (e) {
                    var image =document.createElement("img");
                    image.onload = function () {
                        //使用canvas重繪圖片
                        var canvas = document.createElement("canvas");
                        var x = this.width;
                        var y = this.height;
                        this.width = 375 * 2;
                        this.height = this.width / x * y;
                        var width = this.width;
                        var height = this.height;
                        canvas.width = this.width;
                        canvas.height = this.height;
                        var context = canvas.getContext("2d");
                        context.clearRect(0, 0, width, height);
                        //對(duì)圖片進(jìn)行旋轉(zhuǎn)
                        switch (Orientation) {
                            case 3:
                                context.rotate(180 * Math.PI / 180);
                                context.drawImage(this, -this.width, -this.height, this.width, this.height);
                                break;
                            case 6:
                                context.rotate(90 * Math.PI / 180);
                                context.drawImage(this, 0, -this.width, this.height, this.width);
                                break;
                            case 8:
                                context.rotate(270 * Math.PI / 180);
                                context.drawImage(this, -this.height, 0, this.height, this.width);
                                break;
                            case 2:
                                context.translate(this.width, 0);
                                context.scale(-1, 1);
                                context.drawImage(this, 0, 0, this.width, this.height);
                                break;
                            case 4:
                                context.translate(this.width, 0);
                                context.scale(-1, 1);
                                context.rotate(180 * Math.PI / 180);
                                context.drawImage(this, -this.width, -this.height, this.width, this.height);
                                break;
                            case 5:
                                context.translate(this.width, 0);
                                context.scale(-1, 1);
                                context.rotate(90 * Math.PI / 180);
                                context.drawImage(this, 0, -this.width, this.height, this.width);
                                break;
                            case 7:
                                context.translate(this.width, 0);
                                context.scale(-1, 1);
                                context.rotate(270 * Math.PI / 180);
                                context.drawImage(this, -this.height, 0, this.height, this.width);
                                break;
                            default:
                                context.drawImage(this, 0, 0, this.width,this.height);
                        }
 
                        var quality = 0.9; //壓縮程度
                        var data;
                        var result;
                        var length;
                        //控制圖片上傳的大小，注意若圖片過(guò)大 ajax上傳的時(shí)候會(huì)出現(xiàn)參數(shù)為null的錯(cuò)誤
                        //這里如果圖片過(guò)大會(huì)將圖片壓縮程度放大
                        do {
                            data = canvas.toDataURL("image/jpeg", quality);
                            length = data.length;
                            result = (length / 4 * 3 + 1023) / 1024; //計(jì)算壓縮后圖片的大小
                            quality -= 0.05;
                        } while (result > 450);
                        //data：base64
                        document.querySelector('#preImg').src = data
                        callback(data, event.files[0]);
                    };
                    image.src = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        }
    </script>
</body>
 
</html>