Mi página web debe permitir que los usuarios de dispositivos móviles mantengan presionados los elementos de imagen HTML para guardarlos en su galería, de la misma manera que puede hacerlo cuando navega por Imágenes de Google en cualquier navegador web móvil.
Cuando creo un elemento HTML img, el toque prolongado no parece abrir el menú contextual ni hacer nada en Android (Chrome) o iOS (Safari). Incluso cuando configuro el estilo del elemento img en -webkit-user-select: none; (para evitar que el usuario resalte la imagen) parece que no funciona. Intenté hacer ingeniería inversa de la forma en que lo hace Google Images, pero no puedo resolverlo.
Simplemente permitiría que el usuario descargue la imagen a través de un elemento de anclaje, pero esto parece guardar la foto en el sistema de archivos del teléfono, lo que significa que en el iPhone no aparecerá en la aplicación Fotos del usuario (no es muy fácil de usar) .
<a download="myImage.png" href="data:image/png;base64,[base64-data-here]">Click me</a>Encontré el problema. 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);