仿今日头条canvas保存图片
canvas能实现这样的吗?
canvas能实现这样的吗?
可以的哈。文章还没写完。这是自己实现的。网上已经有好多插件可以实现了,https://developers.weixin.qq.com/community/develop/doc/00042003eb4d505b92079e94951400
可以试一下这个API,wx.canvasToTempFilePath(OBJECT, this) 然后在分享配置里 即 Page.onShareAppMessage(Object) 方法指定图片的Url
"可以试一下这个API,wx.canvasToTempFilePath(OBJECT, this) 然后在分享配置里 即 Page.onShareAppMessage(Object) 方法指定图片的Url".
刚刚试了下好像不行啊
Page({ onReady: function (e) { // 使用 wx.createContext 获取绘图上下文 context var context = wx.createCanvasContext('canvas') context.setStrokeStyle("#00ff00") context.setLineWidth(5) context.rect(0, 0, 200, 200) context.stroke() context.setStrokeStyle("#ff0000") context.setLineWidth(2) context.moveTo(160, 100) context.arc(100, 100, 60, 0, 2 * Math.PI, true) context.moveTo(140, 100) context.arc(100, 100, 40, 0, Math.PI, false) context.moveTo(85, 80) context.arc(80, 80, 5, 0, 2 * Math.PI, true) context.moveTo(125, 80) context.arc(120, 80, 5, 0, 2 * Math.PI, true) context.stroke() context.draw(); wx.canvasToTempFilePath({ x: 100, y: 200, width: 50, height: 50, destWidth: 100, destHeight: 100, canvasId: 'canvas', success: function(res) { console.log(res.tempFilePath); wx.updateShareMenu({ title: '测试', path: 'pages/follow/follow', imageUrl: res.tempFilePath }) } }) }, onShareAppMessage() { return { title: '测试', imageUrl: 'https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' } }
|
理论上分享的图应该是canvas里面画的图
但是好像不行,还是初始的onShareAppMessage里面那张google的图
然后打开了wx.canvasToTempFilePath(OBJECT, this) 生成的临时路径(上图右边console的链接),403拒绝了
是不是跟权限有关系? 如果你已经实现了这个功能,麻烦指导下[狗头],蟹蟹大锅~
可以,我现在用的是 https://github.com/jasondu/wxa-plugin-canvas 这个插件,生成分享图和朋友圈海报图很给力