Estoy tratando de cambiar el tamaño de un png que se recibe después de hacer clic en este botón:
<input #FileInput id="fileControl" type="file" accept='image/*' (change)="addImage(FileInput.files, $event)">Después de hacer clic en el botón, llama a addImage y recibe el archivo.
async addImage(files: any, event: any) { var dbKey = this.selectedHour; var length = this.detailsArray(this.selectedHour).length; if (files.length === 0) return; var mimeType = files[0].type; if (mimeType.match(/image\/*/) == null) { this.message = 'Only images are supported.'; return; } var reader = new FileReader(); for (let j = 0; j < files.length; j++) { reader.readAsDataURL(files[j]); reader.onload = async (_event) => { var hour = this.selectedHour.slice(0, 4); var imgURL = reader.result; var resizedImage = ''; await this.resizeImage(imgURL).then((resolve: any) => { resizedImage = resolve; }); // keyparse works and give the right key let detailKey = this.keyParse(length.toString(), this.selectedHour.slice(0, 4)); let caption = ''; var theDict = { hour: hour, workHours: this.selectedHour, detailKey: detailKey, imgURL: resizedImage, caption: caption, }; let hour = dict.workHours; let theArray = this.detailsControl.controls[hour] as FormArray; theArray.push(this.fb.group(dict)); }; } ... }Ahora puedo agregar la imagen al Grupo de formularios sin problemas, y mostrará la imagen, pero necesito cambiar su tamaño:
resizeImage(imageURL: any): Promise<any> { return new Promise((resolve) => { var image = new Image(); var what = ''; image.onload = function () { var image = new Image(); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); if (ctx != null) { ctx.drawImage(image, 0, 0, 640, 480); } image.src; var data = canvas.toDataURL('image/png', 0.5); what = data; console.log('data', data); }; image.src = imageURL; resolve(what); }); }Desafortunadamente, este método me está dando un enlace roto en el elemento al que se dirige. La imagen no se muestra, a pesar de que console.log imprime una cadena base64 similar a la que funciona.
¿Puede alguien por favor ayudarme a averiguar qué está mal con esta cosa?
Hay varios problemas con su función resizeImage .
what antes de que la imagen se cargara y cambiara de tamaño. Devuelves una Promesa que se resolverá como '' .onload tiene una segunda image . El lienzo dibujará esta imagen vacía en lugar de la cargada. resizeImage(imageURL: any): Promise<any> { return new Promise((resolve) => { var image = new Image(); image.onload = function () { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); if (ctx != null) { ctx.drawImage(image, 0, 0, 640, 480); // <-- draw the right image! } var data = canvas.toDataURL('image/png', 0.5); resolve(data); // <-- call it here! }; image.src = imageURL; }); }