小程序绘画canvas变成图片并且分享，保存功能实现

最新推荐文章于 2024-07-22 18:18:11 发布

小巫星

最新推荐文章于 2024-07-22 18:18:11 发布

阅读量245

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/zha_w/article/details/116738403

版权

本文介绍了如何在小程序中将canvas绘画内容转换为图片，并实现保存及分享功能。通过设置相关数据并调用微信API wx.previewImage，完成从canvas到图片的预览与分享操作。

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

canvas绘画

wxml canvas代码。

 <canvas class='canvas'  style="width:{
   {code_w}}px;height:{
   {code_w}}px;" canvas-id='canvas' bindlongtap='save'></canvas>
 <image class=

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小巫星

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【微信小程序】将canvas画布生成图片，并保存到手机相册

汪小穆的博客

11-07

1万+

前言：微信小程序里面有趣的东西很多，canvas画布就是其中一个，而且微信小程序提供了很便捷的API用于将画布生成图片，并提供了API用于将图片保存到用户相册中。

微信小程序实现用canvas 生成图片并保存

01-24

需求：小程序获取到微信头像和昵称，生成2019年随机发生的趣事实现：微信小程序实现用canvas 生成图片并保存

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

小程序canvas转图片

qq_36472571的博客

09-12

568

canvas转图片

微信小程序-CANVAS写入图片素材、文字等数据生成图片

最新发布

羽筠的博客

07-22

2156

微信小程序-CANVAS写入图片素材、文字等数据生成图片微信小程序中，CANVAS写入图片素材、文字等数据生成图片，最终可将生成的 base64 格式图片保存至相册操作 Tips： 1、canvas 标签默认宽度 300px、高度 150px canvas 生成图片时，写入图片素材、文字等数据前，需要根据实际需求，设置 canvas 宽、高，如以下示例中设置 posterCanvas.width 及 posterCanvas.height 2、同一页面中的 canvas-id 不可重复，如果

微信小程序使用canvas绘图并且把图片上传到服务器上面.rar

05-25

微信小程序使用canvas绘图并且把图片上传到服务器上面

小程序将页面生成图片，并上传至阿里OSS

weixin_39045659的博客

08-30

805

由于我们公司的OSS后端有接口可以获取到上传至OSS所需的参数。我就只贴出调用微信上传文件至OSS的代码。

微信小程序canvas制作分享海报（可保存图片）

weixin_38152494的博客

12-10

908

