的Javascript：上传图片文件，并调整大小以不同的分辨率，然后下载

请建议用于图像处理的一些库。的Javascript：上传图片文件，并调整大小以不同的分辨率，然后下载

我们试图绘制图像的画布，然后下载所需尺寸的图像，但无法实现。

我们喜欢用这个机制来减少后端服务器

下面的图像处理是我们试图

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<title>Image Resize</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<form> 
    <input id="filez" type="file" value="img"> 
    <div id="parentDiv"></div> 
</form> 
</body> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    function ImageResizeObject(parentElement,fileElement,objz){ 
     this.parentElement = $(parentElement); 
     this.fileElement = document.getElementById(fileElement); 
     this.objz = objz; 
     this.imageFile = this.fileElement.files[0]; 

     this.parentElement.empty(); 

     for(var i=0;i<this.objz.length;i++){ 
      var parentDiv = $("<div></div>"); 
      parentDiv.attr("id","parentDiv parentDiv"+i); 
      var canvas = $("<canvas id='parentDivCanvas"+i+"'></canvas>"); 
      canvas.css({"height":objz[i].height,"width":this.objz[i].width}); 
      parentDiv.append(canvas); 
      this.parentElement.append(parentDiv); 

      var ctx = canvas[0].getContext('2d'); 
      var img = new Image();   
      img.src =URL.createObjectURL(this.imageFile);     
      ctx.drawImage(img,0,0,img.width,img.height,0, 0,canvas.width(),canvas.height()); 

     } 
    } 

    $("#filez").on('change', function(){ 
     console.log("file uploaded"); 
     FileUpload = new ImageResizeObject("#parentDiv","filez",[{"height":"410","width":"410"},{"height":"205","width":"205"}]);      
    }); 
}); 
</script> 
</html>

来源

2016-03-15 Bharath SN

StackOverflow上的代码，我们不作库的建议，但。 ..

您可以使用html5画布来调整图像大小。

创建画布元件
大小它到所需的经缩放大小
画出图像投影到画布缩放到期望的大小
创建使用帆布作为图像调整大小imageObject。 SRC

这里的示例代码和演示：

var img=new Image(); 
 
img.crossOrigin='anonymous'; 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/marioRunningRight1.png"; 
 
function start(){ 
 
    resizeImg(img,0.50); 
 
    resizeImg(img,2); 
 
} 
 

 
function resizeImg(img,scaleFactor){ 
 
    var c=document.createElement('canvas'); 
 
    var ctx=c.getContext('2d'); 
 
    var iw=img.width; 
 
    var ih=img.height; 
 
    c.width=iw*scaleFactor; 
 
    c.height=ih*scaleFactor; 
 
    ctx.drawImage(img,0,0,iw*scaleFactor,ih*scaleFactor); 
 
    var scaledImg=new Image(); 
 
    scaledImg.onload=function(){ 
 
     // scaledImg is a scaled imageObject for upload/download 
 
     // For testing, just append it to the DOM 
 
     document.body.appendChild(scaledImg); 
 
    } 
 
    scaledImg.src=c.toDataURL(); 
 
}

<h4>Original image</h4> 
 
<img src='https://dl.dropboxusercontent.com/u/139992952/multple/marioRunningRight1.png' crossOrigin='anonymous'> 
 
<br> 
 
<h4>Resized images at 50% and at 200%</h4>

来源

2016-03-15 17:53:13 markE

我不能这个答案争论。有一两件事我想强调的是，要调整原代码画布的尝试失败，因为这行： canvas.css（{“高度”：objz [I] .height，“宽度”：this.objz [ I] .WIDTH}）; 该行改变了画布的尺寸风格的，而不是它的图纸尺寸。要更改绘图尺寸，您需要更改画布的宽度和高度属性 - 如上面的代码所示。 – KaliedaRik

的Javascript：上传图片文件，并调整大小以不同的分辨率，然后下载

回答

相关问题