Siento que tengo un problema bastante sencillo, pero me he estado molestando en encontrar una pregunta que lo responda:
Tengo una aplicación create-react-app.
Tengo una imagen en src/images/image.png y quiero, mediante programación, convertir esa imagen en un Blob.
¿Cómo?
si hago
<img src={require(relativePathToImage)} />Veo la imagen.
Y si lo obtengo a través de un campo de entrada como:
<input type="file" accept="image/png" onChange={(e) => setImage(e.target.files[0])} /> Obtengo el Blob correcto establecido en image .
Pero, ¿cómo evito hacerlo manualmente a través del campo de entrada y voy directamente desde
¿ relativePathToImage a Blob ?
Puedes usar javascript:
function imgToBlob(url) { let img=new Image(); img.src=url; let canvas=document.createElement('canvas'); img.onload=function() { canvas.width=img.width; canvas.height=img.height; canvas.getContext('2d').drawImage(img,0,0); canvas.toBlob(setLink,'image/png',1) // about toBlob function: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob } } function setLink(blob) { document.querySelector('a').href=URL.createObjectURL(blob) }Para este html:
<a>Blob link</a> Editar: debe agregar a la línea de función imgToBlob img.crossOringin="anonymus"