Copy Paste Clipboard png Transparent.js

Copy Paste Clipboard png Transparent.js

<div class="foto">
    <img src="foto1.png">
    <button class="copy-foto" data-img-src="foto1.png">Copiar</button>
</div>
<div class="foto">
    <img src="foto2.png">
    <button class="copy-foto" data-img-src="foto2.png">Copiar</button>
</div>


<script>


document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.copy-foto').forEach(button => {
        button.addEventListener('click', async () => {
            try {
                const imgSrc = button.getAttribute('data-img-src');
                const imgBlob = await fetchImageAsBlob(imgSrc);
                await copyImageToClipboard(imgBlob);
                console.log('Imagem copiada para a área de transferência!');
            } catch (err) {
                console.error('Erro ao copiar imagem:', err);
            }
        });
    });
});

async function fetchImageAsBlob(imgSrc) {
    const img = await loadImage(imgSrc);
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    return new Promise(resolve => {
        canvas.toBlob(resolve, 'image/png');
    });
}

async function loadImage(src) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = src;
    });
}

async function copyImageToClipboard(blob) {
    const data = [new ClipboardItem({ "image/png": blob })];
    await navigator.clipboard.write(data);
}


</script>