Mi página web debe poder guardar una imagen en el dispositivo del usuario, sin importar desde qué dispositivo o navegador web esté viendo. La imagen es creada por la propia página web, por lo que necesito trabajar con un elemento img, un elemento canvas o solo los datos base64 de la imagen (cualquiera servirá). Me las arreglé para encontrar técnicas que funcionan en dispositivos Android y PC, pero no he encontrado ninguna que funcione de manera consistente en iPhones (especialmente en Safari). Esto es lo que he probado:
Método 1: descarga a través de un elemento de anclaje
Cree un elemento de anclaje en la página que descarga la imagen cuando se hace clic en:
<a download="myImage.png" href="data:image/png;base64,[base64-data-here]">Click me</a>Funciona en PC y Android. Pero en iPhone, aparecerá una ventana emergente preguntando al usuario si desea descargar la imagen. Si presionas "descargar", parece que no pasa nada. Si descarga la imagen, no aparece en la aplicación Fotos.
Método 2: método .save() en objetos gráficos P5JS
Estoy usando la biblioteca P5JS, que tiene objetos gráficos especiales (básicamente solo envoltorios para un elemento DOM de lienzo) que vienen con un método .save() que guardará la imagen en el sistema de archivos del usuario:
myGraphicsObject.save("myImage.png")Esto parece funcionar solo la mitad del tiempo en iPhones. La mitad de las veces no parece hacer nada en absoluto, o abre una página que dice algo como "no se pudo encontrar el archivo". Muy extraño.
Método 3: permitir que el usuario haga un toque largo en la imagen para guardarla por sí mismo
En Google Images, cualquier usuario de dispositivo móvil puede tocar una imagen durante mucho tiempo para guardarla en su galería. Traté de recrear esto en mi página web simplemente poniendo un elemento img simple en la página. Intenté establecer el atributo de estilo en -webkit-user-select: none para evitar que el toque prolongado solo resalte elementos en la página. Incluso intenté eliminar todos los demás elementos de la página web, usando document.open() , para ver si eso ayudaría:
document.open(); document.write("<html><body></body></html>") myCanvas.setAttribute('style', "-webkit-user-select: none;") document.body.appendChild(myCanvas);Cuando pruebo esto, tocar la imagen durante mucho tiempo no parece hacer nada en iPhone o Android. Este método parece el más prometedor, pero no sé cómo hacer que mi página web se comporte como Google Images.
Resulta que me equivoqué con el Método 3. Tocar prolongadamente un elemento html img funciona según lo previsto. El problema es que accidentalmente estaba usando un elemento de lienzo en lugar de un elemento de imagen. Así es como convertí mi elemento de lienzo en un elemento de imagen:
var canvas_data = canvas.toDataURL(); var img_element = document.createElement("img") img_element.src = canvas_data; document.body.appendChild(img_element);