使用javascript调整图像大小 [英] resize image using javascript

问题描述

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

I'm using javascript function to input image.

这是我的HTML:

<input type="file" name="filUpload" id="filUpload" onclick="" onchange="showimagepreview(this)">
<br />
<div id="before">
<img id="imgprvw" alt="" class="img-thumbnail" style="width: 250px; height: 250px;" />

这是我的JavaScript:

And this is my 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]);
  }
}

此代码将图像转换为叮咬阵列，我需要使用该叮咬阵列调整图像大小.有任何可行的方法.

This code convert image to bite array, I need to resize my image using that bite array. Is there any possible methods to do it.

我会将那个二进制数组传递给Web服务.如果图像尺寸太大，需要很多时间，这就是为什么我需要转换.

I will pass that binary array to web service. I the image size too high, it takes much time, that's why I need to convert.

推荐答案

像这样在画布上调整大小:

Resize it on the canvas like this:

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, 0, 0, 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]);
  }
}

我还没有测试过，但是应该可以.

I haven't tested this yet, but it should work.

使用javascript画布(平滑)调整图像大小

这篇关于使用javascript调整图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！