收藏
回答

仿今日头条canvas保存图片

canvas能实现这样的吗?

最后一次编辑于  2018-08-28  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

29 个回答

  • 侯衍超
    侯衍超
    2018-08-28

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

    2018-08-28
    赞同 22
    回复 4
  • nuonuo
    nuonuo
    2018-08-29

    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拒绝了


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

    2018-08-29
    赞同 11
    回复 3
    • 特立独行的喵
      特立独行的喵
      2018-08-29

      canvasToTempFilePath应该写在draw()里面面


      看一下文档https://developers.weixin.qq.com/miniprogram/dev/api/canvas/temp-file.html

      2018-08-29
      赞同
      回复
    • nuonuo
      nuonuo
      2018-08-29回复特立独行的喵
      Page({
        data: {
          imgUrl: ''
        },
        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();
           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,但是就是出不来,就木有办法了咩>_<


      2018-08-29
      赞同
      回复
    • 特立独行的喵
      特立独行的喵
      2018-08-30回复nuonuo

      应该是图片还没有绘制或者保存好分享事件就发生了

      2018-08-30
      赞同
      回复
  • 🚗🚕🚙🚌🚎🚒🚐🚚
    🚗🚕🚙🚌🚎🚒🚐🚚
    2018-08-28

    哪样?

    2018-08-28
    赞同
    回复 1
    • 特立独行的喵
      特立独行的喵
      2018-08-31

      你可以看一下今日头条小程序,进入详情页,点击分享 ,生成的图片

      2018-08-31
      赞同
      回复
  • 特立独行的喵
    特立独行的喵
    2018-08-28

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

    2018-08-28
    赞同
    回复 1
    • 李乾坤David
      李乾坤David
      2018-08-28

      我做过的都是固定宽高的!

      2018-08-28
      赞同
      回复
  • Eric Huang
    Eric Huang
    2018-08-28

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

    2018-08-28
    赞同
    回复 7
    • 陈yob
      陈yob
      2018-08-29

      wxml:


      js:




      控制台输出:(为啥 keyword 是 undefined ?? 还望赐教以下哈)





      2018-08-29
      赞同
      回复
    • Eric Huang
      Eric Huang
      2018-08-29回复陈yob

      应该要通过 this.data 来访问 keyword 哦

      console.log(this.data.keyword)

      2018-08-29
      赞同
      回复
    • 陈yob
      陈yob
      2018-08-29回复Eric Huang

      刚刚搜素到了,刚觉小程序的 debug 不够强,错误的点、 类型没有提示。  有时候需要 data、this 有时候不需要的,兼容性高点、或错误提示好点就好了。 有没有好用的  小程序debug 插件或者软件  呀?

      2018-08-29
      赞同
      回复
    • 特立独行的喵
      特立独行的喵
      2018-08-29回复陈yob

      应该打印的是 that.data.keyword吧?

      2018-08-29
      赞同
      回复
    • 陈yob
      陈yob
      2018-08-29回复特立独行的喵

      是的,新手坑呀。还想问一下,个人开发的小程序需要 数据库 的数据,是不是还要自己准备域名和 服务器,然后进行搭建呀?  还是需要别的什么呢?

      2018-08-29
      赞同
      回复
    查看更多(2)
  • WGinit
    WGinit
    2018-08-29

    https://github.com/WGinit/mini-poster

    2018-08-29
    赞同
    回复
  • 借雨伞的小男孩
    借雨伞的小男孩
    2018-08-29

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

    2018-08-29
    赞同
    回复
  • @~@
    @~@
    2018-08-29

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

    2018-08-29
    赞同
    回复 1
    • 特立独行的喵
      特立独行的喵
      2018-08-29

      我做出来了 自己写的 但是比较丑。因为内容比较复杂  每个图片中包括很多在线用户头像,内容,和评论,还有图片。图片大小不固定

      2018-08-29
      赞同
      回复
  • Wang
    Wang
    2018-08-29

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

    2018-08-29
    赞同
    回复
  • 仙ღ₅₂₀¹³¹⁴
    仙ღ₅₂₀¹³¹⁴
    2018-08-30

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


    2018-08-30
    赞同
    回复 1
    • 特立独行的喵
      特立独行的喵
      2018-08-30

      这个插件不是还在审核中么?我要是用在公司项目里,那审核不过我就玩完了

      2018-08-30
      赞同
      回复