效果图（按钮，弹窗样式根据需要自行调整）：点击分享好友会直接触发微信的小程序分享，点击保存图片会保存至相册，供发朋友圈使用；注意：昵称，头像，二维码，海报底图背景都可以从接口获取动态绘制，接口获取的图片src必须是https（开发版本可以用http），然后需要用wx.downLoad下载，然后使用临时地址来生成海报，否则会报错。 wx.downLoad({ url: 'htt...

微信小程序 - 使用canvas绘制海报实现分享功能

sunshime的博客

04-09

1635

今天给大家分享一下如何使用canvas绘制海报并实现分享，下面我分享一下实现的过程：效果图：实现过程首先，在wxml文件中写入 canvas 标签，并设置 canvas-id，注意，canvas-id 必须要设置，不然我们无法创建 canvas 的绘图上下文 CanvasContext 对象，也无法在上面绘制我们需要的东西。 <canvas canvas-id="mycanv...

uni保存canvas图片_uni-app canvas生成图片的一些问题

weixin_39764603的博客

01-14

2271

最近在做一个截图功能，发现uni-app分享自定义图片还是有点问题APP端的分享和微信小程序分享还是有点不同的，这里APP测试用的是安卓手机下面列举下我遇到的问题1.draw函数的回调不执行一般都是ctx.draw(false,()=>{})的方式执行，但是打印半天都不进入，发现是回调函数的问题，查了一会，最终还是在微信社区找到了解决方案，那就是强制执行函数ctx.draw(false,((...

小程序canvas画画板签字版,touchmove时卡顿的问题(根本原因是因为vue语法中page.data导致视图层和逻辑层的频繁通讯导致)

小兀的博客

11-06

3256

因为要做一个画画板的功能，所以使用了canvas组件，一开始好多人说小程序canvas性能特别差，也没太注意，做出来之后确实有点卡，而且每一笔touchmove时间越长越卡，最终导致页面卡到无法使用。

微信小程序通过保存图片分享到朋友圈功能

12-11

说明首先说明一点，小程序内是不能直接分享到朋友圈的。所以只能通过生成图片，携带小程序二维码，保存到手机相册，让用户自己选择发到朋友圈。然后可以通过在小程序中识别二维码来进入小程序的指定页面。参考市面上支持分享的应用，基本都是这种实现方式。准备阶段 1.通过服务器获取小程序码这里可以参考下微信的官方文档，给后台指定的参数和路径等信息，让后台生成指定的小程序码。然后调用wx.getImageInfo将后台生成的小程序码保存起来。注意一定要仔细看下微信的文档，如果生成小程序码的路径正式服务器不存在，将会生成失败。这点也很蛋疼，很不方便调试。 wx.getImageInfo({ src:

利用Canvas实现小程序分享海报的生成与本地保存

wantingtr的博客

07-10

1158

利用Canvas实现小程序分享海报的生成与本地保存文章目录利用Canvas实现小程序分享海报的生成与本地保存实现过程在组件中渲染canvas使用`getImageInfo`获取canvas的图片资源根据机型适配尺寸将canvas保存成图片其他一些坑canvas在安卓机上的绘制问题canvas的层级问题虽然说这是个很常见的需求了，但真正实现起来才发现其中的坑是如此之多。尤其是微信小程序对于Can...

小程序05 canvas绘图并保存到相册

热门推荐

多啦的博客

05-30

1万+

小程序现在没有提供直接分享到朋友圈的接口，所以只能采取折中的策略，即先将要分享的内容先保存为图片，保存到用户相册，然后再由用户将该图片分享到朋友圈生成小程序码需要access token，后端生成比较方便 1 Canvas标签 小程序的绘图使用的是&amp;lt;canvas&amp;gt;标签 &amp;lt;canvas canvas-id=&quot;myCanvas&quot; style=&a

使用canvas为小程序生成分享图片

xsw_1999的博客

09-30

744

使用Canvas生成分享图片并解决图片模糊/失真问题，使用插件: montage.js

【uniapp】微信小程序canvas签名旋转生成图片

rrrrroy_Ha的博客

09-18

6898

实际测试过程中，会有画布大小的兼容性问题，具体表现为，在代码里设置的画布背景是白色，在某些屏宽（宽高比比iphone7还大）的iphone上，生成的图片可能会存在右侧一竖列区域（如果没做旋转处理实际上是图片的底部区域）是透明的情况，用图片指示一下。一般的签名是需要用户横屏手写的，但对手机来说实际是竖着写的，保存的图片也是按手机（竖长型）的样子来的，在pc端展示的话需要用css旋转才行，但若有后台生成pdf此类需求的话，那就不好去旋转图片了，为了一劳永逸还得从生成的源头控制才行。，便能曲线实现我们的需求。

钉钉小程序通过 Canvas 将页面生成图片并保存到本地相册

fedev的博客

06-27

1459

背景最近公司有个账户充值业务场景需要从线下支付迁移到线上支付：线下支付场景：客户通过 POS 机付款或者扫码销售同学提供的付款二维码进行付款来完成支付，之后销售同学将相关信息录入到 CRM 后台，财务审核通过后才正式完成充值流程。线上支付场景：销售同学先在 CRM 钉钉小程序中录入充值信息后生成订单，然后系统生成支付宝或者微信付款码，销售同学将付款码页面生成的图片发送给客户，客户付款后即完成充值流程。整个充值流程优化上线后，大大缩短了客户账户从充值付款到充值到账的时间，明显提高了给客户账户充值的

微信小程序使用canvas生成分享海报功能复盘

weixin_41489378的博客

01-30

2995

近期需要开发一个微信小程序生成海报分享的功能。在h5一般都会直接采用或者dom2image之类的库直接处理。但是由于小程序不具备传统意义的dom元素，所以也没有办法采用此类工具。所以就只能一笔一笔的用canvas画出来了，下面对实现这个功能中遇到的问题做一个简单的复盘。主题切换。图片弹框展示，适应不同的手机尺寸。图片上层有弹出框展示保存图片按钮。海报内容，标题部分根据实际内容展示，可能为一行也可能为两行描述部分，最多展示四行，超出的显示成…圆角图片展示圆角虚线框。

微信小程序 canvas 分享图片生成图片

weixin_48188065的博客

05-25

1122

onShow() { var that =this //2. canvas绘制文字和图片 const ctx = wx.createCanvasContext('myCanvas'); var imgPath = '../../image/1.png' var bgImgPath = '../../image/zny.png'; var userImgPath = '../../image/zny.png'; ctx.dra.