▷ Capturar área de pantalla y copiar al portapapeles [SOLUCIONADO]

Tomando capturas de pantalla con JavaScript y almacenándolas en el Portapapeles

Tomar una captura de parte de la pantalla y transferirla al portapapeles es una funcionalidad que puede ser de gran utilidad en diversas aplicaciones web, permite a los usuarios copiar rápidamente información visual sin la necesidad de herramientas de edición de imagen externas. En este artículo, exploraremos cómo podemos implementar esta función en JavaScript.

Habilitar permisos y capturar la pantalla

El primer paso para capturar un segmento de pantalla es solicitar al usuario el permiso para capturar el contenido de su pantalla. Esto se hace usando la API getDisplayMedia(), disponible en el objeto navigator.mediaDevices. Veamos un ejemplo de cómo se solicitan los permisos:

navigator.mediaDevices.getDisplayMedia({ video: true })
    .then(stream => {
        // Maniobras con la transmisión de video aquí
    })
    .catch(error => {
        console.error("Error: ", error);
    });

Crear canvas y dibujar la imagen

Una vez que tenemos la transmisión de la pantalla, el siguiente paso es convertir el video en una imagen estática para luego poder capturar solo el área deseada. Esto lo hacemos dibujando la imagen en un elemento <canvas>. A continuación, se muestra cómo crear un canvas y dibujar la pantalla en él:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// Asumimos que stream es la transmisión que obtuvimos antes
var video = document.createElement('video');
video.srcObject = stream;
video.onloadedmetadata = function() {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    // Ahora el canvas contiene la captura de pantalla
};

Seleccionar zona de interés y obtener datos de imagen

Para seleccionar un área específica de la captura, necesitamos obtener los datos de solo esa parte. Es aquí donde definimos las dimensiones y posición del fragmento que queremos extraer del canvas. El siguiente código ilustra cómo capturar una sección:

var x = 10; // Posición x del inicio de la sección
var y = 10; // Posición y del inicio de la sección
var width = 100; // Ancho de la sección
var height = 100; // Alto de la sección
var imageData = ctx.getImageData(x, y, width, height);

Convertir el fragmento capturado a una imagen y copiar al portapapeles

Posteriormente, con los datos de imagen de la sección seleccionada, podemos crear una nueva imagen para luego usar la API del portapapeles y enviar la imagen recortada al mismo. Veamos cómo se hace:

canvas.toBlob(function(blob) {
    var item = new ClipboardItem({ "image/png": blob });
    navigator.clipboard.write([item]);
}, 'image/png');

Integración del código para una solución completa

Todo el proceso descrito anteriormente puede ser agrupado en una función para que, con un solo llamado, se realice la operación de extraer un área de la pantalla y copiarla al portapapeles. Veamos cómo sería una implementación completa:

function captureAreaToClipboard(x, y, width, height) {
    navigator.mediaDevices.getDisplayMedia({ video: true })
        .then(stream => {
            var video = document.createElement('video');
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            video.srcObject = stream;
            video.onloadedmetadata = function() {
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                ctx.drawImage(video, 0, 0);

                var imageData = ctx.getImageData(x, y, width, height);
                var outputCanvas = document.createElement('canvas');
                var outputCtx = outputCanvas.getContext('2d');
                outputCanvas.width = width;
                outputCanvas.height = height;
                outputCtx.putImageData(imageData, 0, 0);

                outputCanvas.toBlob(function(blob) {
                    var item = new ClipboardItem({ "image/png": blob });
                    navigator.clipboard.write([item]);
                }, 'image/png');
            };
        })
        .catch(error => {
            console.error("Error: ", error);
        });
}

// Ejemplo de uso
// captureAreaToClipboard(10, 10, 200, 200);

Consideraciones de seguridad y compatibilidad

Es importante destacar que la funcionalidad de captura de pantalla y acceso al portapapeles tiene ciertas restricciones de seguridad. Los navegadores suelen requerir que la página se sirva a través de HTTPS y que las acciones que desencadenan estas APIs sean consecuencia de una interacción del usuario, como un clic. Además, hay que tener en cuenta la compatibilidad entre navegadores y verificar que las APIs utilizadas son soportadas por el navegador del usuario.