将canvas转换为blob时如何设置文件名？

时间：2018-08-11 04:25:08

标签： javascript jquery html5

我想将裁剪的图像上传到服务器。为此，我在裁剪后的画布图像中使用jQuery Jcrop lib，然后将其转换为可以正常工作的blob，但是问题是服务器上的文件名只是blob，没有任何扩展名或未定义的类型。

当我在网页上的img Sec中使用它时，它运行良好。

  <script>
    function uploadPhoto(thisVar) {
        if($("#profilePic").val() == "")
        { 
           alert('Please attach a image.');
           return false;
        }
        else
        {
            var formData = new FormData();
            //formData.append("profilePic", $('#profilePic').prop('files')[0])

            var blob = dataURLtoBlob(canvas.toDataURL('image/png')); 

            formData.append("profilePic", blob);

            $.ajax({
              url:"/imageUpload.jsp",
              type: "POST",
              data: formData,
              contentType:false,
              cache: false,
              processData:false,
            }).done(function(data){ 
                data = $.trim(data);
                data = JSON.parse(data);
                if(data.status == 'OK'){
                    alert("Profile pic uploaded successfully.");
                    $('.imagefldforpar img').attr('src',data.imgPath);
                }else{
                    alert("Profile pic not uploaded.");
                }
                console.log(data);
                $('#uploadPhoto').modal('hide');
            }); 
        }
    }
</script>

<link href="/css/jquery.Jcrop.min.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery.Jcrop.min.js"></script>

<script>    
    var crop_max_width = 400;
    var crop_max_height = 400;
    var jcrop_api;
    var canvas;
    var context;
    var image;

    var prefsize;

    $("#profilePic").change(function() {
      loadImage(this);
    });

    function loadImage(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        canvas = null;
        reader.onload = function(e) {
          image = new Image();
          image.onload = validateImage;
          image.src = e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
      }
    }

    function dataURLtoBlob(dataURL) {
      var BASE64_MARKER = ';base64,';
      if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = decodeURIComponent(parts[1]);

        return new Blob([raw], {
          type: contentType
        });
      }
      var parts = dataURL.split(BASE64_MARKER);
      var contentType = parts[0].split(':')[1];
      var raw = window.atob(parts[1]);
      var rawLength = raw.length;
      var uInt8Array = new Uint8Array(rawLength);
      for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }

      return new Blob([uInt8Array], {
        type: contentType
      });
    }

    function validateImage() {
      if (canvas != null) {
        image = new Image();
        image.onload = restartJcrop;
        image.src = canvas.toDataURL('image/png');
      } else restartJcrop();
    }

    function restartJcrop() {
      if (jcrop_api != null) {
        jcrop_api.destroy();
      }
      $("#views").empty();
      $("#views").append("<canvas id=\"canvas\">");
      canvas = $("#canvas")[0];
      context = canvas.getContext("2d");
      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0);
      $("#canvas").Jcrop({
        onSelect: selectcanvas,
        onRelease: clearcanvas,
        aspectRatio: 4/5,
        boxWidth: crop_max_width,
        boxHeight: crop_max_height
      }, function() {
        jcrop_api = this;
      });
      clearcanvas();
    }

    function clearcanvas() {
      prefsize = {
        x: 0,
        y: 0,
        w: canvas.width,
        h: canvas.height,
      };
    }

    function selectcanvas(coords) {
      prefsize = {
        x: Math.round(coords.x),
        y: Math.round(coords.y),
        w: Math.round(coords.w),
        h: Math.round(coords.h)
      };
    }

    function applyCrop() {
      canvas.width = prefsize.w;
      canvas.height = prefsize.h;
      context.drawImage(image, prefsize.x, prefsize.y, prefsize.w, prefsize.h, 0, 0, canvas.width, canvas.height);
      validateImage();
    }

    function applyScale(scale) {
      if (scale == 1) return;
      canvas.width = canvas.width * scale;
      canvas.height = canvas.height * scale;
      context.drawImage(image, 0, 0, canvas.width, canvas.height);
      validateImage();
    }

    function applyRotate() {
      canvas.width = image.height;
      canvas.height = image.width;
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.translate(image.height / 2, image.width / 2);
      context.rotate(Math.PI / 2);
      context.drawImage(image, -image.width / 2, -image.height / 2);
      validateImage();
    }

    function applyHflip() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.translate(image.width, 0);
      context.scale(-1, 1);
      context.drawImage(image, 0, 0);
      validateImage();
    }

    function applyVflip() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.translate(0, image.height);
      context.scale(1, -1);
      context.drawImage(image, 0, 0);
      validateImage();
    }

    $("#cropbutton").click(function(e) {
      applyCrop();
    });
    $("#scalebutton").click(function(e) {
      var scale = prompt("Scale Factor:", "1");
      applyScale(scale);
    });
    $("#rotatebutton").click(function(e) {
      applyRotate();
    });
    $("#hflipbutton").click(function(e) {
      applyHflip();
    });
    $("#vflipbutton").click(function(e) {
      applyVflip();
    });
