微信小程序页面元素如何保存成图片

最新推荐文章于 2024-03-13 16:57:08 发布
最新推荐文章于 2024-03-13 16:57:08 发布
阅读量9.2k 收藏 3
点赞数 5
分类专栏： 微信小程序 文章标签： 微信小程序 导出图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zero_person_xianzi/article/details/86615939
版权

微信小程序没有将view,image,text等标签直接生成图片的api。但是有将canvas直接生成图片的api

将canvas标签生成图片的api--------------------- wx.canvasToTempFilePath

view,image,text等标签，都可以在canvas里画出来

下面是canvas开发的文档

canvas上的问题请继续百度

本文只介绍用什么元素制作图片

 

小程序画布操作文档

 

子醉
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序页面布局方式flexbox -温故而知新
03-29
微信小程序使用flexbox容器，flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局，其中设为display:flex或者display:inline-flex的元素称为伸缩容器。伸缩容器的子元素称为伸缩项目，伸缩项目使用伸缩布局模型来排版。伸缩布局模型与传统的布局不一样，它按照伸缩流的方向布局。请看下面的经典图片 (此图片来源于网络，如有侵权，请联系删除! ) 默认情况下，伸缩容器由两根轴组成，主轴(main)和交叉轴(cross)，其中主轴的开始位置叫main start，结束位置叫main end。交叉轴的开始位置叫cross start，结束位置叫c
使用wxml2canvas将微信小程序页面转为图片
weixin_44327919的博客
09-20 6829
微信小程序将页面转为图片并保存到相册
微信小程序把页面做成图片分享【原创】
Dreawer微信小程序联盟
03-16 2万+
开发微信小程序的时候，经常要遇到如上图这样的，保存小程序二维码图片的分享功能。网上找了很多都没有具体的写法，于是自己看官方文档写了一个，分享一下。首先，需要在 wxml 中 创建一个 画板 canvas 。wxml :<view class='more' bindtap='saveImageToPhotosAlbum'>保存图片</view> //保存图片按钮 <...
uniapp使用中遇到的问题一：小程序端把当前页面另存为图片
最新发布
m0_56307415的博客
03-13 801
小程序端把当前页面另存为图片
把view或者div绘制 canvas ，导出图片功能实现完整源码附效果图（兼容H5和小程序）
a_靖的博客
01-07 3739
先看下效果图：（上面灰色块内的用div和CSS写出来的，然后绘制到canvas） 实现此功能需要使用到一个微信小程序的插件，插件官方文档地址： wxml-to-canvas | 微信开放文档 本博客代码环境，uniapp（vue） 实现流程： 1.创建uniapp项目，命名为 （htmlToCarvasDemo） 2.Alt + C 打开终端，运行npm i x-wxml-to-canvas，安装插件 npm ix-wxml-to-canvas 3.在index目录添加，d..
微信小程序绘制图片并保存到相册功能 wxml2canvas
q2743517053的博客
04-07 3696
微信小程序绘制图片并保存到相册功能 wxml2canvas 主要用到的插件是wxml2canvas https://github.com/wg-front/wxml2canvas插件下载地址感谢大佬的插件 上代码 drawCanvas() { let self = this; const systemInfo = wx.getSystemInfoSync(); console.log(system...
将微信小程序页面转为图片
qq_37635012的博客
03-04 4518
最近做项目遇到一个需求，那就是要将某个页面转为图片然后传给后端，我仔细找了一圈，发现官方那个Api也就是wx.canvasToTempFilePath生成的图片很有可能为空，太坑了，于是我放弃用它了，选择了用wxml2canvas。 npm init 是npm初始化，这个时候根据编译器终端一路回车最终会生成一个package.json文件 –production 是减少安装与业务无关的包，减少项目的体积。如果没有构建npm，需要我们工具-构建npm,或者勾选中 如果你没看到这一项也别急，我们高级版本的微信
微信小程序中把页面生成图片
热门推荐
xiaoyuehan007的专栏
09-16 7万+
这个问题我上网搜了一下，答案有多种，但是真正能用的没有几何。很多答案都是雷同，有的网友也不负责任，直接拿来照抄，自己也不跑一遍看看。哎，不说了，说多了全是泪。希望我们的技术达人在分享的时候，能够真实的走一遍代码，尽量能让我等小白看的懂啊。闹骚发过了，下面我们就进入正题吧(*^__^*) 嘻嘻…… 今天分享的是不仅仅把页面生成图片，同时，也要满足能够识别图中的二维码。我们先来看看效果图 其中...
仿微信 把一个view生成图片并保存到手机相册当中（支持刷新相册）
qq_41873558的博客
07-06 2046
项目里需要生成把显示一个图片，然后生成图片保存到相册里，并分享到微信，QQ，这里就贴出生成图片的核心代码，不说废话自己看。1.前后效果图2.把一个View转成Bitmap：3.private Bitmap bmp; private Bitmap loadBitmapFromView(View v) { int w = v.getWidth(); int h = v.getHeigh...
微信小程序插件--wxml-to-canvas(生成图片)
别告诉我有Bug
07-26 1万+
小程序内通过静态模板和样式绘制 canvas ，导出图片，可用于生成分享图等场景
微信小程序第四篇：生成图片并保存到手机相册
qq_49900295的博客
12-09 7877
刚刚我们封装了顶部的分享组件，那现在就要去定义保存图片到相册的方法了，我们写代码的时候一定要考虑清楚这段代码是否是可复用的，是否应该剥离出去。显然保存图片到相册这个方法我们应该写在 utils 目录中，因为有很多其他的场景都可以用这个方法，那我们就封装一个公用方法，参数就是图片的地址，成功的回调函数和失败的回调函数。wx.getSetting ({ // 查询所有授权if (res.authSetting['scope.writePhotosAlbum']) { // 用户已经授权。
uni-app 微信小程序 图文生成图片 wxml-to-canvas
ssnnyyjj的博客
11-26 4433
使用uni-app框架实现在微信小程序上把动态生成的文字和签名生成图片，使用微信小程序的 wxml-to-canvas技术。html2canvas不兼容小程序，目前只知道此方式
微信小程序image图片加载完成监听
10-16
主要为大家详细介绍了微信小程序image图片加载完成监听，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序气泡组件
01-27
微信小程序自定义气泡组件由于手机屏幕就那么点大，如果一堆按钮全部并排显示显示或挤在一起会显得比较的臃肿，为解决这个问题。所以编写了这个气泡组件。能根据元素内容的宽高自动计算气泡的定位气泡的内容项可以...
微信小程序框架的页面布局代码
01-19
1.首先下载小程序开发工具 2.小程序中的wxml就相当于html , wxss就相当于css 3.布局和html布局几乎一样 4.宽度使用百分比 5.input框里的文字上下居中是用padding撑出来的 6.最下面的文字靠右，view相当于一个块元素...
微信小程序根据条件显示样式
05-05
微信小程序根据条件显示样式，根据业务控制页面元素是否显示
微信小程序分享接口卡片图片尺寸比例
zero_person_xianzi的博客
03-18 1万+
调用微信小程序分享需要button标签 <button open-type="share">test</button> 然后在js的page里加一个函数 onShareAppMessage: function() { return { title: "小伙伴快来和我玩", imageUrl:"xxxx.pn...
微信小程序获取手机号失败,Error:该appid没有权限
zero_person_xianzi的博客
02-10 1万+
获取手机号 获取微信用户绑定的手机号，需先调用wx.login接口。 因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 &lt;button&gt; 组件的点击来触发。 注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。   参考文献...
微信小程序把用户上传的图片上传到服务器端前端详细操作
zero_person_xianzi的博客
02-11 1万+
//第一步 保存用户上传的图片 chooseImage: function() { wx.chooseImage({ count: 1, //选择图片的数量 默认为9 success: (res) =&gt; { console.log(res) //tempFilePaths 图片的本地临时文件路径列表 ...
微信小程序怎么实现保存图片功能
07-13
微信小程序中实现保存图片功能的基本步骤如下： 1. 在小程序的页面中，首先需要引入 `wx.canvas` 用于绘制和保存图片。 2. 在页面中创建一个 `<canvas>` 标签，设置宽高和唯一的 `canvas-id`。 3. 在 `<canvas>` 中使用 `wx.createContext` 创建绘图上下文对象。 4. 使用绘图上下文对象的 `drawImage` 方法将图片绘制到 `<canvas>` 中。 5. 创建一个按钮或其他触发保存操作的交互元素，并在点击事件中编写保存图片的逻辑。 6. 在点击事件中，使用 `wx.canvasToTempFilePath` 方法将 `<canvas>` 中的内容保存为临时文件路径。 7. 使用 `wx.saveImageToPhotosAlbum` 方法将临时文件保存到用户相册中。 下面是一个实现保存图片功能的示例代码： ```javascript // 在页面中的 js 文件中 Page({ saveImage: function() { const ctx = wx.createCanvasContext('myCanvas', this); // 绘制图片到 canvas ctx.drawImage('/path/to/image.jpg', 0, 0, 300, 200); // 绘制完成后调用 draw 方法 ctx.draw(false, () => { // 将 canvas 中的内容保存为临时文件 wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: (res) => { // 保存临时文件到用户相册 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: (res) => { wx.showToast({ title: '保存成功', icon: 'success', duration: 2000 }); }, fail: (err) => { console.error(err); } }); }, fail: (err) => { console.error(err); } }, this); }); } }); ``` 在上述代码中，点击 `saveImage` 按钮会执行保存图片的逻辑，将图片绘制到 `<canvas>` 中，然后将 `<canvas>` 中的内容保存为临时文件，并最终保存到用户的相册中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

子醉

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

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

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

打赏作者

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

抵扣说明：

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

余额充值