Javascript 在提交表单html5之前调整图像大小_Javascript_Html_Html5 Canvas_Filereader

Javascript 在提交表单html5之前调整图像大小

javascript html html5-canvas

Javascript 在提交表单html5之前调整图像大小,javascript,html,html5-canvas,filereader,Javascript,Html,Html5 Canvas,Filereader,我需要调整客户端中的图像大小，并在提交之前将其添加到表单中以下是完整的html： <html> <body> <form action="url"> <label><b>Avatar image:</b></label> <input type="file" id="imageLoader" name="avatar" onchange="return

我需要调整客户端中的图像大小，并在提交之前将其添加到表单中

以下是完整的html：

<html>
   <body>
      <form action="url">
         <label><b>Avatar image:</b></label>
         <input type="file" id="imageLoader" name="avatar" onchange="return ShowImagePreview( this, 0 );" /><br />    
         <canvas id="imageCanvas" class="previewcanvas" width="133" height="100"></canvas>
         <br />
         <input type="submit" value="Save" />
      </form>
      <script>
         var imageLoader = document.getElementById('imageLoader');
         function HandleFileEvent( event, selection )
         {
             var img = new Image; 
             img.onload = function( event ) { UpdatePreviewCanvas( event, img, selection ) }
             img.src = event.target.result;
         }

         function ShowImagePreview( object, selection )
         {
             if( typeof object.files === "undefined" )
                 return;

             var files = object.files;

             if( !( window.File && window.FileReader && window.FileList && window.Blob ) )
             {
               alert('The File APIs are not fully supported in this browser.');
               return false;
             }

             if( typeof FileReader === "undefined" )
             {
                 alert( "Filereader undefined!" );
                 return false;
             }

             var file = files[0];

             if( file !== undefined && file != null && !( /image/i ).test( file.type ) )
             {
                 alert( "File is not an image." );
                 return false;
             }

             reader = new FileReader();
             reader.onload = function( event ) { HandleFileEvent( event, selection ) }
             reader.readAsDataURL( file );
         }

         function UpdatePreviewCanvas( event, img, selection )
         {    
             var canvas = document.getElementById('imageCanvas');
             var context = canvas.getContext( '2d' );

             var world = new Object();
             world.width = canvas.offsetWidth;
             world.height = canvas.offsetHeight;

             canvas.width = world.width;
             canvas.height = world.height;

             var WidthDif = img.width - world.width;
             var HeightDif = img.height - world.height;

             var Scale = 0.0;
             if( WidthDif > HeightDif )
             {
                 Scale = world.width / img.width;
             }
             else
             {
                 Scale = world.height / img.height;
             }
             if( Scale > 1 )
                 Scale = 1;

             var UseWidth = Math.floor( img.width * Scale );
             var UseHeight = Math.floor( img.height * Scale );

             var x = Math.floor( ( world.width - UseWidth ) / 2 );
             var y = Math.floor( ( world.height - UseHeight ) / 2 );

             context.drawImage( img, x, y, UseWidth, UseHeight );  
         }
      </script>
  </body>
</html>


化身图像：




var imageLoader=document.getElementById（'imageLoader'）；
函数HandleFileEvent（事件，选择）
{
var img=新图像；
img.onload=函数（事件）{UpdatePreviewCanvas（事件，img，选择）}
img.src=event.target.result；
}
函数ShowImagePreview（对象、选择）
{
if（typeof object.files==“未定义”）
返回；
var files=object.files；
if（！（window.File&&window.FileReader&&window.FileList&&window.Blob））
{
警报（'此浏览器不完全支持文件API'）；
返回false；
}
if（文件读取器的类型==“未定义”）
{
警报（“文件阅读器未定义！”）；
返回false；
}
var file=files[0]；
if（file！==undefined&&file！=null&&！（/image/i）.test（file.type））
{
警报（“文件不是图像”）；
返回false；
}
reader=newfilereader（）；
reader.onload=函数（事件）{HandleFileEvent（事件，选择）}
reader.readAsDataURL（文件）；
}
函数UpdatePreviewCanvas（事件、img、选择）
{    
var canvas=document.getElementById（'imageCanvas'）；
var context=canvas.getContext（'2d'）；
var world=新对象（）；
world.width=canvas.offsetWidth；
world.height=canvas.offsetHeight；
canvas.width=world.width；
canvas.height=world.height；
var WidthDif=img.width-world.width；
var HeightDif=img.height-world.height；
var标度=0.0；
如果（宽度差>高度差）
{
比例=世界宽度/img.width；
}
其他的
{
比例=世界高度/img高度；
}
如果（比例>1）
比例=1；
var UseWidth=数学地板（img.width*比例）；
var UseHeight=数学楼层（img.height*刻度）；
var x=数学地板（（world.width-UseWidth）/2）；
变量y=数学楼层（（world.height-usehight）/2）；
绘图图像（img、x、y、UseWidth、UseHeight）；
}

我想到的是将图像放到画布上，但我不知道如何将其恢复到输入

（使用此选项）

您可以使用drawImage的扩展版本来调整原始图像的大小。

扩展版本从[0,0]和img.width x img.height提取完整的原始图像

然后缩放原始文件并在画布上以[0,0]的速度绘制缩放后的版本

context.drawImage(  img, 0,0,img.width,img.height,  0,0,UseWidth,UseHeight );