</script>

感谢@Zigri2612解决方案

1 个答案:

答案 0 :(得分：3)

  <script>
    function uploadPhoto(thisVar) {
        if($("#profilePic").val() == "")
        { 
           alert('Please attach a image.');
           return false;
        }
        else
        {
            var formData = new FormData();
            //formData.append("profilePic", $('#profilePic').prop('files')[0])

            var blob = dataURLtoBlob(canvas.toDataURL('image/png')); 
            formData.append("profilePic", blob,"image.png");

            $.ajax({
              url:"/imageUpload.jsp",
              type: "POST",
              data: formData,
              contentType:false,
              cache: false,
              processData:false,
            }).done(function(data){ 
                data = $.trim(data);
                data = JSON.parse(data);
                if(data.status == 'OK'){
                    alert("Profile pic uploaded successfully.");
                    $('.imagefldforpar img').attr('src',data.imgPath);
                }else{
                    alert("Profile pic not uploaded.");
                }
                console.log(data);
                $('#uploadPhoto').modal('hide');
            }); 
        }
    }
</script>

<link href="/css/jquery.Jcrop.min.css" rel="stylesheet">
<script type="text/javascript" src="/js/jquery.Jcrop.min.js"></script>

<script>    
    var crop_max_width = 400;
    var crop_max_height = 400;
    var jcrop_api;
    var canvas;
    var context;
    var image;

    var prefsize;

    $("#profilePic").change(function() {
      loadImage(this);
    });

    function loadImage(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        canvas = null;
        reader.onload = function(e) {
          image = new Image();
          image.onload = validateImage;
          image.src = e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
      }
    }

    function dataURLtoBlob(dataURL) {
      var BASE64_MARKER = ';base64,';
      if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = decodeURIComponent(parts[1]);

        return new Blob([raw], {
          type: contentType
        });
      }
      var parts = dataURL.split(BASE64_MARKER);
      var contentType = parts[0].split(':')[1];
      var raw = window.atob(parts[1]);
      var rawLength = raw.length;
      var uInt8Array = new Uint8Array(rawLength);
      for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }

      return new Blob([uInt8Array], {
        type: contentType
      });
    }

    function validateImage() {
      if (canvas != null) {
        image = new Image();
        image.onload = restartJcrop;
        image.src = canvas.toDataURL('image/png');
      } else restartJcrop();
    }

    function restartJcrop() {
      if (jcrop_api != null) {
        jcrop_api.destroy();
      }
      $("#views").empty();
      $("#views").append("<canvas id=\"canvas\">");
      canvas = $("#canvas")[0];
      context = canvas.getContext("2d");
      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0);
      $("#canvas").Jcrop({
        onSelect: selectcanvas,
        onRelease: clearcanvas,
        aspectRatio: 4/5,
        boxWidth: crop_max_width,
        boxHeight: crop_max_height
      }, function() {
        jcrop_api = this;
      });
      clearcanvas();
    }

    function clearcanvas() {
      prefsize = {
        x: 0,
        y: 0,
        w: canvas.width,
        h: canvas.height,
      };
    }

    function selectcanvas(coords) {
      prefsize = {
        x: Math.round(coords.x),
        y: Math.round(coords.y),
        w: Math.round(coords.w),
        h: Math.round(coords.h)
      };
    }

    function applyCrop() {
      canvas.width = prefsize.w;
      canvas.height = prefsize.h;
      context.drawImage(image, prefsize.x, prefsize.y, prefsize.w, prefsize.h, 0, 0, canvas.width, canvas.height);
      validateImage();
    }

    function applyScale(scale) {
      if (scale == 1) return;
      canvas.width = canvas.width * scale;
      canvas.height = canvas.height * scale;
      context.drawImage(image, 0, 0, canvas.width, canvas.height);
      validateImage();
    }

    function applyRotate() {
      canvas.width = image.height;
      canvas.height = image.width;
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.translate(image.height / 2, image.width / 2);
      context.rotate(Math.PI / 2);
      context.drawImage(image, -image.width / 2, -image.height / 2);
      validateImage();
    }

    function applyHflip() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.translate(image.width, 0);
      context.scale(-1, 1);
      context.drawImage(image, 0, 0);
      validateImage();
    }

    function applyVflip() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.translate(0, image.height);
      context.scale(1, -1);
      context.drawImage(image, 0, 0);
      validateImage();
    }

    $("#cropbutton").click(function(e) {
      applyCrop();
    });
    $("#scalebutton").click(function(e) {
      var scale = prompt("Scale Factor:", "1");
      applyScale(scale);
    });
    $("#rotatebutton").click(function(e) {
      applyRotate();
    });
    $("#hflipbutton").click(function(e) {
      applyHflip();
    });
    $("#vflipbutton").click(function(e) {
      applyVflip();
    });
</script>
相关问题
最新问题