Question

我使用FileReader获取图像的base64代码。如果我使用画布并放入画布base64。比应用画布调整大小。我获得了新图像的新base64代码？

代码示例。

reader.onloadend = function(event) {
      var canvas = document.getElementById("temp_canvas");
      var context = canvas.getContext("2d");
      var imageObj = new Image();
      imageObj.onload = function() {
          var ratio = (imageObj.width > imageObj.height)?Math.ceil(imageObj.width / imageObj.height):Math.ceil(imageObj.height / imageObj.width);
          console.log(ratio);
          if(imageObj.width > 512) {
              imageObj.width = 512
              imageObj.height = imageObj.width * ratio;
          }
          console.log(imageObj.width);
          console.log(imageObj.height);
          $(canvas).attr('width',imageObj.width);
          $(canvas).attr('height',imageObj.height);
          context.drawImage(imageObj,0,0,imageObj.width,imageObj.height);
      }
      imageObj.src = event.target.result;
      $('.image-for-crop').attr('src',event.target.result);
      $('#dialog-foto').dialog({modal:true});
  }

如果我做var dataURL = canvas.toDataURL（）;

我的主要问题是：“任何时候我更换画布：裁剪，调整此画布的e.t.c. base64代码也会改变吗？”

Answer 1

是的，使用2d context API所做的任何更改都会显示在canvas.toDataURL()的结果中。但是DOM这样的操作，例如调整＆lt; canvas＆gt;的大小element（示例myCanvas.style.width = 100）不会对其像素数据进行任何更改。

从base64调整图像大小

1 个答案: