Fonctionnalité de capture d'écran JavaScript dans l'extension Chrome

Question

J'ai effectué de nombreuses recherches sur la prise de photos à l'aide de JS, mais aucune ne semble utile. Certaines personnes conseillent d'utiliser les contrôles ActiveX, mais cela ne fonctionne pas dans mon cas. Je veux pouvoir prendre une photo et la télécharger sur le serveur en utilisant JS.

Answer 1

Je ne sais pas si cette fonctionnalité était déjà disponible lorsque la réponse originale a été donnée, mais Google a maintenant fourni un exemple montrant comment prendre une capture d'écran :

http://developer.chrome.com/extensions/samples.html

Recherchez « Test Screenshot Extension » sur cette page.

Mise à jour : Voici un nouvel exemple utilisant l'API desktopCapture :

https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/apps/samples/desktop-capture

Answer 2

Puisque vous utilisez cette fonctionnalité dans une extension Chrome, l'Tab API dispose d'une méthode appelée captureVisibleTab qui permet de capturer la zone visible de l'onglet actuellement sélectionné dans la fenêtre spécifiée.

Pour utiliser cette méthode, ajoutez simplement des "onglets" à votre manifeste permissions. Ensuite depuis votre page d'arrière-plan, popup (ou toute autre page d'extension), appelez simplement la méthode comme ceci :

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // 您可以将该图像添加到HTML5画布或元素中。
});

Vous pouvez contrôler les propriétés en ajoutant {quality: 50} et également modifier le format, qui sont toutes décrites en détail dans la documentation ci-dessus.

La beauté du HTML5 est que vous pouvez utiliser HTML5 Canvas pour modifier cette image, vous pouvez facilement manipuler, convertir, modifier, recadrer, etc.

J'espère que c'est ce que vous recherchiez ! Bonne année!