从base64调整图像大小

时间:2012-02-01 12:53:35

标签: html canvas base64 filereader

我使用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代码也会改变吗?”

1 个答案:

答案 0 :(得分:1)

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