uni-app使用html2canvas

大肥肥的小肥肥 發表於 2021-3-12 14:38:00

uni-app html2canvas在web端兼容性挺好的，但是对于app来说就不太行
uni-app App是vue页面，无法获取window对象，所以我们就需要配合render.js来完成canvas的绘制
人为触发比如点击按钮实现起来很方便，但是有时候我们需要进来就执行绘制的方法，那么就需要如下操作：
 
在开发过程中我们将HTML2canvas封装成一个组件，通过prop传递ID参数
在组件中，通过prop接收ID的，ID的变化来触发render.js里面的函数
html2canvas.vue:
 
<div class="cnblogs_code">
<div class="cnblogs_code">
<pre><template>
<view>
 <view class="html2canvas" :prop="domId" :change:prop="html2canvas.create">
 <slot></slot>
 </view>
</view>
</template>

<script>
import { base64ToPath } from '@/utils/image-tools.js';
export default {
 name: 'html2canvas',
 props: {
 domId: {
 type: String,
 required: true
 }
 },
 methods: {
 async renderFinish(base64) {
 try{
 const imgPath = await base64ToPath(base64, '.jpeg');
 console.log(imgPath)
 this.$emit('renderFinish', imgPath);
 }catch(e){
 //TODO handle the exception
 console.log('html2canvas error', e)
 }
 },
 showLoading() {
 uni.showLoading()
 },
 hideLoading() {
 uni.hideLoading();
 }
 }
}
</script>

<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
methods: {
 async create(domId) {
 try {
 const timeout = setTimeout(async ()=> {
 const shareContent = document.querySelector(domId);
 const canvas = await html2canvas(shareContent,{
 width: shareContent.offsetWidth,//设置canvas尺寸与所截图尺寸相同，防止白边
 height: shareContent.offsetHeight,//防止白边
 logging: true,
 useCORS: true
 });
 const base64 = canvas.toDataURL('image/jpeg', 1);
 this.$ownerInstance.callMethod('renderFinish', base64);
 clearTimeout(timeout);
 }, 500);
 } catch(error){
 console.log(error)
 }
 }
}
}
</script>

<style lang="scss">

</style></pre>
</div>
 
</div>
index.vue:
index页面直接获取生成后的数据
<div class="cnblogs_code">
<pre></pre>
<div class="cnblogs_code">
<pre><html2canvas ref="html2canvas" :domId="domId" @renderFinish="renderFinish">
 <view class="invite-image" id="poster" :class="i18n.locale=='en'?'en':'zh'">
 <view class="code-image">
 <view class="qrimg">
 <tki-qrcode
 ref="qrcode"
 :cid="cid"
 :val="dowaload"
 :size="size"
 :unit="unit"
 :onval="onval"
 foreground="#000000"
 pdground="#000000"
 :loadMake="loadMake"
 :loadingText="i18n.t('base.textLoading')"
 @result="qrR" />
 </view>
 </view>
 <view class="invite-text">{{i18n.t('user.invite.inviteCode')}}</view>
 <view class="invite-code">{{userInfo.code}}</view>
 </view>
 </html2canvas></pre>
</div>
<pre></pre>
中间是二维码部分可以忽略，从而就可以实现海报的绘制，保存的时候重复的照片只会保存一张，有时候可能会失败，就要返回重新进入再次保存
IOS可能存在错误，由于时间有限，没来得及研究，就只看了安卓的，后面有机会再研究，要是谁做出来了，也欢迎分享!
<pre> /**
 * 渲染完毕接收图片
 * @param {String} filePath
 */
 renderFinish(filePath) {
 console.log(filePath);
 this.filePath = filePath;
 that.btnShow=true
 console.log("filePath", filePath)
 },</pre>
</div>
  
来源：https://www.cnblogs.com/aotuboke/p/14523789.html

頁: [1]

琼殿技术论坛's Archiver

uni-app使用html2canvas