小程序获取不到canvas的node实例

最新推荐文章于 2024-05-27 14:39:53 发布

寂青泠

最新推荐文章于 2024-05-27 14:39:53 发布

阅读量1.1k

点赞数 2

分类专栏：微信小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/weixin_52590195/article/details/120831242

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在公司项目中，作者尝试将生成海报的功能从新开页面移至当前页面，遇到无法获取canvas节点实例的问题。经过半小时排查，发现是canvas标签缺少了type属性。添加该属性后，问题得到解决。这个小疏忽让作者意识到细心检查的重要性。

摘要由CSDN通过智能技术生成

公司项目需要增加一个生成海报长按可以保存的功能我一开始在新开的页面写画布写了一些后打算先挪到当前页来试试看效果结果到当前页后它就获取不到node实例了

js输出截图

找了半个多小时没找到原因网上也没看到有这种问题的解决方法

到最后刚想去小程序社区提问题忽然发现我canvas的标签没有加 type 属性

本着试一试的心态加上去一刷新就有 node 实例了

如图

人生的第一篇文章记录下这个坑

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

寂青泠

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序 使用SelectorQuery()获取Canvas节点

MengTsn的博客

06-11

3416

<canvas type="2d" id="canvas" style="width: 300px; height: 300px;" ></canvas> 注意：中的 id，不能写成canvas-id, 否则获取到的节点为空 js中代码 setTimeout(function(res){ wx.createSelectorQuery() .select('#canvas') .fields({ node:

关于在微信小程序使用WebglCanvas和ThreeJs开发的二三事（一）

geshu12138的博客

04-29

5265

最近应公司项目需求要在微信小程序上进行3D模型渲染，还要调用微信摄像头所以不能直接上webview只能使用微信的WebglCanvas来做。过程中踩了一些坑，现在功能基本达到所以打算记录下遇到的问题与解决办法思路，希望对自己和也在微信WebglCanvas上踩坑的小伙伴所有帮助，也希望官方可以及时填坑。在开发中遇到的问题大致如下：动态调整画布的大小，位置。 ThreeJs的引入与使用。 ...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序 canvas API详解及实例代码

09-01

主要介绍了微信小程序 canvas API详解及实例代码的相关资料,需要的朋友可以参考下

canvas模糊与获取不到节点

weixin_44006193的博客

12-14

518

canvs模糊与获取节点

canvas-prebuilt.node (not found)

xiaoxiaofly的博客

11-05

888

目录在linux环境安装canvas 报错如下解决方法：在linux环境安装canvas 报错如下 Package pixman-1 was not found in the pkg-config search path. Perhaps you should add the directory containing `pixman-1.pc' to the PKG_CONFIG_PATH environment variable No package 'pixman-1' found

【小程序】createSelectorQuery获取canvas时node is not a function

chengzhf的专栏

10-07

5076

开发小程序时要用到canvas，官方提供了createSelectorQuery的方法，代码如下： Page({ getNode() { wx.createSelectorQuery().select('.canvas').node(function(res){ console.log(res.node) // 节点对应的 Canvas 实例。 }).exec() } }) 但是套上去用的时候，报错： TypeError: query.select(...).no

uniapp 微信小程序 canvas 问题

最新发布

XL984507092的博客

05-27

775

他不支持真机调试，只能通过预览，另外获取 canvas 的图片的时候 ios 预览 canvas 的图片在真机上不能展示是因为 ios 中需要开启 webp 为 true。今天写小程序的时候在真机调试的时候发现 canvas-2d 在真机上没有效果，获取不到 canvas 信息。

关于微信小程序canvas保存图片

kajsbdk的博客

09-17

871

关于微信小程序canvas保存图片参考知识：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html 大家都知道，现在的版本微信已经不再更新维护wx.createCanvasContext方法了，从基础库 [2.9.0]开始，该接口停止维护，需要用Canvas更替，那么以前的版本要怎么更新替换，可能很多小伙伴会苦恼，正好最近微信了一个老项目，踩了坑，给大家分享下我的经验~ ##不同点：老版本 <canvas can

Taro+nutui h5使用nut-signature 签名组件的踩坑记录之使用canvas实现一个签名组件

weixin_44514665的博客

01-01

1933

taro兼容h5实现签名功能,以及签名不清晰问题

微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）

qq_36571836的博客

09-16

2476

微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas demo实例和画笔ctx----method中封装了各种绘制的方法*（文字，图片，圆角图片，圆角矩形等,还有利用for循环进行绘制多个圆角文字）* 为了方便这里我封装成了一个component shop-canvas 就是我当前的canvas-----之后的绘图操作都在其中–可以自行更改然后在index.js

微信小程序学习

weixin_55935744的博客

11-09

4419

微信小程序学习

uniapp canvas 无法获取 webgl context 的问题解决

学习笔记

10-23

1639

在 uniapp 中做一个查看监控视频的页面，用到的是这个库，原理就是前后台通过 websocket 不断推送新画面内容到前端，前端通过这个 JSMpeg 渲染到前端页面中指定的 canvas 中。而这个 canvas 需要具备 webgl 的内容，而不是 2d 的内容。最初我是在页面中直接预写了一个 canvas 元素结果，当执行的时候始终得到的是null。

微信小程序：在部分ios上面canvas绘图显示空白，安卓正常显示解决方案。

weixin_44946803的博客

01-26

1108

canvas，微信小程序，js，ios兼容问题

Node.js 微信小程序获取用户信息

墨墨碳的博客

12-02

1377

小程序前端代码 // 登录 login(){ wx.login({ success:loginRes => { if (loginRes.code) { wx.getUserInfo({ success: user => { uni.request({ url:"http://192.168.0.22:8666/wxLogin", method:"POST", data:{

微信小程序 canvas空白

qq_41981057的博客

04-29

1922

如果canvas不是在页面中，而是在自定义组件中的话，一个可能的原因是： wx.createCanvasContext只传一个参数是不够的，需要再传入第二个参数this,如下： var context = wx.createCanvasContext(mycanvasid,this) ...

支付宝或微信小程序，使用canvas时小程序第二次渲染会失败

W8034的博客

08-19

1625

因为微信小程官方文档有指明:同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作链接指明:https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html 由：做支付宝小程序，涉及到前端要把图片转为base64,文档支持使用canvas解决，不免会涉及到用户拍完照，不想使用该照片，返回主页面，再选择拍照时，由于第一次已经渲染了，第二次使用.

微信小程序异步请求echarts

01-22

由于微信小程序不支持直接引入外部JS库，我们需要先将Echarts源码转化为小程序可以识别的格式，这通常通过构建工具如`taro`或者`miniprogram-eccharts`库完成。引入后，在页面的`onLoad`生命周期函数中初始化Echarts...

安装canvas遇到的问题和运行项目遇到的报错

DwZ735660836的博客

05-27

5605

1.mac安装问题 1）第一步使用brew安装：brew install pkg-config cairo pango libpng jpeg giflib librsvg 如果上面命令安装出错，可以分开安装（推荐） brew install pkg-config brew install cairo brew install pango brew install libpng brew insta...

uni-app开发canvas在小程序端或者h5端不生效

搬砖小鱼，请多指教呦

01-10

5919

有以下几种可能： 1、如果在canvas标签中写了type=“2d“，则在小程序端会无法显示，删掉即可 2、习惯h5的写法只写了id没有写canvas-id，也会无法显示 3、如果是旧版本，没有写在创建canvas的时候没有写this也有可能导致不显示（其实用现在的新版本，不写this也是可以显示的但是建议写上）其他canvas问题后续待补充 ...

微信小程序获取页面节点方法简介。canvas 滑动验证码（前段,微信小程序，canvas2D）

weixin_52618969的博客

07-11

6719

微信小程序获取页面节点方法简介。 canvas 滑动验证码实例（微信小程序，canvas2D）