그림 압축cavas 업로드 서버 ----------- 방법

2014 단어 문제
참조:https://blog.csdn.net/huangpb123/article/details/80560980
uplodeimg(e) {
	 let data = e.target.files[0];
      if (data.size > 1000000) {// 1M 
        var this_ = this;
        console.log(data.size);
        let reader = new FileReader();
        reader.readAsDataURL(data);
        reader.onload = function(e) {
          let image = new Image(); // img ( DOM )
          image.src = e.target.result;
          console.log(e.target.result);
          image.onload = function() {
            let canvas = document.createElement("canvas"),
              context = canvas.getContext("2d"),
              imageWidth = image.width / 2, // 
              imageHeight = image.height / 2,
              data = "";
            canvas.width = imageWidth;
            canvas.height = imageHeight;
            // context.clearRect(0, 0, imageWidth, imageHeight);
            context.drawImage(image, 0, 0, imageWidth, imageHeight);
            var dataurl = canvas.toDataURL("image/jpeg", 0.8);
            var arr = dataurl.split(","),
              mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]),
              n = bstr.length,
              u8arr = new Uint8Array(n);
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
            }
            console.log(u8arr[n]);
            var newFile = new Blob([u8arr], { type: mime });
            console.log(newFile);
            // 
            this_.get_img(newFile, name);
          };
        };
      } else {
        this.get_img(data, name);
      }
    },
    get_img(data, name) {
      var formData = new FormData();
      formData.append("file", data);
      this.$store.commit("show_looding");
      request({
        url: "/api/upload",
        method: "post",
        data: formData
      }).then(res => {
        this.$store.commit("hide_looding");
        console.log(res.data.data[0]);
      });
    },

좋은 웹페이지 즐겨찾기