☰

Copiar imagem do Canva Premium [PT-BR]

Copie ou abra as imagens premium do Canva para usar onde quiser

// ==UserScript==
// @name         Copiar imagem do Canva Premium [PT-BR]
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Copie ou abra as imagens premium do Canva para usar onde quiser
// @author       JKCHSTR
// @match        https://www.canva.com/design/*
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    console.log('[Canva Tools] Script iniciado');

    function createMenu(container, imageUrl) {
        const menuContainer = document.createElement('div');
        menuContainer.style.position = 'absolute';
        menuContainer.style.top = '5px';
        menuContainer.style.left = '5px';
        menuContainer.style.zIndex = '999999';

        const button = document.createElement('button');
        button.innerHTML = '🖼️';
        button.style.background = '#fff';
        button.style.border = '1px solid #ccc';
        button.style.borderRadius = '3px';
        button.style.padding = '2px 4px';
        button.style.cursor = 'pointer';
        button.style.fontSize = '12px';
        button.title = 'Opções da imagem';
        button.className = 'canva-menu-button';

        const dropdown = document.createElement('div');
        dropdown.style.position = 'absolute';
        dropdown.style.top = '25px';
        dropdown.style.left = '0';
        dropdown.style.background = '#fff';
        dropdown.style.border = '1px solid #ccc';
        dropdown.style.borderRadius = '3px';
        dropdown.style.boxShadow = '0 1px 2px rgba(0,0,0,0.1)';
        dropdown.style.display = 'none';
        dropdown.className = 'canva-dropdown';

        const option1 = document.createElement('div');
        option1.textContent = 'Nova guia';
        option1.style.padding = '4px 8px';
        option1.style.cursor = 'pointer';
        option1.style.fontSize = '12px';
        option1.style.whiteSpace = 'nowrap';
        option1.addEventListener('click', () => {
            window.open(imageUrl, '_blank');
            setTimeout(() => toggleMenu(false), 1000); // Mantém aberto por 1s
        });

        const option2 = document.createElement('div');
        option2.textContent = 'Copiar img';
        option2.style.padding = '4px 8px';
        option2.style.cursor = 'pointer';
        option2.style.fontSize = '12px';
        option2.style.whiteSpace = 'nowrap';
        option2.addEventListener('click', async () => {
            try {
                const response = await fetch(imageUrl);
                const blob = await response.blob();

                const img = await new Promise(resolve => {
                    const i = new Image();
                    i.onload = () => resolve(i);
                    i.src = URL.createObjectURL(blob);
                });

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

                canvas.toBlob(async (pngBlob) => {
                    await navigator.clipboard.write([
                        new ClipboardItem({ 'image/png': pngBlob })
                    ]);
                    option2.style.backgroundColor = '#d4edda';
                    setTimeout(() => {
                        option2.style.backgroundColor = '';
                        toggleMenu(false);
                    }, 1000);
                }, 'image/png');

            } catch (error) {
                console.error('[Canva] Erro:', error);
                option2.style.backgroundColor = '#f8d7da';
                setTimeout(() => {
                    option2.style.backgroundColor = '';
                    toggleMenu(false);
                }, 1000);
            }
        });

        const toggleMenu = (isOpen) => {
            dropdown.style.display = isOpen ? 'block' : 'none';
            button.innerHTML = isOpen ? '❌' : '🖼️';
            button.style.background = isOpen ? '#f0f0f0' : '#fff';
        };

        button.addEventListener('click', (e) => {
            e.stopPropagation();
            const isOpen = dropdown.style.display === 'block';
            toggleMenu(!isOpen);
        });

        document.addEventListener('click', (e) => {
            if (!menuContainer.contains(e.target)) {
                toggleMenu(false);
            }
        });

        dropdown.appendChild(option1);
        dropdown.appendChild(option2);
        menuContainer.appendChild(button);
        menuContainer.appendChild(dropdown);
        container.style.position = 'relative';
        container.appendChild(menuContainer);
    }

    function processContainers() {
        document.querySelectorAll('div.vMIRQg._1kUSIQ.D5BVoA.LFBd9g, div.qFtWQg').forEach(container => {
            if (container.querySelector('.canva-menu-button')) return;

            const themeElement = container.querySelector('span.theme.dark.vQEisA');
            if (!themeElement) return;

            const image = container.querySelector('img.A_yLpA');
            if (image) {
                console.log('[Canva] Imagem encontrada');
                createMenu(container, image.src);
            }
        });
    }

    const observer = new MutationObserver(processContainers);
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    processContainers();
})();