Aplicar automáticamente factor de escala a las imágenes pegadas del portapapeles

Estoy usando una pantalla HiDPI con un factor de escala del 150%. Cada vez que creo una captura de pantalla y la pego en Discourse, todo es demasiado grande. Necesito aplicar manualmente un factor de escala a la imagen para que se vea bien.

Supongamos que creo una captura de pantalla del siguiente cuadro que tiene un tamaño de 110x110px.

Cuando pego esa captura de pantalla (Ctrl+V) en el editor, obtengo una imagen de 167x167px.


![image|167x167](upload://fWfpRZXtBMVBXjcMTAPOwtG5bND.png)

Idealmente, obtendría una imagen con el tamaño correcto sin tener que recordar el porcentaje correcto para reducir la imagen (que es del 66% en mi caso).


![image|167x167, 66%](upload://fWfpRZXtBMVBXjcMTAPOwtG5bND.png)

Veo 2 opciones para eso. Si el factor de escala no es igual a 1:

  1. Agrega automáticamente el factor de escala correcto al Markdown de la imagen
    ![image|167x167, 66%](...)

o

  1. Agrega el factor de escala correcto a la caja de herramientas de la imagen en la ventana de vista previa
    image

El factor de escala se puede calcular en JavaScript:

Math.floor(100 / window.devicePixelRatio)
6 Me gusta

Esta es una gran idea, yo también tengo problemas con esto todo el tiempo.

Pensando en voz alta, ¿esto podría causar falsos positivos si el usuario copia/pega una imagen que no es una captura de pantalla?

Además, en cuanto a la reimplementación, no veo por qué no podemos hacer tanto la 1 como la 2.

4 Me gusta

Sí, será un falso positivo cuando pegues una imagen que no sea una captura de pantalla. Me pregunto qué se inserta con más frecuencia, capturas de pantalla u otras imágenes. :thinking:

1 me gusta

No estoy seguro, supongo que depende del usuario y del tipo de fotos que publiques. A veces copio una imagen en mi teléfono y la pego en el escritorio, así que también existe esa situación.

De cualquier manera, comenzar con la opción 2 evitaría los falsos positivos, simplemente proporcionaría un tamaño alternativo predeterminado más agradable en la vista previa.

1 me gusta

Parece que las herramientas de captura de pantalla codifican información sobre DPI en los archivos PNG. Por ejemplo, si subo una captura de pantalla de mi entorno macOS de alta DPI a https://www.metadata2go.com/, veo

Si desactivo HiDpi, esos campos de metadatos parecen desaparecer del archivo.

¿Ves algo similar en Windows @gerhard? Si es así, tal vez haya una manera de leerlo en JS y adivinar la densidad de píxeles.

También me encontré con este gist que podría ser útil.

2 Me gusta

También estoy investigando el análisis de los primeros bytes de los PNG para los PNG animados remotos pierden su animación, así que tenemos múltiples casos de uso para un hook aquí.

2 Me gusta

Estoy usando Spectacle en Linux y no parece añadir nada a los metadatos.

El código de ese gist devuelve false para una captura de pantalla que creé en mi sistema Linux con un factor de escala del 150%. El fragmento pHYs de esa imagen se ve así:

{ xDpu: 3780, yDpu: 3780, xDpi: 96, yDpi: 96, unit: 'meter' }
3 Me gusta