仿今日头条canvas保存图片
发布于 5 年前 作者 juntan 16759 次浏览 来自 问答

canvas能实现这样的吗?

10 回复

可以的哈。文章还没写完。这是自己实现的。网上已经有好多插件可以实现了,https://developers.weixin.qq.com/community/develop/doc/00042003eb4d505b92079e94951400

可以试一下这个API,wx.canvasToTempFilePath(OBJECT, this) 然后在分享配置里 即 Page.onShareAppMessage(Object) 方法指定图片的Url

能否实现像简书那样将整个页面都保存为一张长图呢

Eric Huang

"可以试一下这个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拒绝了

是不是跟权限有关系? 如果你已经实现了这个功能,麻烦指导下[狗头],蟹蟹大锅~

我是这么写的

wechatide://minicode/huCbN4mX7e2m

可以,我现在用的是 https://github.com/jasondu/wxa-plugin-canvas 这个插件,生成分享图和朋友圈海报图很给力

这个东西自己写就好了 该有的api都给提供了 就代码可能会长点。。。不需要找插件  需要的话可以给你我自己做的demo

调用个谷歌地址的图片,我就不相信你的过得去

但是我画布的高度是不固定的

回到顶部