canvas能实现这样的吗？
相关问题
相关文档
- Canvas.getContext: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#参数: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#功能描述: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.getContext#返回值: 小程序/开发/API/画布/Canvas/Canvas.getContext
- Canvas.cancelAnimationFrame: 小程序/开发/API/画布/Canvas/Canvas.cancelAnimationFrame
可以试一下这个API，wx.canvasToTempFilePath(OBJECT, this) 然后在分享配置里 即 Page.onShareAppMessage(Object) 方法指定图片的Url
wxml:
js:
控制台输出：（为啥 keyword 是 undefined ?? 还望赐教以下哈）
应该要通过 this.data 来访问 keyword 哦
console.log(this.data.keyword)
刚刚搜素到了，刚觉小程序的 debug 不够强，错误的点、 类型没有提示。 有时候需要 data、this 有时候不需要的，兼容性高点、或错误提示好点就好了。 有没有好用的 小程序debug 插件或者软件 呀？
应该打印的是 that.data.keyword吧？
是的，新手坑呀。还想问一下，个人开发的小程序需要 数据库 的数据，是不是还要自己准备域名和 服务器，然后进行搭建呀？ 还是需要别的什么呢？
可以，我现在用的是 https://github.com/jasondu/wxa-plugin-canvas 这个插件，生成分享图和朋友圈海报图很给力
要是绘制多张图呢？ 这个images字段怎么用？
一次绘制多张图？ 这个images是多张图绘制到一张图上使用的
我绘制的图 上面的文字和图片都是从接口动态获取的，这怎么设置config
现在支持异步生成海报，可以查看https://github.com/jasondu/wxa-plugin-canvas 文档
"可以试一下这个API，wx.canvasToTempFilePath(OBJECT, this) 然后在分享配置里 即 Page.onShareAppMessage(Object) 方法指定图片的Url".
刚刚试了下好像不行啊
Page({onReady:function(e) {// 使用 wx.createContext 获取绘图上下文 contextvarcontext = 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拒绝了
是不是跟权限有关系？ 如果你已经实现了这个功能，麻烦指导下[狗头]，蟹蟹大锅~
canvasToTempFilePath应该写在draw()里面面
看一下文档https://developers.weixin.qq.com/miniprogram/dev/api/canvas/temp-file.html
Page({data: {imgUrl:''},onReady:function(e) {// 使用 wx.createContext 获取绘图上下文 contextvarcontext = 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();const self =this;wx.canvasToTempFilePath({x: 0,y: 0,width: 500,height: 400,destWidth: 500,destHeight: 400,canvasId:'canvas',draw() {console.log('ca draw');},success:function(res) {console.log(res.tempFilePath);self.setData({imgUrl: res.tempFilePath})}},this);},onShareAppMessage() {console.log('click');const url =this.data.imgUrl;console.log(url);return{title:'测试',imageUrl: url}}});canvas转图片的临时url是有的，用image标签也能加载出来，分享图片也是用的同一个url，但是就是出不来，就木有办法了咩>_<
应该是图片还没有绘制或者保存好分享事件就发生了
我是这么写的
wechatide://minicode/huCbN4mX7e2m
可以的哈。文章还没写完。这是自己实现的。网上已经有好多插件可以实现了，https://developers.weixin.qq.com/community/develop/doc/00042003eb4d505b92079e94951400
这个插件不是还在审核中么？我要是用在公司项目里，那审核不过我就玩完了
调用个谷歌地址的图片，我就不相信你的过得去
这个东西自己写就好了 该有的api都给提供了 就代码可能会长点。。。不需要找插件 需要的话可以给你我自己做的demo
我做出来了 自己写的 但是比较丑。因为内容比较复杂 每个图片中包括很多在线用户头像，内容，和评论，还有图片。图片大小不固定
能否实现像简书那样将整个页面都保存为一张长图呢
https://github.com/WGinit/mini-poster
但是我画布的高度是不固定的
我做过的都是固定宽高的！