最近开发中要实现一个需求,用户点击分享生成一个图片海报,可以供用户发朋友圈或者其他使用(感觉没人会用~),用到了小程序canvas,和web上的功能基本一样,记录一下。---还没上线一周,这个功能就被撤了 首先预设几个工具函数 1/小程序开发使用的是 rpx,但是canvas里的单位使用 ...
这里使用大佬已经封装好的Painter,它已经优化canvas的缺陷和兼容安卓与ios,具体可以去看下 Painter地址:https: github.com Kujiale Mobile Painter 一。使用 .把Painter的demo下载后,把components里的painter文件包提取出来放到自己的组件里面 .把palette文件包里的card.js提取出来放到自己的项目里 .调用 ...
2020-10-19 14:00 0 1942 推荐指数:
最近开发中要实现一个需求,用户点击分享生成一个图片海报,可以供用户发朋友圈或者其他使用(感觉没人会用~),用到了小程序canvas,和web上的功能基本一样,记录一下。---还没上线一周,这个功能就被撤了 首先预设几个工具函数 1/小程序开发使用的是 rpx,但是canvas里的单位使用 ...
首先看文档 了解知识点~~(https://developers.weixin.qq.com/miniprogram/dev/component/) githup:https://github.co ...
项目中遇到需要分享到朋友圈,但是查询api发现小程序并没有提供分享到朋友圈的功能,只能实现通过canvas画一张海报然后保存到本地,让用户主动去发朋友圈。 效果图生成后海报 首先使用微信小程序提供的canvasapi将第二张图显示的海报画出来 然后调用保存本地的接口 ...
项目中遇到需要分享到朋友圈,但是查询api发现小程序并没有提供分享到朋友圈的功能,只能实现通过canvas画一张海报然后保存到本地,让用户主动去发朋友圈。 先看效果图 首先使用微信小程序提供的canvasapi将第二张图显示的海报画出来 然后调用保存本地的接口 ...
一、制作正常显示海报,生成二倍海报隐藏 代码如下 <!--index.wxml--> <view class="container"> <view class="show"> <image src="{{cardPath ...
网络图片在真机上无法显示,模拟器上生成图片正常,解决方法如下 1.把图片下载下来再绘制(但此步骤还是没办法在真机上显示出图片) 2.图片必须是https证书的图片(否则 无法显示) 3.登录小程序,在基本设置中添加域名,一个月只能修改五次 通过以上步骤就可以在真机上显示绘制的海报 ...
由于最近接触到商务类型的小程序开发较多,其中必不可少的一个功能就是小程序分享海报的绘制,海报绘制无非就是将元素在 canvas 上绘制并生成图片,常用的方法有 Wxml2Canvas 及 Painter。由于 Wxml2Canvas 的局限性较大,而且绘制出来的效果比较一般,如果较为简单的海报 ...
目标:在微信小程序中页面有一个按钮,点击后生成一张海报,点击保存,图片保存到本地相册 海报样式如下: 通过观摩别人代码,分析这张海报,难点有四个,一是背景的圆角,canvas并没有一个api是画圆角的,二是中间的两行标题,这里应该是动态的,可能一行可能两行,三是圆形头像处理 ...