微信小程序 使用wxml2canvas插件生成图片部分问题记录

最新推荐文章于 2025-05-13 19:08:53 发布
最新推荐文章于 2025-05-13 19:08:53 发布
阅读量3.8k 收藏 7
点赞数 7
CC 4.0 BY-SA版权
文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15197419/article/details/124317168

文字无法加粗

css样式添加font-weight:bold,但是生成的图片字体未加粗。检查插件源码，发现bold被替换成了700(未设置字重的为400)在这里插入图片描述
解决办法：这里在源码_drawText方法的红框位置，直接将700替换回bold,插件就能正常绘制出加粗效果了。


绘制结果错乱（部分内容没绘制）

原因1：网络图片

首先，网络图片的域名，必须在小程序设置的"downloadFile合法域名"内，否则绘制不出图片，且导致该image元素后的所有元素都没有绘制（插件不报错）

其次，网络图片需要提前下载到缓存中，否则大概率绘制不出图片，且同样导致后面元素不绘制。
在这里插入图片描述
解决办法：使用wx.downloadFile提前下载所有图片，并替换src为缓存图片src

最后，建议在所有image标签中添加data-delay="1"属性，在这里插入图片描述
这样做的好处是

最低0.47元/天 解锁文章
qq_15197419
关注
【微信小程序】其他组件-canvas画布
墨夶的博客
11-24 1626
canvas组件提供了一个画布，开发者可以通过或者获取到绘图上下文，然后使用上下文提供的绘图 API 进行图形绘制。canvas组件支持两种类型的画布：2D 和 WebGL。其中，2D 画布适合绘制矢量图形和简单的图像处理，而 WebGL 画布适合进行三维图形和高性能图形渲染。微信小程序的canvas组件为开发者提供了丰富的绘图功能，通过合理配置属性和方法，可以实现高质量的图形绘制效果。希望本文能帮助你在微信小程序开发中更好地使用canvas组件。😊。
wxml2Canvas小程序生成图片，有bug怎么办！那就直接改了！
weixin_44960636的博客
08-14 433
wxml2canvas，wxmlcanvas，wxmlcanvas_v2。 微信小程序生成图片wxmlcanvas_v2/src 中的文件取出来（index.js 和util.js）使用。但是看了看已经有几年不更新了，有一些bug，正好我用到了GitHup上是有人提这个问题的但是作者没改，那么索性改！这里注意：使用的使用的canvas节点不能是组件一定要在界面了，可以用小程序模版的方式引入。内部有好多样式没有实现，基本样式是可以的没问题，有问题欢迎留言，有空会更改。
wxml2Canvas绘制小程序图片
weixin_45932157的博客
10-08 1939
【代码】wxml2Canvas绘制小程序图片。
如何优雅的使用微信小程序Canvas画布
最新发布
wugemianfei的博客
05-13 849
MinAs 是一个运行在微信小程序的JavaScript 库，仅仅13kb左右，旨在让开发者能像使用 pixijs和Flash AS3 一样，在微信小程序的 Canvas 中优雅地使用精灵Sprite、补简动画Tween、逐帧动画精灵AnimatedSprite。同样也特别适合那些想在微信小程序中开发小游戏功能的项目,又或者你想做个游戏界面风格的应用小程序。 后续作者会推出使用这个库开发的简单的小游戏示例、ui库等。
微信小程序-Wxml2canvas生成图片
weixin_46880889的博客
09-17 2655
原生微信小程序，指定节点生成图片并保存到本地；wxml2canvas生成图片；踩坑记录
wxml2canvas 小程序元素生成图片
aizenmoxiguan的博客
07-07 3834
wxml2canvas 小程序元素生成图片
小程序将页面转为图片--Wxml2Canvas
鸡米花的博客
07-20 2万+
如果需要实现将小程序的页面转为图片，第一步是要先把页面转为canvas，再将canvas转为图片。本人使用的是Wxml2Canvas这个插件。其实最开始使用的是wxml-to-canvas这个官方自带的组件。由于这个组件坑太多，本地调试一切正常，但是到了真机调试就会出现创建画布失败的情况，寻找了很久，最多的方法方法就是添加延时器，或者画布的高度设置在1000px以内。但是都没有什么鬼用，最终无可奈何，只能换个插件，重新写。好惨一男的???? 那我们废话不多说，准备开始搞事情！！ 第一步 安装插件 注意
wxml2canvas
edwardwzw的博客
01-18 5226
detail.js util.js /** * 获取字符的长度，full为true时，一个汉字算两个长度 * @param {String} str * @param {Boolean} full */ function getTextLength (str, full) { let len = 0; for (let i = 0; i < str.length; i++) { let c = str.charCodeAt(i); ..
wxmlcanvas-v2小程序生成图片
08-14
在微信小程序开发中，生成图片是一项常见的需求，例如用于截图、生成二维码或者数据可视化等场景。`wxmlcanvas-v2` 提供了一种解决方案，它是一个小程序组件库，专门用于帮助开发者在小程序环境中动态生成图片。这个...
微信小程序生成二维码的插件,基于base64编码输出二维码，不依赖canvas.zip
09-30
总的来说，“weapp-qrcode-base64”插件提供了一种高效且便捷的在微信小程序中生成二维码的解决方案，尤其适合那些对性能有要求或不想处理Canvas的开发者。在实际应用中，开发者可以根据自己的需求调整插件参数，如...
微信小程序海报插件，生成海报的小程序组件wxa-plugin-canvas-master.zip
09-25
本压缩包“wxa-plugin-canvas-master.zip”包含了一个专门用于微信小程序的海报生成组件，它可以帮助开发者在小程序中实现自定义海报的动态生成功能。 首先，我们要理解“wxa-plugin-canvas-master”中的“wxa”...
小程序案例生成图片
05-04
转的别人的资源，好用就发上来了，canvasShareImg-master
wxml2canvas微信根据wxml绘制海报
03-18
##根据wx.createSelectorQuery()获取wxml的'color','font-size','font-weight','font-family','backgroundColor','border','border-radius','box-sizing','line-height'属性绘制海报。 ##可以设置 1.data-index设置wxml层级 如：海报绘制过程可能出现背景-》图片-》字-》图片的层级关系 预设先绘制背景image，再绘制view，最后绘制字，分别为1层2层3层。 如果有特殊层级，需要单独设置，比如图片盖在背景上，图片的data-index为4。 2.data-multi设置是否一行显示false在一行显示 3.data-change-top设置字在view布局的高度，可根据手机平台设置 部分机型ios高度比android略高 ##wx.createCanvasContext绘制海报，而不是canvas2d绘制海报，海报高度没限制
微信小程序实现 用canvas 生成图片 并保存
01-24
需求：小程序获取到微信头像和昵称，生成2019年随机发生的趣事 实现：微信小程序实现 用canvas 生成图片 并保存
小程序生成图片并保存
weixin_42027503的博客
12-23 1370
wxml <canvas type="2d" id="canvas" style="width: {{canvasW}}px; height: {{canvasH}}px;"></canvas> <view class="save-btn flex-colum flex-lr-center flex-tb-center" catchtap="saveImg"> <image src="/images/save-img.png"></image>
微信小程序wxml-to-canvas保存图片时图片缺失(已解决)
weixin_61273407的博客
05-24 1672
3. 出现图片缺失，是因为用户网速或系统或图片域名等因素各不相同，影响了体积较大的图片加载未完成，就直接调用保存到相册，导致图片缺失，根本解决方法，始终只有一个，就是要捕捉到图片加载完毕，已全部显示出来，再保存到相册，我使用了很多方法，比如定时器延长时间，让图片加载，但定时器也不能完全满足，最终使用了微信小程序提供的image图片标签里的图片加载完毕事件，bindload事件，完美解决。3. 没有做海报的展示，让用户看到海报是否加载完毕，就直接保存到相册，海报如果体积太大，会出现保存的图片部分缺失。
微信小程序中使用wxml2canvas时遇到save canvas error的问题
z19960925的博客
12-05 543
【代码】微信小程序中使用wxml2canvas时遇到save canvas error的问题。
微信小程序-CANVAS写入图片素材、文字等数据生成图片
羽筠的博客
07-22 3512
微信小程序-CANVAS写入图片素材、文字等数据生成图片 微信小程序中，CANVAS写入图片素材、文字等数据生成图片，最终可将生成的 base64 格式图片保存至相册操作 Tips： 1、canvas 标签默认宽度 300px、高度 150px canvas 生成图片时，写入图片素材、文字等数据前，需要根据实际需求，设置 canvas 宽、高， 如以下示例中 设置 posterCanvas.width 及 posterCanvas.height 2、同一页面中的 canvas-id 不可重复，如果
小程序中如何将页面生成图片？
热门推荐
Xerath的博客
08-16 2万+
记一次开发一款小程序遇到的需求：根据用户填写的商品信息，生成一张可分享的购买海报。简单的看了一下小程序的canvas组件，是可以满足这个需求的实现。所以就开始规划、组织代码了。 1.小程序组件——canvas 是可以实现的，这里我就不多说了，但是需要注意的是，在生成图片的时候会有坑，生成出来的图片会是空白，找了很多资料都说是需要坐下处理，官方也说 “在 draw 回调里调用该方法才能保证图片导...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值