ユニアプリ開発H5プロジェクトで指定したビューを画像として保存する方法

1. 依存関係をインストールする

安装这两个依赖
    "html2canvas": "^1.4.1",
    "image-tools": "^1.4.0",
npm安装命令:
	npm -i -s html2canvas image-tools

2. コードの実装
   コードは vue を使用して実装されます。ここで、imageWrapper1 はビュー タグの参照です。例:
   
   js コード:

	toImage() {
      uni.showLoading({
        title: '加载中'
      });
      html2canvas(this.$refs.imageWrapper1.$el).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        base64ToPath(dataURL).then(path => {
          this.saveHeadImgFile(path, 'test1.png')
          uni.hideLoading();
        })
      });
    },
    saveHeadImgFile(domImg, filename) {
      // 创建隐藏的可下载链接
      let eleLink = document.createElement('a');
      eleLink.href = domImg;
      eleLink.download = filename;
      eleLink.style.display = 'none';
      // 触发点击
      document.body.appendChild(eleLink);
      eleLink.click();
      // 然后移除
      document.body.removeChild(eleLink);
    }

3. 必要に応じて this.toImage() を呼び出すだけです
4. 知らせ：
   • 複数の呼び出しが必要な場合は、実行中の干渉を避けるためにコードを変更できます。
     方法 1: それぞれの a タグに新しい ID を与え、その ID に従って a タグを削除します。
     方法 2: setTimeout 関数を使用して実行を遅らせます (必ずしも安全ではありません)
     方法 3: 最初の実行が終了した後、コールバック関数内のメソッドを呼び出して次の画像をダウンロードします
   • 要求されたネットワーク イメージは傍受できない可能性があります。解決策がある場合はご連絡ください。現在の解決策は、背景イメージを静的ディレクトリに直接置くことです。