2017-07-10 3 views
1

Je veux mettre en œuvre ctrl + c événement dans la toile (comme dans les peintres) de la région sélectionnée à la mémoire tampon du système d'exploitation. Basé sur this réponse Je peux ajouter copy écouteur et changer les données du presse-papiers là-bas - qui fonctionne parfaitement avec le texte. Mais je ne peux pas trouver comment mettre Image/ImageData objet là-bas. Voici la documentation MDN copy et setData. On dirait qu'il n'y a rien sur le format image/*. Eh bien Specification ne dit rien aussi bien. Mais je sens si premier param nommé format dans setData il devrait y avoir un moyen de mettre le fichier là.Comment définir Image à clipboardData dans l'événement oncopy

est ici où je viens jusqu'à présent:

document.addEventListener('copy', function(e) { 
    var data = ctx.getImageData(params.left, params.top, params.width, params.height); 
    var file = new File(data.data, "file.png", {type: "image/png"}); 
    e.clipboardData.items.add(file, 'image/png'); // This doesn't work, But it create the structure like on the image below(with items and types, but without FileList) 
    e.clipboardData.setDragImage(tool.img, 10, 10); // doesn't work 
    e.clipboardData.setData("image/png", tool.file); // doesn't work 
    e.preventDefault(); 
}) 

J'ai aussi trouvé la méthode setDragImage, je mis en œuvre, mais après avoir mis Image il ne semble pas dans un tampon.

REMARQUE:

Lorsque je colle l'image DE Planchette événement « coller » montre la structure d'événement comme le image ci-dessous, donc je suppose que je dois créer quelque chose de similaire. enter image description here

Une idée?

p.s. Je connais aussi document.execCommand('copy');, mais ça ne marche pas en chrome (du moins dans mon cas) donc je ne veux pas l'utiliser.

Répondre

1

Pour ne parler que de mes observations et enquête:

  • Chrome ne supporte pas le type "image/png", et ce n'est pas un format qui est requis par la spécification API du Presse-papiers. (Chrome bug.)

  • Firefox au moins essayer de mettre un DataTransferItem avec le type "image/png" le presse-papiers, mais je ne l'ai pas encore compris quel format de données à utiliser. (A base64 PNG, avec ou sans le préfixe data:image/png;base64,, ne fonctionne pas à coller dans PowerPoint, ni ne atob(<the base64 PNG without prefix>), pour autant que je l'ai expérimenté.)

  • "text/html" est nécessaire cependant. Lorsqu'un événement est déclenché copy dans Google Docs, il semble télécharger une image, met alors un fragment HTML dans le presse-papier qui ressemble à ceci:

    <meta charset="utf-8"> 
    <b style="font-weight:normal;" id="docs-internal-guid-abcdefg-abcd-abcd"> 
        <img src="https://lh4.googleusercontent.com/a-very-long-identifier" width="659px;" height="312px;" /> 
    </b> 
    

    utilisant evt.clipboardData.setData("text/html", fragment). Ensuite, par exemple. Les applications Microsoft Office téléchargent cette image et l'incorporent dans le document. Je ne sais pas si ça fait la même chose sur MacOS ou Linux. En passant, les URI de données ne fonctionnent pas en tant que imgsrc.