vue html2canvas utilisation

1. Installation

Installer NPM

npm install --save html2canvas

Installer du fil

yarn add html2canvas

 

2. Utilisez

importer html2canvas depuis 'html2canvas'

<div class="imageWrapper" ref="imageWrapper">
  <img class="real_pic" :src="dataURL" />
  <slot></slot>
</div>

À l'intérieur de la fente se trouvent les éléments DOM que vous devez transformer en images.

data() {
  return {
    dataURL: ''
  }
},

dataURL est l'adresse base64 de la dernière image convertie, qui peut être affichée dans la balise img.

1 2 3 4 5 6 7 8 9 dix 11

methods: {   toImage() {   html2canvas(this.$refs.imageWrapper,{     backgroundColor: null   }).then((canvas) => {     let dataURL = canvas.toDataURL("image/png");     this.dataURL = dataURL;   }); } }

L'utilisation de html2canvas est très simple, mais la version 1.0.0 a changé le libellé en promesse et récupère l'objet canvas dans la méthode .then.

3. Bogues courants

1. L'image générée a une bordure blanche

Configurez backgroundColor: null dans l'élément de configuration.

2. Certaines images ne peuvent pas être affichées et des erreurs sont signalées (généralement des erreurs interdomaines)

C'est le bogue le plus courant. Ce plug-in ne peut pas générer d'images inter-domaines. J'ai lu la documentation officielle et je l'ai configuré. Baidu n'a pas de bon moyen. Enfin, laissez le backend convertir directement les images inter-domaines en base64. Il résout parfaitement ce problème.

3. Une fois l'image générée, elle écrasera le DOM d'origine et produira un effet clignotant

Laissez l'image générée d'abord être masquée, puis affichez-la après sa génération. (Non testé sur les téléphones mobiles, l'effet peut ne pas être satisfaisant)

4. Bogues courants dans la version classique (0.5.0)

1. L'image générée est floue
2. L'image générée est incomplète en raison d'images interdomaines

Baidu sur Internet a de nombreuses solutions à ces deux problèmes.

L'énorme gouffre de html2canvas sous vue

utilisation

<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000; ">Hello world!</h4>
</div>

1 2 3 4 5 6 7 8 9 dix 11 12 13 14

html2canvas(document.querySelector("#capture")).then(canvas => {   document.body.appendChild(canvas) });    ```        ``` html2canvas(document.querySelector("#capture") {   async: true }).then(canvas => {   document.body.appendChild(canvas) });

Si vous souhaitez configurer certains paramètres, vous pouvez effectuer un objet après avoir passé le dom.Les documents sur le site officiel peuvent être vérifiés.