javascript - Comment utiliser Canvas pour convertir le contenu d'un div en image sans utiliser de plug-in.

Question

De nombreuses personnes sur Internet ont mentionné utiliser Canvas, mais la partie clé de conversion du contenu semble être principalement assistée par des plug-ins, et le seul exemple que j'ai trouvé qui ne reposait pas sur des plug-ins ne fonctionnait pas correctement. Je voudrais demander à un maître comment convertir le contenu de p en image sans utiliser de plug-in~~

Answer 1

Ce n'est pas que vous ne pouvez pas utiliser de plug-ins, mais savez-vous quels principes sont utilisés en interne pour implémenter les plug-ins ? Comprenez-vous les principes généraux et la logique ? Les plug-ins ne sont pas une méthode d’implémentation ! Les plugins ne sont qu’une solution ! Peut-être que vous l'écrivez vous-même, et la méthode d'implémentation est la même que celle du plug-in !

Retour à la question, est-il réalisable de convertir p en image ? Quelle est la charge de travail en êtes-vous conscient ? En termes de faisabilité, il existe des plug-ins qui peuvent être implémentés, ce qui signifie que cela est réalisable dans le domaine front-end existant. Quel est le principe de mise en œuvre ?

La première chose à laquelle vous devez penser est que le code frontal s'exécute dans le navigateur. Eh bien, la première chose à laquelle nous devons penser est la suivante : le navigateur fournit-il directement ce type d’API ? Que recherchent les API du navigateur ? Recherchez la documentation BOM DOM. Pour autant que je sache, Firefox semble être capable d'utiliser un certain nœud comme arrière-plan d'un certain élément. Il a inventé la syntaxe background: -moz-element() en CSS, et il n'existe pas d'API similaire aux captures d'écran.

Vous avez également évoqué la toile. En tant que développeur, il est préférable de rester curieux. Vous pouvez comprendre très brièvement comment ils implémentent ce type de plug-in. Vous n'avez pas besoin de connaître tous les détails pour accomplir cette fonction, mais vous devez savoir pourquoi ce principe de mise en œuvre fonctionne.

OK, comment dessiner p sur toile ? Canvas vous donne la possibilité de traiter les pixels et, en théorie, vous pouvez tout dessiner. Le plug-in lit p et le style de p, dessine p sur le canevas, puis recurse les nœuds enfants de p. D'accord, est-ce que ce travail est facile ? Ce n’est certainement pas simple ! Quel dieu peut construire une roue à mains nues ? Alors collez la roue que vous avez créée au sol de cette question pour vous donner une réponse ? Quel grand dieu peut vous enseigner ?

La différence entre vous et le maître n'est pas que le maître puisse écrire html2canvas à main levée, mais que le maître puisse analyser clairement les problèmes lorsqu'ils les rencontrent.

Bien sûr, je ne suis pas un maître, je ne peux m'empêcher de me plaindre quand je vois ce genre de problème.

Answer 2

Vous devez d'abord convertir p en svg, puis convertir svg en toile, mais il y a quelques points auxquels faire attention :

1. Lors de la conversion de HTML en SVG, veuillez noter qu'il ne peut pas y avoir d'éléments de contrôle comme l'entrée, sinon la conversion échouera

 ;

2. Lors du processus de conversion de HTML en SVG, vous devez parcourir tous les styles d'éléments HTML et les convertir en styles en ligne avant de les convertir en SVG, sinon vous risquez de voir un espace.

Answer 3

En fait, c'est le besoin que vous avez mentionné. Vous pouvez prendre un virage

Vous pouvez d'abord prendre une capture d'écran, puis la coller dans l'entrée pour lier un événement paste de collage d'entréepaste 事件
然后 event.clipboardData.items 用 var img = new Image() 读出来
最后放在 canvas 里面 用context.dramImage(img,0,0) var url = context.toDataURL('image/png')
这不就是一个图片了吗
最后用 const a = document.createElement('a') a.setAttribute('download',true) a.setAttribute('href',url) a.click()Ensuite, event.clipboardData.items est lu à l'aide de var img = new Image()

Enfin placé dans canvas utilise context.dramImage(img,0,0) var url = context.toDataURL('image/png') 🎜N'est-ce pas juste une image ?🎜Enfin, utilisez const a = document .createElement('a') a.setAttribute('download',true) a.setAttribute('href',url) a. cliquez() et l'image sera téléchargée :)🎜