javascript - validacion - Cambiar el tamaño de la imagen antes de enviar el formulario html5
validar formulario php antes enviar (1)
Puede usar la versión ampliada de drawImage para cambiar el tamaño de su imagen original.
La versión expandida extrae la imagen original completa de [0,0] e img.width x img.height.
Luego escala el original y dibuja la versión escalada en el lienzo en [0,0]
context.drawImage( img, 0,0,img.width,img.height, 0,0,UseWidth,UseHeight );
Necesito cambiar el tamaño de una imagen en el cliente y agregarla al formulario antes de enviarla.
Aquí está el html completo:
<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>
Lo que pensé fue poner la imagen en el lienzo, pero no sé cómo devolverla a la entrada.
(usando este enlace )