uniapp 踩坑记录：canvas生成海报并分享

最新推荐文章于 2024-07-13 10:58:01 发布
最新推荐文章于 2024-07-13 10:58:01 发布
阅读量190 收藏
点赞数 1
文章标签： uni-app 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzz18789/article/details/140319462
版权

最近做了一个生成二维码海报并拉起微信小程序分享的功能，因为要在多处使用，所以做成了一个组件，结果canvas怎么都无法绘制出来，在网上查询后得知，需要在创建示例时加上this

const context = uni.createCanvasContext('canvas', this); //在这里第二个参数加上this

现在绘制问题解决了，可是使用canvasToTempFilePath导出为图片时又报错了，还是同样的问题，需要加上this

	uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: 700 * wid,
							height: 1200 * wid,
							canvasId: 'canvas',
							success(res) {
							},
							fail(err) {
							}
						}, this); //这里加个this
旅行中的伊蕾娜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
微信小程序踩坑录：canvas，post请求，页面刷新
03-29
现在也不知道距离微信公测多少日子了，反正感觉我是埋在微信小程序这个坑里很久了，公司的项目终于快接近尾声，现在就腾点时间记录下我的收获，希望能给大家一点点帮助吧。 我做的几乎都是canvas的东西，所以先说说...
canvas生成带二维码海报的踩坑记录
12-14
在使用canvas生成带二维码的海报时，开发者可能会遇到一系列的技术挑战。本文主要记录了这些挑战以及对应的解决方案，涉及的关键知识点包括图片异步加载、图像跨域问题、图像模糊处理等。 1. **图片异步加载与...
uniapp用canvas实现分享海报
weixin_50606255的博客
11-18 2104
做app时通常会遇到分享海报的需求，将当前页面的海报保存到本地相册，然后就可以分享。重点是将当前页面的某一块作为海报页面保存到本地。 这是是通过canvas画图来解决的，参考官网将canvas转换为图片的方法 https://uniapp.dcloud.io/api/canvas/canvasToTempFilePath?id=canvastotempfilepath 首先将需要的海报用canvas画出来，这里就比较繁琐，定位定点要准确，如果UI设计图精准的话就要方便一些。 1.因为can.
uniapp踩坑(二):canvas合成背景图和二维码，并分享给微信好友或微信朋友圈
HHy的博客
03-29 6452
需求： 想做一个微信好友分享二维码功能，朋友扫码即可下载软件 效果图： 有一张背景图，一张二维码图，需要合成一张图分享，但不知如何合成？ 操作： 主要采用canvas组件 直接上代码： 注意：我是已有现成的二维码图片，所以直接放来用，如果没有，可以下载tki-qrcode这个插件。 <template> <!-- 分享邀请码图片（包含二维码） --> <view...
记录：uni-app多端小程序使用canvas绘制图片
laishaojiang的博客
10-28 4414
对于canvas我一直都是只是了解状态，只是知道大概要怎么画，没有具体的项目实战经验，最近有个需求就是要用canvas画个分享的海报。看起来也不难，实际画起来还是花了不少实际，也踩了一些小坑，所以记录一下 整理一下使用的api fillText 写文字 fillStyle 用来设置字体颜色 setFontSize 字号 font 字符串，设置字体所有格式，字号和字体家族必填 fillRect 画个长方形 setFillStyle 填充颜色 setStrokeStyle 设置画笔颜色 moveTo 画笔起.
html2canvas跨域踩坑日常
谭同学
02-22 775
这两天接到公司的指令做海报图分享 然后尝试使用html2canvas+uview+uniapp进行编写 踩坑如下 html2canvas跨域问题 我司使用的是oss云存储，起初发生跨域以为是本地原因导致，便没在意 第二天部署到测试服务器上时依旧发生跨域 便开始注意起来 排查如下： 检查oss云存储是否设置跨域(已设置) 检查html2canvas是否设置useCORS为true(已设置) 在检查后发现都没有问题便陷入了沉思当中，从上午一直到下午也没有解决，无奈只能尝试图片转base64试下，但.
uniapp中如何使用小程序的wxml-to-canvas插件
搬砖小鱼，请多指教呦
03-03 4821
本篇主要讲述uniapp中如何使用小程序的wxml-to-canvas插件，关于wxml-to-canvas如何动态传递数据以及踩坑注意点会在下一篇文章中具体描述 1-关于wxml-to-canvas 官网地址：wxml-to-canvas | 微信开放文档 使用wxml-to-canvas最主要的功能其实就是生成海报，官网有demo演示，是静态海报的生成，大家可以直接下载 2-关于如何在uniapp中使用 正常在小程序中使用 我们只需要npm安装到小程序中就可以，小程序会构建miniprogra
html2canvas （踩坑） 网络图片显示不出来&生成图片只有一半或者空白&文字显示不出来问题处理
热门推荐
Mr_Chao的博客
12-12 1万+
这里只提供解决思路，代码就不粘贴出来了 图片显示不出来 就像大多数人说的一样，HTML中的图片产生了跨域，可以将网络图片转为base64后修改img 的src属性值，添加图片允许跨域的属性。调用html2canvas的API时，将跨域参数设置为true，允许跨域。 图片生成显示不全，只有半截或者空白 在有滚动的页面，产生了滚动条后，生成的图片可能会只有一半或者空白。答案只有一个，那就是要把html2canvas的配置项参数中，scrollx，scrolly都设置为0，问题就解决了。　　　　　oﾟ*｡o 恭
小程序canvas绘制带二维码海报全流程
zl_Alien的博客
02-08 1171
接下来，我会把纯前端实现生成带二维码的海报全流程给大家讲个明明白白，把我自己遇到的坑，给大家详细分享并讲解，防止大家遇到相似问题，即使遇到问题，也会有一个明确的方向，并且吐血建议大家收藏一波，以备不时之需。(你不能保证以后的需求，没有类似的吧，有的话，记得翻出来看看) 长路漫漫，总得有人敢于迈出踩坑的第一步，我想我就是那个????????，希望大家能踏着我冒着抬上救护车危险填平的坑，通向小程序生成海报胜利之路。送人玫瑰，手留余香，阅读的朋友可以给笔者 点赞，关注一波 陆续更新超干，超硬核的前端文章。 一 写
uni-app踩坑集合(小程序)
weixin_44997513的博客
05-19 1869
1.指定页面不显示返回或首页按钮 onShow(){ uni.h }
那些年微信小程序走过的路和踩过的坑
03-29 430
文章目录前言微信小程序日常笔记 [@不同账号下小程序之间跳转](https://blog.csdn.net/men_gqi/article/details/114636406) [@微信小程序新线上自动版本更新](https://editor.csdn.net/md/?articleId=113997004)项目经验练习实例改bug1、errMsg“:“navigateTo:fail page \“pages/realTime/\“ is not found“2、‘Cannot read pr.
娇娇jojojojo：微信小程序踩坑录：canvas，post请求，页面刷新
03-29
现在也不知道距离微信公测多少日子了，反正感觉我是埋在微信小程序这个坑里很久了，公司的项目终于快接近尾声，现在就腾点时间记录下我的收获，希望能给大家一点点帮助吧。 我做的几乎都是canvas的东西，所以先说说...
canvas_x:canvas绘制海报，生成logo二维码。也可生成编辑界面，用户自定义输入，一键生成
05-17
canvas_xcanvas绘制海报，生成logo二维码。也可生成编辑界面，用户自定义输入，一键生成。默认开启图片跨域，但服务端的图片也需要后端进行相应的跨域设置。使用方法npm 下载使用npm i -S @sayll/canvas_x// js 片段...
html2canvas将HTML内容写入Canvas生成图片 uniapp
12-16
这个工具在Web开发中非常实用，尤其对于需要在客户端生成屏幕快照或者实现网页内容分享的情况。在uniAPP这个跨平台的移动应用开发框架中，html2canvas可以发挥类似的作用，帮助开发者在APP端实现截取页面内容的功能...
在uniapp中如何使用地图
weixin_55800388的博客
07-12 227
最好是使用webview + html形式加载，避免打包app时的地图加载问题。对应的html一定需要注意目录结构。//从其他组件传来的值。
推荐一款uniapp拖动验证码插件
最新发布
weixin_59685936的博客
07-13 73
推荐一款uniapp拖动验证码插件
uniapp,app端使用echarts不兼容，可以使用iframe来使用echarts
qq_26841153的博客
07-09 445
【代码】uniapp,app端使用echarts不兼容，可以使用iframe来使用echarts。
uniapp微信小程序授权登录实现
m0_73035846的博客
07-12 183
我们小封装一个获取code 的方法 在页面中可以直接调用 封装在 js 中。我们在做小程序的时候用的最多的方式登录 就是原生的授权登录的功能。这个方法 也不是很难 首先我们要获取我们在小程序中的code值。把登录的要封装在一个单独的文件中，这样修改的时候，也方便修改。
UniApp H5端用canvas生成图片保存本地
05-19
UniApp H5端可以使用HTML5的canvas标签来生成图片并保存到本地。具体实现步骤如下： 1. 在H5端页面中，首先需要在template中添加一个canvas标签，用于绘制图片： ``` <template> <canvas id="myCanvas"></canvas> </template> ``` 2. 在script中，获取canvas元素，并使用canvas API进行绘制。例如，绘制一张红色的矩形： ``` <script> export default { mounted() { // 获取canvas元素 const canvas = document.getElementById('myCanvas') // 获取绘图上下文 const ctx = canvas.getContext('2d') // 绘制矩形 ctx.fillStyle = 'red' ctx.fillRect(0, 0, canvas.width, canvas.height) } } </script> ``` 3. 绘制完成后，可以将canvas元素转化为图片，并保存到本地。可以使用canvas.toDataURL()方法将canvas转化为base64格式的图片数据，然后创建一个a标签并设置其href属性为图片数据，再调用a标签的click()方法触发下载。例如： ``` <script> export default { mounted() { // 获取canvas元素 const canvas = document.getElementById('myCanvas') // 获取绘图上下文 const ctx = canvas.getContext('2d') // 绘制矩形 ctx.fillStyle = 'red' ctx.fillRect(0, 0, canvas.width, canvas.height) // 将canvas转化为base64格式的图片数据 const imgData = canvas.toDataURL('image/png') // 创建a标签并设置href属性为图片数据 const link = document.createElement('a') link.href = imgData // 设置下载文件名 link.download = 'myImage.png' // 触发下载 link.click() } } </script> ``` 通过以上步骤，就可以在UniApp H5端使用canvas生成图片并保存到本地了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旅行中的伊蕾娜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值