开发问题

uniapp+htmal2canvas 实现海报分享的功能。

问题 1：html2canvas 在 uniapp 小程序环境下不能使用。

• 原因：html2canvas 为网页库，在 uniapp 的逻辑层环境可能运行会缺少方法导致报错。

• 解决方案：可以通过 uniapp 的 renderjs 的让其运行在视图层。renderjs 相关文档

• 相关代码：

  <template>
    <view @click="renderScript.emitData"></view> //只能在此调用，逻辑层不能调用
  </template>
  <script>
  	export default {
  		methods: {
  			async receiveRenderData(val) {
                console.log(val) // 接受传过来参数
  			},
  		},
  	}
  </script>
  <script module="renderScript" lang="renderjs">
  	import html2canvas from 'html2canvas';
  	export default {
  		methods: {
  			// 发送数据到逻辑层
  			emitData(e, ownerVm) {
  				let targetDom = document.getElementsByClassName('lb-big-box')[0]
  				targetDom.style.width = targetDom.scrollWidth + 'px'
  				targetDom.style.height = targetDom.scrollHeight + 'px'
  				html2canvas(targetDom, {
  					useCORS: true,
  					width: targetDom.scrollWidth, //dom 原始宽度
  					height: targetDom.scrollHeight,
  					logging: true,
  					scale: 5
  				}).then((canvas) => {
  					targetDom.style.width = targetDomWidth + 'px'
  					targetDom.style.height = targetDomHeight + 'px'
  					ownerVm.callMethod('receiveRenderData', {
  						url: canvas.toDataURL('image/png'),
  						width: targetDom.scrollWidth, //dom 原始宽度
  						height: targetDom.scrollHeight,
  					})
  				});
  			},
  		}
  	};
  </script>

问题 2：生成 html2canvas 的图片高度不全的问题。

• 原因：生成的元素父级及其不能为滚动区域。

• 解决方案：将其高度固定为 scrollHeight 及其父级能不能出现滚动，打印后将其高度还原。

emitData(e, ownerVm) {
  let targetDom = document.getElementsByClassName('lb-big-box')[0]
  targetDom.style.width = targetDom.scrollWidth + 'px'
  targetDom.style.height = targetDom.scrollHeight + 'px'
  html2canvas(targetDom, {
  	useCORS: true,
  	width: targetDom.scrollWidth, //dom 原始宽度
  	height: targetDom.scrollHeight,
  	logging: true,
  	scale: 5
  }).then((canvas) => {
  	targetDom.style.width = targetDomWidth + 'px'
  	targetDom.style.height = targetDomHeight + 'px'
  	ownerVm.callMethod('receiveRenderData', {
  		url: canvas.toDataURL('image/png'),
  		width: targetDom.scrollWidth, //dom 原始宽度
  		height: targetDom.scrollHeight,
  	})
});

总结：遇到问题首先要多实践，必要时可以和大家一起多讨论，个人思维太狭隘，容易陷入思维盲区。

问题 3：uniapp 小程序环境不能将 base64 转为图片文件。

• 原因：uniapp 小程序的环境中没有 blob，app 的 plus 库不能用

• 解决方案：暂定服务端接口解析 base64 并上传至 oss 服务器，返回图片文件 url。