uni-app获取dom节点信息

uni-app获取dom节点信息

问题描述

uni-app无法获取dom节点信息

根据原生js操作dom节点

<video id="video" playsinline style=" display: block;"></video>
onload(){
	const video = document.getElementById('video');
}

在这里插入图片描述


原因及解决方法

uniapp不支持原生操作dom,但是提供了一个接口获取dom信息

在这里插入图片描述


注意:想要拿到元素实例,需要在实例已经挂载到页面上才可以

onLoad() { //页面初始化执行,用户页面获取参数},
onReady() { //页面初次渲染完毕执行},

实现过程

getVideoDom() {
				const video = uni.createSelectorQuery().in(this);
				video.select('#video').boundingClientRect(video => {
					var video = video
					// console.log(video)
				}).exec();
				var ctx = uni.createCanvasContext('output_mini', this);
				console.log(ctx);
},

就可以拿到dom的节点信息啦:

在这里插入图片描述

  • 17
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
非常感谢您的指正,我混淆了在uni-app中使用`ref`获取`DOM`元素的方式。在uni-app中,可以通过`uni.createSelectorQuery()`方法获取`DOM`元素,然后将其传递给`html2canvas`库进行转化为图片。下面是一个修正过的代码示例: ```html <!-- 在wxml中定义需要转化为图片的view --> <template> <div> <view class="canvas-box" ref="viewContainer"> <text>这是转化为图片的view</text> </view> <button @click="getViewImage">点击生成图片</button> </div> </template> <!-- 在js文件中编写转化为图片的代码 --> <script> import html2canvas from 'html2canvas'; export default { methods: { // 将view转化为图片 getViewImage() { const viewContainer = uni.createSelectorQuery().select('.canvas-box'); viewContainer.fields({ size: true, rect: true }, data => { html2canvas(viewContainer.node(), { width: data.width, height: data.height, useCORS: true, }).then(canvas => { const dataURL = canvas.toDataURL('image/png'); console.log(dataURL); // 获取到转化后的图片数据URL }); }).exec(); } } } </script> ``` 在上面的代码中,我们使用`uni.createSelectorQuery()`方法获取`DOM`元素,然后通过`viewContainer.node()`将其传递给`html2canvas`库进行转化为图片。注意在使用`html2canvas`库时,需要设置`useCORS`为`true`,以便在微信小程序中跨域访问图片资源。 至于将`var html = '<view>hello world</view>'`代码片段转化为图片,您可以将其直接替换为`<view>hello world</view>`,然后按照上面的代码示例进行操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值