vueでポスターを生成する

要件：共有ボタンをクリックするとポスターのポップアップウィンドウが表示されます。

プロジェクトの依存関係

yarn add html2canvas
yarn add qrcodejs2

// 依存性の紹介
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'

ポップアップウィンドウのhtml構造

<div>
 <div class="close forbidSave" @click="show = false"></div>
 <img v-if="imgSrc" :src="imgSrc" alt="">
 <div v-else>
 <div ref="modelImg" class="preimg" >
 <img class="banner" :class="{'forbidSave': forbidSave && !hasCreateCode}" alt="">
 <div class="content">
 <div ref="qrcode" class="share-model-img-content-code"></div>
 </div>
 </div>
 </div>
<div>

ポップアップウィンドウからイメージを生成

import QRCode from 'qrcodejs2'
const url = window.location.href
this.$nextTick(() => {
 new QRCode(this.$refs.qrcode, {
 render: 'canvas',
 width: 100,
 height: 100,
 typeNumber: -1,
 background: '#fff',
 correctLevel: 0,
 text: url
 })
 this.hasCreateCode = true
})

注意事項

html2canvas(this.$refs.modelImg, {
 useCORS: true,
 dpi: window.devicePixelRatio * 2,
 scale: 2,
 width: this.$refs.modelImg.offsetWidth,
 heigth: this.$refs.modelImg.offsetHeight
}).then(canvas => {
 let dataURL = canvas.toDataURL('image/png', 1.0)
 if (dataURL) {
 this.imgSrc = dataURL
 this.forbidSave = false
 }
})

注意事項

1. ポップアップウィンドウの内容は、キャンバスを介して、元のドムからディスプレイに代わるイメージに変換され、イメージは長押しで直接保存したり、友人に送信することができます。

2. イメージに変換されたdomでは、ポップアップイメージ要素の長押し保存を制限する必要があります。

.forbidSave {
 pointer-events:none;
 }

1. 依存関係qrcodejs2およびhtml2canvas