vue2.X + HTML5 plus 拍照和調用設備相冊 另附 圖片轉base64和壓縮圖片方法

HTML5 部分

<button @click="tesCamera()" type="button" :disabled="isshStatus">按鈕ces</button>　　

　　*注意：這裏值得注意的是，button標籤中必定要寫type屬性等於button,否則HTML5 plus 會識別不了

JS部分

tesCamera(){
    let that = this;
    //調用原生系統彈出按鈕選擇框
    let page = null;
    page={ 
        imgUp:function(){ 
            plus.nativeUI.actionSheet(
                {cancel:"取消",buttons:[ 
                {title:"拍照"}, 
                {title:"從相冊中選擇"} 
            ]}, function(e){
                //1 是拍照  2 從相冊中選擇 
                switch(e.index){ 
                    case 1:
                    getImage();
                    break; 
                    case 2:
                    appendByGallery();
                    break; 
                    default:
                    break;    
                } 
            }); 
        } 
    }
    // 拍照函數
    function getImage(){
        let cmr = plus.camera.getCamera();
        cmr.captureImage(function(p){
            plus.io.resolveLocalFileSystemURL(p, function(entry){
                var path = entry.toLocalURL();
                //文件傳轉base64方法
                that.imgPreviewnew(path, _typedata);
            }, function(e){
                console.log("讀取拍照文件錯誤："+e.message);
            });
        }, function(e){
            console.log("讀取拍照文件錯誤："+e.message);
        }, {filename:'_doc/camera/',index:1});
    }

    //選擇相片文件
    function appendByGallery(){
        plus.gallery.pick(function(path){
            //文件傳轉base64方法
            that.imgPreviewnew(path, _typedata);
        });
    }
    // 彈出系統選擇按鈕框  
    page.imgUp();
}

(1).圖片轉base64函數

imgPreviewnew(file, type){
    let that = this;
    let Orientation;
    let img = new Image();
    img.src = file;
    img.onload = function () {
        //壓縮圖片函數-輸出base64
        let data = that.compress(img,Orientation);
    }
}

 

(2).圖片壓縮函數

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;
}

若是函數有誤請在下方評論留言，謝謝^_^