小程序分享朋友圈目前的做法一般都是保存一个带有小程序二维码的海报到本地,网上也有不少相关文章,但是别人的不如自己的,这里记录一下自己生成海报保存到本地的方法。 本来一开始打算使用离屏 canvas 的,结果搞了半天发现小程序的离屏 canvas 和 通过 canvas 标签获取的有很多不 ...
小程序分享朋友圈目前的做法一般都是保存一个带有小程序二维码的海报到本地,网上也有不少相关文章,但是别人的不如自己的,这里记录一下自己生成海报保存到本地的方法。 本来一开始打算使用离屏 canvas 的,结果搞了半天发现小程序的离屏 canvas 和 通过 canvas 标签获取的有很多不 ...
View Code ...
项目中遇到需要分享到朋友圈,但是查询api发现小程序并没有提供分享到朋友圈的功能,只能实现通过canvas画一张海报然后保存到本地,让用户主动去发朋友圈。 效果图生成后海报 首先使用微信小程序提供的canvasapi将第二张图显示的海报画出来 然后调用保存本地的接口 ...
使用Canvas绘图,将图片保存到本地方法 一、使用HTML5 a标签的download属性,将图片保存到本地,不需要链接服务器 关于download属性:HTML5 <a>标签download 属性 特别说明:这种方式只支持Google和FF,IE浏览器还不支持。(注:目前测试 ...
目标:在微信小程序中页面有一个按钮,点击后生成一张海报,点击保存,图片保存到本地相册 海报样式如下: 通过观摩别人代码,分析这张海报,难点有四个,一是背景的圆角,canvas并没有一个api是画圆角的,二是中间的两行标题,这里应该是动态的,可能一行可能两行,三是圆形头像处理 ...
在一些项目中,使用uniapp前端生成海报是避免不了的,从中也遇到了一些坑。(同理在微信小程序也可以使用的原生) 遇到最大的坑还是图片生成问题CanvasContext.drawImage; canvas是不可以通过网络图片来生成的,可以使用下面的api来缓存到本地 ...
生成海报不难,都知道是用canvas画,但是在uniapp中会有一些bug,为了解决bug,下面是我的思路: 1.首先定义唯一容器,下面有image和canvas标签,为什么这样做呢,解决有些h5页面canvas画不出来,所以用image去接收并展示。 2.页面中的宽高都是 ...