Estoy tratando de arreglar la imagen de Canvas Resize (Downscale), obtuve jsfiddle http://jsfiddle.net/EWupT/ para cambiar el tamaño de la imagen. Tengo un campo de entrada html cuando el usuario carga instantáneamente la imagen que se muestra en el campo de entrada. Al agregar el código de cambio de tamaño en mi código de salida, recibí un error. cualquier ayuda muy apreciada.
Mi JS:
$(document).ready(function() { var readURL = function(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300; canvas.height=234; ctx.drawImage(reader, 0, 0, 300, 234); $('.profile-pic').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $(".file-upload").on('change', function(){ readURL(this); }); $(".upload-button").on('click', function() { $(".file-upload").click(); }); });Mi HTML:
<div class="upload-button" id="imageresize"><img class="profile-pic" src="../images/add-image.png" /></div> <input id="formFile" id="avatar-2" class="file-upload" type="file" name="my_file" accept="image/*">Recibí este error:
Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'. at FileReader.reader.onloadSe agregó la función filereader.onload , dentro podemos usar el código de cambio de tamaño. Código actualizado:
$(".upload-button").on('click', function() { $(".file-upload").click(); }); var fileReader = new FileReader(); fileReader.onload = function(event) { var image = new Image(); image.onload = function() { var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); canvas.width = 500; canvas.height = 380; //canvas.height=image.height/1; $('#upload-preview').width(500); //pixels var hRatio = canvas.width / image.width; var vRatio = canvas.height / image.height; var ratio = Math.min(hRatio, vRatio); context.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width * ratio, image.height * ratio ); document.getElementById("upload-preview").src = canvas.toDataURL(); } image.src = event.target.result; }; var uploadImage = function() { var uploadImage = document.getElementById("upload-Image"); if (uploadImage.files.length === 0) { return; } var uploadFile = document.getElementById("upload-Image").files[0]; fileReader.readAsDataURL(uploadFile); }Dado que está utilizando la new Image() y generando un objeto HTMLImageElement dinámicamente, agregue img.src después de la función de onload de la siguiente manera:
img = new Image(); img.onload = function(){ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300 canvas.height=234 ctx.drawImage(img, 0, 0, 300, 234); document.body.appendChild(canvas); }; img.src = 'http://i.imgur.com/SHo6Fub.jpg'; <img src="http://i.imgur.com/SHo6Fub.jpg" width="300" height="234">