javascript - pagina - insertar imagen html url
¿Es posible crear una imagen en una página web que no pueda ser copiada o guardada por el usuario final? (8)
En algunas páginas web, las imágenes de fondo no se pueden copiar ni guardar. El navegador que uso no lo reconoce como una imagen.
La pregunta que tengo es: quiero saber cómo es posible crear una imagen en una página web que el usuario no pueda copiar.
Por ejemplo: en esta página de ayuda de github , la imagen de fondo en la que se escribe el título no se puede copiar y guardar en el navegador que utilizo actualmente.
¿Podría ser que la imagen es un gráfico creado por código javascript o algún otro idioma?
Además, ¿es posible que no sea una imagen sino un gráfico creado por algún código en javascript u otro idioma?
Opción 1
Use etiquetas svg en html. Esto todavía no es en absoluto prueba de copia, pero reduce las opciones para copiar a:
- Mirando el código fuente y copiándolo.
- Capturas de pantalla
La mayoría de las herramientas gráficas, photoshop, etc., tienen un modo vectorial o svg que puede exportar las imágenes que creó en ese modo como etiquetas html que parecen:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"></circle>
</svg>
El usuario no podrá hacer clic con el botón derecho y guardar esta imagen, pero sí podrá inspeccionar y robar el código.
opcion 2
Usa Javascript y HTML para dibujar la imagen programáticamente.
Maneras en que el usuario puede copiar:
- Robe el código JS del navegador (muy fácil, pero solo es útil si planean mostrar la imagen en alguna plataforma que admita lienzo)
- Captura de pantalla
.
var canvas = document.getElementById(''myCanvas'');
var context = canvas.getContext(''2d'');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 70;
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = ''green'';
context.fill();
context.lineWidth = 5;
context.strokeStyle = ''#003300'';
context.stroke();
Mis dos centavos, use marcas de agua o versiones de baja resolución de las imágenes que le preocupan. Cualquier cosa que coloques en un sitio web es trivial para cualquiera que sepa lo que está haciendo para copiar. Las opciones anteriores son divertidas e interesantes en las que pensar, pero en última instancia son mucho trabajo para los desarrolladores y se las derrota con un solo toque de tecla.
Último pensamiento
Una última idea que podría mitigar la capacidad de copia de una persona promedio, sería requerir que se mantuvieran diez teclas diferentes para poder ver la imagen en particular. Al igual que las otras opciones, esto es evitable por cualquiera que sepa lo que están haciendo, pero un usuario normal tendría problemas para presionar PrtScn mientras sus otros dedos están ocupados. No es el mejor UX ... pero hey :)
Bueno, esa es la cadena de imagen codificada en base64: inténtelo aquí en: b64.io Cuando coloqué la imagen en cuestión en este sitio, obtuve esto:
/* file size: 3.2ko | already optimized | base64 size: 4.2ko */
.index {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NDAiIGhlaWdodD0iNDQwIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2IoMTI3LCA1NCwgNjApIi8+PHJlY3QgeD0iMCIgeT0iNSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTUiIG9wYWNpdHk9IjAuMTA2NjY2NjY2NjY2NjY2NjciIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIwIiB5PSIyOSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTgiIG9wYWNpdHk9IjAuMTMyNjY2NjY2NjY2NjY2NjUiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSI1NyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSI4MiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTMiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIwIiB5PSIxMTMiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEyIiBvcGFjaXR5PSIwLjA4MDY2NjY2NjY2NjY2NjY2IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMCIgeT0iMTM3IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMyIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjAiIHk9IjE2OSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSIxODQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjciIG9wYWNpdHk9IjAuMDM3MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIwIiB5PSIxOTgiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjIwIiBvcGFjaXR5PSIwLjE1IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMCIgeT0iMjMzIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNiIgb3BhY2l0eT0iMC4xMTUzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjAiIHk9IjI2MSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iNSIgb3BhY2l0eT0iMC4wMiIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjAiIHk9IjI3MiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTQiIG9wYWNpdHk9IjAuMDk4IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMCIgeT0iMjk4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMiIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjAiIHk9IjMyNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIwIiB5PSIzNTUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEzIiBvcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMCIgeT0iMzc3IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI1IiBvcGFjaXR5PSIwLjAyIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMCIgeT0iMzk4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNiIgb3BhY2l0eT0iMC4xMTUzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjAiIHk9IjQzMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iOSIgb3BhY2l0eT0iMC4wNTQ2NjY2NjY2NjY2NjY2NyIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjUiIHk9IjAiIHdpZHRoPSIxNSIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjEwNjY2NjY2NjY2NjY2NjY3IiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMjkiIHk9IjAiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjEzMjY2NjY2NjY2NjY2NjY1IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iNTciIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iODIiIHk9IjAiIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMTEzIiB5PSIwIiB3aWR0aD0iMTIiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjEzNyIgeT0iMCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIxNjkiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMTg0IiB5PSIwIiB3aWR0aD0iNyIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjAzNzMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIi8+PHJlY3QgeD0iMTk4IiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4xNSIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjIzMyIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMTE1MzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIyNjEiIHk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDIiIGZpbGw9IiNkZGQiLz48cmVjdCB4PSIyNzIiIHk9IjAiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA5OCIgZmlsbD0iIzIyMiIvPjxyZWN0IHg9IjI5OCIgeT0iMCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY2NjYiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSIzMjciIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIi8+PHJlY3QgeD0iMzU1IiB5PSIwIiB3aWR0aD0iMTMiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjM3NyIgeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wMiIgZmlsbD0iI2RkZCIvPjxyZWN0IHg9IjM5OCIgeT0iMCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMTE1MzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiLz48cmVjdCB4PSI0MzEiIHk9IjAiIHdpZHRoPSI5IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDU0NjY2NjY2NjY2NjY2NjciIGZpbGw9IiNkZGQiLz48L3N2Zz4=);
}
Bueno, puedo ver la imagen y guardarla en el disco también, sin ningún problema (desde el enlace de github que mencionaste). No estoy seguro de si funciona para mí debido a algún complemento de Firefox, o simplemente funciona con Firefox.
Cuando hago clic derecho en la imagen de fondo, veo la opción " Ver imagen de fondo y cuando veo la imagen veo esto:
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NDAiIGhlaWdodD0iNDQwIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2IoMTI3LCA1NCwgNjApIiAgLz48cmVjdCB4PSIwIiB5PSI1IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNSIgb3BhY2l0eT0iMC4xMDY2NjY2NjY2NjY2NjY2NyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iMCIgeT0iMjkiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjE4IiBvcGFjaXR5PSIwLjEzMjY2NjY2NjY2NjY2NjY1IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSI1NyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiICAvPjxyZWN0IHg9IjAiIHk9IjgyIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMyIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iMCIgeT0iMTEzIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMiIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMCIgeT0iMTM3IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMyIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iMCIgeT0iMTY5IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMCIgb3BhY2l0eT0iMC4wNjMzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMCIgeT0iMTg0IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSI3IiBvcGFjaXR5PSIwLjAzNzMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIiAgLz48cmVjdCB4PSIwIiB5PSIxOTgiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjIwIiBvcGFjaXR5PSIwLjE1IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSIyMzMiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjE2IiBvcGFjaXR5PSIwLjExNTMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSIyNjEiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjUiIG9wYWNpdHk9IjAuMDIiIGZpbGw9IiNkZGQiICAvPjxyZWN0IHg9IjAiIHk9IjI3MiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTQiIG9wYWNpdHk9IjAuMDk4IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSIyOTgiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEyIiBvcGFjaXR5PSIwLjA4MDY2NjY2NjY2NjY2NjY2IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSIzMjciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSIwIiB5PSIzNTUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEzIiBvcGFjaXR5PSIwLjA4OTMzMzMzMzMzMzMzMzMzIiBmaWxsPSIjZGRkIiAgLz48cmVjdCB4PSIwIiB5PSIzNzciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjUiIG9wYWNpdHk9IjAuMDIiIGZpbGw9IiNkZGQiICAvPjxyZWN0IHg9IjAiIHk9IjM5OCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTYiIG9wYWNpdHk9IjAuMTE1MzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiICAvPjxyZWN0IHg9IjAiIHk9IjQzMSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iOSIgb3BhY2l0eT0iMC4wNTQ2NjY2NjY2NjY2NjY2NyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iNSIgeT0iMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMTA2NjY2NjY2NjY2NjY2NjciIGZpbGw9IiNkZGQiICAvPjxyZWN0IHg9IjI5IiB5PSIwIiB3aWR0aD0iMTgiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4xMzI2NjY2NjY2NjY2NjY2NSIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iNTciIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA2MzMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSI4MiIgeT0iMCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiICAvPjxyZWN0IHg9IjExMyIgeT0iMCIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDgwNjY2NjY2NjY2NjY2NjYiIGZpbGw9IiMyMjIiICAvPjxyZWN0IHg9IjEzNyIgeT0iMCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDg5MzMzMzMzMzMzMzMzMzMiIGZpbGw9IiNkZGQiICAvPjxyZWN0IHg9IjE2OSIgeT0iMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDYzMzMzMzMzMzMzMzMzMzQiIGZpbGw9IiMyMjIiICAvPjxyZWN0IHg9IjE4NCIgeT0iMCIgd2lkdGg9IjciIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wMzczMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iMTk4IiB5PSIwIiB3aWR0aD0iMjAiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4xNSIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMjMzIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4xMTUzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMjYxIiB5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjAyIiBmaWxsPSIjZGRkIiAgLz48cmVjdCB4PSIyNzIiIHk9IjAiIHdpZHRoPSIxNCIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjA5OCIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMjk4IiB5PSIwIiB3aWR0aD0iMTIiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wODA2NjY2NjY2NjY2NjY2NiIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMzI3IiB5PSIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wNjMzMzMzMzMzMzMzMzMzNCIgZmlsbD0iIzIyMiIgIC8+PHJlY3QgeD0iMzU1IiB5PSIwIiB3aWR0aD0iMTMiIGhlaWdodD0iMTAwJSIgb3BhY2l0eT0iMC4wODkzMzMzMzMzMzMzMzMzMyIgZmlsbD0iI2RkZCIgIC8+PHJlY3QgeD0iMzc3IiB5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjAyIiBmaWxsPSIjZGRkIiAgLz48cmVjdCB4PSIzOTgiIHk9IjAiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxMDAlIiBvcGFjaXR5PSIwLjExNTMzMzMzMzMzMzMzMzM0IiBmaWxsPSIjMjIyIiAgLz48cmVjdCB4PSI0MzEiIHk9IjAiIHdpZHRoPSI5IiBoZWlnaHQ9IjEwMCUiIG9wYWNpdHk9IjAuMDU0NjY2NjY2NjY2NjY2NjciIGZpbGw9IiNkZGQiICAvPjwvc3ZnPg==
Como han dicho otros, puede usar la cadena de imagen codificada en base64 como imagen y los navegadores modernos lo entienden. Si decodifica esto, es como: data: <Type>, <Encoding>, <Encoded data string>
Entonces, la imagen en cuestión es una imagen SVG, cuando la abres en el navegador y tratas de guardarla usando: Comando + S / Ctrl + S, identificará correctamente el tipo de imagen que será svg.
Cada imagen enviada al navegador, puede ser copiada, de una forma u otra. Puede hacer que sea más difícil para las personas que no son oncontextmenu tecnología deshabilitando el clic derecho en el oncontextmenu y el arrastre del ratón en una ondrag . Esto evitará que el usuario haga clic con el botón derecho en la imagen, la guarde y la arrastre al escritorio.
Pero, como dije, y muchos otros también dicen, es que siempre será posible descargar la información que se envía al navegador, de una forma u otra.
El conocimiento es poder:
- Abra Chrome y vaya a https://guides.github.com/activities/hello-world/
- Haga clic derecho en la "imagen" deseada
- Haga clic en "Inspeccionar"
- Mira en la pestaña Estilos
- Haga clic con el botón derecho en
element.style->background-image->url->blue hyperlink containing data:image - Haga clic en "Abrir enlace en una nueva pestaña"
- Ctrl + s
Básicamente, si su navegador web muestra algo, entonces es posible guardar / descargar, y punto.
La imagen del encabezado en el enlace se genera a partir de una cadena de imagen codificada en BASE64 en su CSS. Cualquier navegador moderno puede entender este tipo de imagen y analizarla. En este caso, la imagen es una imagen SVG (Gráficos vectoriales escalables) codificada, pero también podría ser una imagen JPEG, PNG, GIF o BMP.
En la fuente, verás un div con una imagen de fondo que parece una cadena distorsionada muy larga:
<div style="background-image: url(data:image/svg+xml;base64, BASE64-ENCODED-IMAGE-STRING">
(Reemplace BASE64-ENCODED-IMAGE-STRING por el original de la fuente de la página)
En este sitio web, por ejemplo, puede generar una cadena de imagen codificada en BASE64.
Sin embargo, esto NO significa que la imagen no pueda ser guardada o copiada por un usuario.
Al usar este sitio web, por ejemplo, puede decodificar la imagen en una forma que un usuario final puede guardar / copiar: http://freeonlinetools24.com/base64-image .
Como @aavrug señaló a continuación, esto también puede hacerse usando las herramientas del desarrollador en cualquier navegador.
como señalaron otros usuarios, algunos navegadores sí dan la opción de guardar la imagen de fondo cuando se usa el botón derecho del mouse
Como señala @Viktor Mellgren: Además, siempre hay una captura de pantalla.
Conclusión
Una vez que una imagen está en el navegador, puede ser guardada por un usuario final. Para proteger mejor sus imágenes, mire las marcas de agua con herramientas o scripts especializados:
Todas las imágenes se pueden guardar:
Puede convertir la imagen en una cadena base64 como dicen otras respuestas, pero aún se puede guardar y copiar.
¿Y cómo?
Simplemente copie la cadena de imagen aquí http://codebeautify.org/base64-to-image-converter y obtendrá una imagen descargable.
Y lo más importante: no coloque nada en Internet que no quiere que nadie descargue. Descargar imágenes que no se supone que debas poder descargar fue uno de los primeros trucos que aprendí a principios de la era Netscape y no estoy solo en esto.
Si desea vender contenido de imágenes, publique solo una muestra parcial en baja calidad o agregue marcas de agua. Agregue algunas notas de derechos de autor que indiquen que las imágenes son de su propiedad y no está permitido publicarlas en ningún otro lugar sin su consentimiento (o compensación) para que el comprador no las distribuya a voluntad.
El uso de la codificación de base 64 o similar tiene sus beneficios. En primer lugar, el usuario no puede hacer un clic incorrecto en la imagen como fondo de escritorio. Y, en segundo lugar, uno tiene que hacer un poco de trabajo para obtener la imagen, de modo que probablemente estén conscientes de que no deben hacerlo y probablemente consideren si vale la pena. Además, si dificulta los motores de búsqueda de imágenes, entonces limita seriamente la copia "no autorizada".
No tengo estadísticas para respaldar mis palabras, pero en mi experiencia, los diseñadores de IU (y demás) toman gran cantidad de contenido de los resultados de búsqueda de imágenes. Y a partir de los bocetos de la interfaz de usuario, estas imágenes se introducen accidentalmente en producción, marketing, etc. Entonces, básicamente, si su imagen termina en los motores de búsqueda de imágenes, Internet la posee.
Ya que todos explicaron cómo agarrar el código base64 de la imagen y pegarlo en un convertidor, hay otra opción. Aún más simple: abre la página en cuestión con Firefox. Seleccione ''Ver información de la página'' en el menú contextual. Seleccione la pestaña ''Medios''. Seleccione la imagen de la lista.
No es necesario convertir el código base64. Firefox ya te proporciona la imagen y el botón "Guardar como ...".