本文已同步到專業技術網站 www.sufaith.com, 該網站專注于前后端開發技術與經驗分享, 包含Web開發、Nodejs、Python、Linux、IT資訊等板塊.

功能需求:

• 海報有1張背景圖, 海報上的文案內容動態變化
• 分享鏈接做成二維碼, 放在背景圖的固定位置上
• 在微信環境里, 海報可長按保存或轉發

整體實現流程:

按海報樣式設計好html元素的頁面布局, 包括背景圖,文本,以及二維碼圖片的位置

使用 qrcodejs2庫 將分享鏈接合成二維碼圖片,賦值到html中的二維碼元素上

使用 html2canvas庫 將html元素整體轉換成一張海報

使用的第三方庫:

• qrcodejs2 (合成二維碼)
• html2canvas (html元素轉換為圖片)

下面是具體實現步驟:

一、設計html元素布局

template部分

<template><!-- 海報html元素 --><div id="posterHtml" :style="{backgroundImage: 'url('+posterHtmlBg+')'}" v-show="false"><div>{{posterContent}}</div><!-- 二維碼 --><div class="qrcode"><div id="qrcodeImg"></div></div></div> </template>

script部分:

<

二、合成二維碼圖片

methods

三、將html元素轉換成海報圖片

methods

注意: 添加html2canvas對象的onclone方法是為了 生成一個復制的虛擬組件，設置為顯示，即可獲取進行繪制，且虛擬組件不會顯示在頁面上.

總結

以上是生活随笔為你收集整理的div生成图片_Vue生成分享海报(含二维码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。