使用javascript调整图像大小

概述我正在使用javascript函数输入图像.这是我的HTML：<input type='file' name='filUpload' id='filUpload' onclick='' onchange='showimagepreview(this)'> <br /> <div id='before'> <img i

我正在使用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)          总结       
以上是内存溢出为你收集整理的使用javascript调整图像大小全部内容，希望文章能够帮你解决使用javascript调整图像大小所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1122064.html