zoukankan      html  css  js  c++  java
  • vue-cropperjs 基本使用 及其裁剪前压缩,相同图片第二次选择失效,第二次压缩失效,第一次图片转Base64 失效 打印‘data:,' 的问题

      cnpm install --save vue-cropperjs
    
     import VueCropper from "vue-cropperjs";
    
      components: { VueCropper },
               
    
                              <div class="crop-demo">
                                <img :src="cropImg" class="pre-img" />
                                <div v-show="bendiisshowxiugai[0]" class="crop-demo-btn">
                                  {{$t('lang.Click_change_image')}}
                                  <input
                                    class="crop-input"
                                    type="file"
                                    name="image"
                                    ref="head_picture_file"
                                    accept="image/*"
                                    id="change"
                                    @change="setImage"
                                  />
                                </div>
                              </div>
    
                            <el-dialog
                                :title="$t('lang.Crop_Image')"
                                :visible.sync="dialogVisible"
                                width="30%"
                              >
                                <vue-cropper
                                  ref="cropper"
                                  :src="imgSrc"
                                  :aspect-ratio="cropperAspectWH"
                                  :ready="cropImage"
                                  :zoom="cropImage"
                                  :cropmove="cropImage"
                                  style="100%;height:300px;"
                                ></vue-cropper>
                                <span slot="footer" class="dialog-footer">
                                  <el-button @click="cancelCrop">{{$t('lang.cancel')}}</el-button>
                                  <el-button type="primary" @click="upladPic">{{$t('lang.confirm')}}</el-button>
                                </span>
                              </el-dialog>
    
     //以下五条都是截图插件的  data中的数据
          defaultSrc: require("../../../assets/xxx.png"), //默认图片
          fileList: [],     
          imgSrc: "",    
          cropImg: "",
          dialogVisible: false,
          img_size: "",
          max_fuyuan_defaultSrc: [],
    
     setImage(e) {
          let that = this;
          let file = e.target.files[0];
          if (!file.type.includes("image/")) {
            return;
          }
          this.reader = "";
          let canvas = "";
          let ctx = "";
          let img = "";
          that.imgSrc = "";
          this.reader = new FileReader();
    
          this.reader.onload = event => {
            if (file.size >= 1024 * 1024 * 1) {
              console.log("图片过大");
              var quality = 1; //压缩图片的质量
              canvas = document.createElement("canvas"); //创建画布
              ctx = canvas.getContext("2d");
              img = new Image();
              img.src = event.target.result;
              img.onload = function() {
                    const width = img.width;
                    const height = img.height;
                    canvas.width = 800; //这里可以自定义你的图片大小
                    canvas.height = 800 * (img.height / img.width);
                    console.log(img.width, img.height, canvas.width, canvas.height);    //图片转化时打印'data:,'的原因 就是获取Dom元素img的信息,img onload要比渲染的快,没能拿到宽高。
                                                                                        //所以在下面的that.imgSrc = canvas.toDataURL("image/jpeg", quality);时出现打印'data:,'的情况
                setTimeout(() => {                                                      //我的解决方案就是用计时器来延迟获取宽高以及转化的操作
                  ctx.fillRect(0, 0, 0, 0);
                  ctx.drawImage(img, 0, 0, 800, canvas.height);
                  that.imgSrc = canvas.toDataURL("image/jpeg", quality); //将图片转为Base64 之后预览要用
                    that.$refs.cropper &&
                      that.$refs.cropper[0].replace(that.imgSrc);      //第二次压缩失效的原因和解决方法就是这句。。。 that.$refs.cropper[0].replace(that.imgSrc);
                    that.dialogVisible = true;
                }, 50);
              };
            } else {
              that.dialogVisible = true;
              that.imgSrc = event.target.result;
              that.$refs.cropper &&
                that.$refs.cropper[0].replace(event.target.result);
            }
          };
          that.reader.readAsDataURL(file);
        },
        cropImage() {
          this.cropImg = this.$refs.cropper[0].getCroppedCanvas().toDataURL();
        },
        cancelCrop() {
          this.dialogVisible = false;
          this.cropImg = this.max_fuyuan_defaultSrc[
            this.max_fuyuan_defaultSrc.length - 1
          ];
          $("#change").val(""); //取消change事件            //第二次选择相同图片的时候change事件没有触发所以不会弹出弹窗,要先清除   就是这句。。。
        },
        upladPic() {
          this.sumitImageFile(this.cropImg);
          this.dialogVisible = false;
        },
        sumitImageFile(base64Codes) {
          $("#change").val(""); //取消change事件
          let that = this;
          var formData = new FormData();
          //convertBase64UrlToBlob函数是将base64编码转换为Blob
          var picName = new Date().getTime() + ".png"; //给截图的文件命名
          formData.append(
            "file",
            that.convertBase64UrlToBlob(base64Codes),
            picName
          ); //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同
          this.max_fuyuan_defaultSrc.push(this.imgSrc);
          if (this.img_size / 1024 / 1024 < 1.5) {
            serviceApi.requestPostUploadFile(formData).then(body => {
              that.defaultSrc = body.file_name;
              // that.cropImg = that.defaultSrc; //截图用的
            });
          } else {
            this.$message({
              message: "要上传图片太大!",
              type: "warning"
            });
            this.max_fuyuan_defaultSrc.pop();
            //  that.imgSrc=that.cropImg=this.max_fuyuan_defaultSrc;
    
    
    
    
    
            that.imgSrc = that.cropImg = this.max_fuyuan_defaultSrc[
              this.max_fuyuan_defaultSrc.length - 1
            ];
          }
        },
        //将以base64的图片url数据转换为Blob
        convertBase64UrlToBlob(urlData) {
          var bytes = window.atob(urlData.split(",")[1]); //去掉url的头,并转换为byte
          //处理异常,将ascii码小于0的转换为大于0
          var ab = new ArrayBuffer(bytes.length);
          var ia = new Uint8Array(ab);
          for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
          }
          let size = new Blob([ab], { type: "image/png" });
          this.img_size = size.size;
          return new Blob([ab], { type: "image/png" });
        }
    

    由于时间关系 以上代码并不完全 仅供参考 下次再发叭。。。
    另附我找到的相关的好文章
    https://segmentfault.com/q/1010000009665100
    https://blog.csdn.net/aithena/article/details/103034718
    https://www.thinbug.com/q/16077010
    https://stackoverflow.com/questions/40908729/html5-canvas-todataurl-returns-data-in-firefox
    http://www.360doc.com/content/18/0928/22/13328254_790527851.shtml
    https://www.cnblogs.com/goloving/p/8260206.html
    http://www.mamicode.com/info-detail-2151760.html
    https://www.jianshu.com/p/f9986bd52ec6
    https://blog.csdn.net/qq_36538012/article/details/97984553
    我遇到的问题 有的有好几种可能的原因 可以参考以上的

    首先是用this.cropImg 和this.max_fuyuan_defaultSrc保存 从服务器拿到的最开始的默认图片进行展示和存储,
    然后this.max_fuyuan_defaultSrc 用在这数组保存每次在弹窗里截取之后的图片,如果点击取消截取 就返回数组的上一张图片给this.imgSrc在这里显示

    弹窗每次点开的时候都进行判断选择的图片是不是大于1M 的 如果是就进行压缩

    然后上传给服务器的时候我又判断了一下是不是大于1.5M 中间留了保险的空间哟 如果图片大于1.5M 就又用this.max_fuyuan_defaultSrc进行了回退了

  • 相关阅读:
    URAL——DFS找规律——Nudnik Photographer
    URAL1353——DP——Milliard Vasya's Function
    URAL1203——DPor贪心——Scientific Conference
    递推DP HDOJ 5389 Zero Escape
    区间DP UVA 1351 String Compression
    树形DP UVA 1292 Strategic game
    Manacher HDOJ 5371 Hotaru's problem
    同余模定理 HDOJ 5373 The shortest problem
    递推DP HDOJ 5375 Gray code
    最大子序列和 HDOJ 1003 Max Sum
  • 原文地址:https://www.cnblogs.com/panghu123/p/12968297.html
Copyright © 2011-2022 走看看