使用javascript调整图像大小

Question

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

这是我的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：

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服务。我的图像尺寸太高，需要很长时间，这就是为什么我需要转换。

Answer 1

调整其大小，这样在画布上：

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

我没有测试过这还，但它应该工作。

Resize image with javascript canvas (smoothly)