uni-app 中使用 html2canvas 生成圖片

zhang_you_wu發表於2024-06-08
APPHTMLCanvas

1.在專案中安裝 html2canvas 外掛

npm install html2canvas -D

在需要生成圖片的頁面中引入 html2canvas 外掛

不過此時需要在 頁面中新建一個 script 節點，將 lang 屬性設定為renderjs

如對 renderjs 不瞭解，可看下uniapp 官網的說明

2.編寫生成圖片的程式碼

<template>
    <view class="demo">
       
        <button @click="text.onClick">
			生成圖片
		</button>
		
		<view class="canvas-module" id="pagePoster">
			<view class="user-info">
		   
				<view class="user-detail">
					<view class="user-name">測試</view>
					<view class="user-num">12345678901</view>
				</view>
			</view>
		
			<view class="section">
				<view class="title">簡單介紹</view>
				<view class="detail-text">
				  把我生成圖片
				</view>
			</view>
		</view>
		<image :src="posterUrl" style="width: 100%; height: 300px;"></image>
		 
    </view>
</template>
<!-- 普通的script標籤 -->
<script>
    export default {
		data(){
            return {
				posterUrl: "",
            }
        },
        methods:{
            // 獲取生成的base64 圖片路徑
            receiveRenderData(val) {
				console.log("呼叫方法成功")
				var posterUrl = val.replace(/[]/g, ''); // 去除base64位中的空格
				console.log(posterUrl)
                this.posterUrl = posterUrl;
            },
        }
    }
</script>
<!-- renderjs的script標籤 -->
<script module="text" lang="renderjs">
	import html2canvas from 'html2canvas'
    export default {
       
		methods:{
			// 生成圖片需要呼叫的方法
			onClick(event, ownerInstance) {
				//console.log("22222")
				setTimeout(() => {
					const dom = document.getElementById('pagePoster') // 需要生成圖片內容的 dom 節點
					html2canvas(dom, {
					  width: dom.clientWidth, //dom 原始寬度
					  height: dom.clientHeight,
					  scrollY: 0, // html2canvas預設繪製檢視內的頁面，需要把scrollY，scrollX設定為0
					  scrollX: 0,
					  useCORS: true, //支援跨域
					  // scale: 2, // 設定生成圖片的畫素比例，預設是1，如果生成的圖片模糊的話可以開啟該配置項
					}).then((canvas) => {
						// 生成成功
						console.log("生成成功")
						// html2canvas 生成成功的圖片連結需要轉成 base64位的url
						ownerInstance.callMethod('receiveRenderData', canvas.toDataURL('image/png'))
					}).catch(err=>{
						console.log("生成圖片失敗");
					})
				}, 300)
			}
			

           
        }
    }
</script>

　　

相關文章