美文网首页
2018-12-10

2018-12-10

作者: 瞳孔里的温柔你看得见不 | 来源:发表于2018-12-10 15:22 被阅读0次

    tesCamera(){

        let that =this;

        //调用原生系统弹出按钮选择框let page =null;

        page={

            imgUp:function(){

                plus.nativeUI.actionSheet(

                    {cancel:"取消",buttons:[

                    {title:"拍照"},

                    {title:"从相册中选择"}

                ]}, function(e){

                    //1 是拍照  2 从相册中选择 switch(e.index){

                        case1:

                        getImage();

                        break;

                        case2:

                        appendByGallery();

                        break;

                        default:

                        break;   

                    }

                });

            }

        }

        // 拍照函数function getImage(){

            let cmr = plus.camera.getCamera();

            cmr.captureImage(function(p){

                plus.io.resolveLocalFileSystemURL(p, function(entry){

                    varpath = 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();

    }

    图片转base64函数;

    imgPreviewnew(file, type){

        let that =this;

        let Orientation;

        let img =new Image();

        img.src = file;

        img.onload =function () {

            //压缩图片函数-输出base64let data = that.compress(img,Orientation);

        }

    }

    图片压缩函数

    compress(img,Orientation) {

      let canvas = document.createElement("canvas");

      let ctx = canvas.getContext('2d');

        //瓦片canvaslet 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){

          case6://需要顺时针(向左)90度旋转this.rotateImg(img,'left',canvas);

              break;

          case8://需要逆时针(向右)90度旋转this.rotateImg(img,'right',canvas);

              break;

          case3://需要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;

    }

    相关文章

      网友评论

          本文标题:2018-12-10

          本文链接:https://www.haomeiwen.com/subject/wgarhqtx.html