uniapp第一次生成canvas为黑屏

1 篇文章 0 订阅
1 篇文章 0 订阅

uniapp使用canvas绘制图片的时候第一次生图片为黑屏,那么就是写法有问题了,这时候需要把uni.canvasToTempFilePath的方法写在canvas.draw()中。

ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: that.windowWidth,    // 截取的画布的宽
						height: that.windowHeight,   // 截取的画布的高
						destWidth: that.windowWidth / 2,	// 保存成的画布宽度
						destHeight: that.windowHeight / 2,	// 保存成的画布高度
						canvasId: 'myCanvas',
						success: (res) => {},
						fail: (err) => {}
					})
})//绘制

亲测有效,小伙伴赶紧改正回来吧

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uni-app中使用html2canvas生成图片的步骤如下: 1. 首先,在你的uni-app项目中安装html2canvas插件。可以使用以下命令进行安装: ```shell npm install html2canvas ``` 2. 在你的代码中引入html2canvas,并编写生成图片的方法。可以参考以下代码: ```javascript <script lang="renderjs" module="canvasImage"> import html2canvas from 'html2canvas' export default { methods: { generateImage(e, ownerFun) { ownerFun.callMethod('_showLoading', '正在生成图片') setTimeout(() => { const dom = document.getElementById('pagePoster') html2canvas(dom, { width: dom.clientWidth, height: dom.clientHeight, scrollY: 0, scrollX: 0, useCORS: true, }).then((canvas) => { ownerFun.callMethod('receiveRenderData', canvas.toDataURL('image/png')) }).catch(err => { ownerFun.callMethod('_errAlert', `【生成图片失败,请重试】${err}`) }) }, 300) } } } </script> ``` 在上面的代码中,我们通过调用`html2canvas`函数来生成图片。需要传入一个DOM节点作为参数,这里使用`document.getElementById('pagePoster')`来获取需要生成图片的节点。生成成功后,可以通过`canvas.toDataURL('image/png')`获取图片的base64位的URL。 3. 在需要生成图片的地方调用`generateImage`方法。可以参考以下代码: ```html <button @click="generateImage">生成图片</button> ``` 在上面的例子中,我们将生成图片的方法绑定在按钮的点击事件上。 通过以上步骤,你就可以在uni-app中使用html2canvas生成图片了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [小程序 uniapp中webview内嵌H5页面 html2canvas截图 base64的图片保存到手机相册](https://blog.csdn.net/M__O__M/article/details/126985611)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uni-app 中使用 html2canvas 生成图片(支持多端)](https://blog.csdn.net/weixin_42779803/article/details/118384426)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值