ウィジェット(Webページ)でのページショットの実装

2406 ワード

ウィジェットhtml 2 canvas

最近、小さなプログラムでページのスクリーンショットを実現する必要があるという需要があり、私は最初は公式に提供された拡張コンポーネントwxml-to-canvasを使用することを考えていましたが、実際には効果が悪く、まず実際のページを切り取るのではなく、wxmlとwxssに送らなければなりません.そして彼がサポートできる効果も少なく、需要の中で少し複雑な効果を満たすことはできません.最終的には、web-viewでロードされたページでhtml2canvasを使用して機能を実現することにしました.
じつコード
ページの部分はvueを使って、まずhtml2canvasをインストールする必要があります

npm install html2canvas

ページに挿入

import html2canvas from 'html2canvas';

スクリーンショットが必要なdomノードにrefプロパティを追加

 
      
 ...
document.body.scrollTop = 0;
//               ，         
html2canvas(this.$refs.page, {
  allowTaint: false,
  useCORS: true,
  width: document.body.scrollWidth,
  height: document.body.scrollHeight
  //                             
}).then(canvas => {
  this.savedPic = canvas.toDataURL('images/png')
  //                 
  ...
  //        a           
  //                        
  let a = document.createElement('a'),
    blob = this.dataURLToBlob(canvas.toDataURL('images/png'));
  a.setAttribute('href', URL.createObjectURL(blob));
  a.setAttribute('download', 'pic.png');
  document.body.appendChild(a);
  a.click();
  URL.revokeObjectURL(blob);
  document.body.removeChild(a);
});
...
  
   
Webページはオリジナルのウィジェットではないので、  されたスクリーンショットを    できないなど、   の  があります.モバイル  や  でもアナログaタグのクリックで  をダウンロードすることはサポートされていないが、   には  されたスクリーンショットを  し、ユーザーに  を く すように すことで  を  する  しか  できず、ユーザー  は うくなるが、スクリーンショット  がwxml-to-canvasよりも すぎることを  すると、まだ け れられる.
  にhtml2canvasの   について べると,    に  されていないスタイルはシャドウや    であり,その は   に  されていることが かった.Webページのピクチャは、ローカルピクチャまたはドメイン ネットワークピクチャをサポートする  があります.  を  する  では、    ではなくimgのラベルを    することをお めします.imgのラベルは、    よりはるかに   が いことを しています.

fabric-solo単機マルチノードシステム構成1

Mongodb 4.0 mongodbデータベースベース