上传图片，图片过大压缩处理以及解决自拍时会出现图片横屏的bug修复、长按保存图片

js部分：
module.exports = {
    resize: function (file, callback, options) {
        //配置
        options = Object.assign({
            maxWidth: 1920,
            maxHeight: 1920
        }, options || {});

        var reader = new FileReader();
        reader.onload = function () {
            var imageData = this.result;
            //加载图片获取图片真实宽度和高度
            var image = new Image();
            image.src = imageData;
            image.onload = function () {
                // 获取图片旋转角度
                var orientation = 1
                EXIF.getData(image, function() {
                    orientation = EXIF.getTag(this, "Orientation");
                });

                var width = image.width;
                var height = image.height;
                var scale = Math.max(width / options.maxWidth, height / options.maxHeight);
                //宽度或高度计算
                if (scale > 1) {
                    var w = Math.round(width / scale);
                    var h = Math.round(height / scale);
                    //生成canvas
                    var canvas = document.createElement('canvas');
                    var ctx = window.ctx = canvas.getContext('2d');
                    ctx.save()
                    switch(orientation){
                        case 6:
                            console.log('需要顺时针（向左）90度旋转');
                            canvas.width = h;
                            canvas.height = w;
                            ctx.translate(canvas.width/2,canvas.height/2);
                            ctx.rotate(90 * Math.PI / 180)
                            ctx.drawImage(this, -w / 2, -h / 2, w, h);
                            break;
                        case 8:
                            console.log('需要逆时针（向右）90度旋转');
                            canvas.width = h;
                            canvas.height = w;
                            ctx.translate(canvas.width/2,canvas.height/2);
                            ctx.rotate(-90 * Math.PI / 180)
                            ctx.drawImage(this, -w / 2, -h / 2, w, h);
                            break;
                        default:
                            canvas.width = w;
                            canvas.height = h;
                            ctx.drawImage(this, 0, 0, w, h);
                            break
                    }
                    ctx.restore()
                    imageData = canvas.toDataURL('image/jpeg');
                }
                callback && callback(imageData);
            };
        };
        reader.readAsDataURL(file);
    },
    convertBase64UrlToBlob: function (urlData) {
        var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type: mime});
    }
}
页面引用:

import imageUtils from '../components/imageUtils'

mounted() {
  let self = this;
  let image = document.getElementById('image');
  this.cropper = new Cropper(image, {
      viewMode: 3,
      dragMode:'move',
      autoCropArea: 1,
      ready: function () {
          self.croppable = true;
      }
  });
},

change (e) {

    let files = e.target.files || e.dataTransfer.files;
    if (!files.length) return;
    let file = e.target.files[0];
    let type = file.type; //文件的类型，判断是否是图片
    let size = file.size; //文件的大小，判断图片的大小
    if (this.imgCropperData.accept.indexOf(type) == -1) {
        mui.toast('请上传JPG/JPEG/PNG格式的图片',1500)
        return false;
    }
    if(file) {
        this.file = file;
        imageUtils.resize(file,(data)=>{
            // 这里的this 指向reader
            this.url = data;
            this.isUpload = false;
            //每次替换图片要重新得到新的url
            if(this.cropper){
                this.cropper.replace(this.url);
            }
            document.getElementById("change").value ='';  //input 要清空，不然上传同一张会有bug
        },{maxWidth:720,maxHeight:720})
    }
},

