Se supone que este fragmento de código a continuación convierte la imagen sin procesar en una cadena base64.
let base1=""; let base2=""; let base3=""; let base64String=""; var img=new Image(); var img1=new Image(); var img2=new Image(); img.src='Screenshot (1).png'; img1.src='Screenshot (2).png'; img2.src='Screenshot (3).png'; var reader = new FileReader(); reader.onload = function () { base64String = reader.result.replace("data:", "") .replace(/^.+,/, ""); } reader.readAsDataURL(img); base1=base64String; reader.readAsDataURL(img1); base2=base64String; reader.readAsDataURL(img2); base3=base64String;Pero cuando ejecuto el código, me sale el siguiente error:
TypeError no detectado: no se pudo ejecutar 'readAsDataURL' en 'FileReader': el parámetro 1 no es del tipo 'Blob'.
¿Porqué es eso? Por favor ayúdame a arreglar esto.
Porque readAsDataURL espera el parámetro como Blob. El mejor método será convertir a URL de datos base64 usando lienzo
let base1=""; let base2=""; let base3=""; let base64String=""; var img=new Image(); var img1=new Image(); var img2=new Image(); img.onload = function() { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); base1 = canvas.toDataURL(); } img.src='Screenshot (1).png'; img1.onload = function() { var canvas = document.createElement("canvas"); canvas.width = img1.width; canvas.height = img1.height; ctx = canvas.getContext('2d'); ctx.drawImage(img1, 0, 0); base2 = canvas.toDataURL(); } img1.src='Screenshot (2).png'; img2.onload = function() { var canvas = document.createElement("canvas"); canvas.width = img2.width; canvas.height = img2.height; ctx = canvas.getContext('2d'); ctx.drawImage(img2, 0, 0); base2 = canvas.toDataURL(); } img2.src='Screenshot (3).png';El canvas.toDataURL() sin parámetro generará una URL de datos de tipo png si el img src es un jpg