使用javascript调整图像大小

发布时间：2020-12-14 22:54:59 所属栏目：资源来源：网络整理

导读：我正在使用javascript函数输入图像. 这是我的HTML：这是我的JavaScript： function showimagepreview(input) { //image preview after select image if (input.files input.files[0]) { var filerdr = new FileReader(); filerdr.onload = function(e) { ur

我正在使用javascript函数输入图像.

这是我的HTML：


这是我的JavaScript：

function showimagepreview(input) { //image preview after select image
  if (input.files && input.files[0]) {
    var filerdr = new FileReader();
    filerdr.onload = function(e) {
      url = e.target.result;
      image = url;
      $('#imgprvw').attr('src',url);
      //console.log(url);

      //$('#imgprvw').attr('src',e.target.result);
      //url = e.target.result;
      //$("#imgpath").val(url);
    }
    filerdr.readAsDataURL(input.files[0]);
  }
}

此代码将图像转换为咬合数组,我需要使用该咬合数组调整图像大小.有没有可行的方法来做到这一点.
我将该二进制数组传递给Web服务.我的图像尺寸太高,需要很长时间,这就是我需要转换的原因.


最佳答案
像这样在画布上调整它的大小：

function showimagepreview(input) { //image preview after select image
  if (input.files && input.files[0]) {
    var filerdr = new FileReader();

    filerdr.onload = function(e) {
      var img = new Image();

      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = 250;
        canvas.height = canvas.width * (img.height / img.width);
        ctx.drawImage(img,canvas.width,canvas.height);

        // SEND THIS DATA TO WHEREVER YOU NEED IT
        var data = canvas.toDataURL('image/png');

        $('#imgprvw').attr('src',img.src);
        //$('#imgprvw').attr('src',data);//converted image in variable 'data'
      }
      img.src = e.target.result;
    }
    filerdr.readAsDataURL(input.files[0]);
  }
}

我还没有测试过,但它应该可行.
Resize image with javascript canvas (smoothly)
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!