//就用这张上传
upload: function(){
    if(!this.url){
        mui.toast('请先选择上传图片!',1500);
    }else{
        this.panel = false;
        let croppedCanvas;
        if (!this.croppable) {
            return;
        }
        croppedCanvas = this.cropper.getCroppedCanvas({
            width: 460,
            height: 460,
        });
        var blob = this.convertBase64UrlToBlob(croppedCanvas.toDataURL('image/png'));
        let requestData = new FormData();
        this.bingKey = localStorage.getItem("bingKey")?localStorage.getItem("bingKey"):'';
        requestData.append('bingKey',this.bingKey);
        requestData.append('role',this.identity);
        requestData.append('year',this.year);
        requestData.append('sex',this.sex);
        requestData.append('nickName',this.nickName);
        requestData.append('imageUrl','123');
        requestData.append('resType', '1');
        requestData.append('noThumbnail', '1');
        requestData.append('file', blob,'file_20190430_'+(new Date().getTime())+'.png');
        console.log(requestData)
        this.loadShow = true;
        //this.$request.post(_basePath + '/activity/page20190430/createUserStory.html').then((data) => {
        this.$request.post(_basePath+'/activity/page20190430/createUserStory.html',requestData,{headers:{'Content-Type':'multipart/form-data'}}).then((data)=>{
            this.storyShow = true;
            this.chooseShow = false;
            this.uploadShow = false;
            this.storyId = data.storyId;
            this.storyUrl = data.storyUrl;
            this.storyImgUrl = data.photoUrl;
            this.photoUrl = data.photoUrl;
            this.context = data.context;
            this.ewmUrl =window.location.origin + document.getElementById('basePath').value + '/activity/page20190430/other.html?storyId='+data.storyId;
            var img = new Image();
            img.src = this.storyImgUrl;
            img.onload = () => {
                 this.html2Img();
            };
            this.loadShow = false;
            //注册分享
            shareByApp('choose', {
                'title':'',
                'desc':'',
                'imgUrl': window.location.origin + _basePath + '/activity/page20190430/img/share.png',
                'link': window.location.origin + _basePath + '/activity/page20190430/other.html?storyId='+this.storyId
            });
        }).catch((res)=>{
            this.loadShow = false;
            if(res.code == 2) {
                mui.toast('穿越失败~请上传高清的正脸照片哦~',2000);
                return false;
            }else if(res.code == 3){
                mui.toast('你的名字含有敏感词，请修改',2000);
                return false;
            }else if(res.code == 4){
                mui.toast('不存在角色',2000);
                return false;
            }else if(res.code == 9){
                mui.toast('人太多勒~请稍后再试',2000);
                return false;
            }
        })
   }
},

// 将base64的图片转换为file文件
convertBase64UrlToBlob(urlData) {
    var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
},
html2Img () {
    let pageWrap = document.querySelector("#saveImg");
    var canvas = document.createElement("canvas");
    canvas.width = 720;
    canvas.height = 1134;
    canvas.className="hidden";
    var context = canvas.getContext("2d");
    function loadImage(images, callback) {
        var total = 0;
        var _loaded = 0;
        for (var i in images) {
            total++;
            images[i].p.splice(0, 0, new Image());
            images[i]['p'][0].setAttribute('crossOrigin', 'anonymous');
            images[i]['p'][0].src = images[i].src;
            images[i]['p'][0].onload = function () {
                if (++_loaded >= total) {
                    callback(images);
                }
            };
        }
    };
    var list = [
        {
            src:'./img/imgBg.png?v=1',
            p:[0,0,720, 1134]
        }, {
            src:this.storyImgUrl,
            p:[89,87,544,966]
        }, {
            src:'./img/ewmBg.png?v=1',
            p:[0,969,720,165]
        },{
            src:document.querySelector(".ewmStyle").src,
            p:[69,1001,85, 85]
        }
    ];
    loadImage(list,function(images) {
        for(var i=0;i<images.length;i++){
            context.drawImage(images[i]['p'][0],images[i]['p'][1],images[i]['p'][2],images[i]['p'][3],images[i]['p'][4]);
        }
        pageWrap.appendChild(canvas);
        var base64ImgSrc = canvas.toDataURL("image/png");
        var img = document.createElement("img");
        img.crossOrigin="anonymous";
        img.className = "resultImg fixed";
        img.src = base64ImgSrc;
        pageWrap.appendChild(img);
    });
},

巴特西

上传图片，图片过大压缩处理以及解决自拍时会出现图片横屏的bug修复、长按保存图片

最新文章

热门文章