公告列表
公告列表
收藏
回答

仿今日头条canvas保存图片

canvas能实现这样的吗？

回答关注问题邀请回答
收藏

11 个回答

  • Eric Huang
    Eric Huang
    2018-08-28

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

    2018-08-28
    有用
    回复 7
    • .
      .
      2018-08-29

      wxml:


      js:




      控制台输出：（为啥 keyword 是 undefined ?? 还望赐教以下哈）





      2018-08-29
      赞
      回复
    • Eric Huang
      Eric Huang
      2018-08-29回复.

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

      console.log(this.data.keyword)

      2018-08-29
      赞
      回复
    • .
      .
      2018-08-29回复Eric Huang

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

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

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

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

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

      2018-08-29
      赞
      回复
    查看更多(2)
  • 侯衍超
    侯衍超
    2018-08-28

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

    2018-08-28
    有用 2
    回复 4
  • Jumor
    Jumor
    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
    有用 1
    回复 3
    • 特立独行的喵
      特立独行的喵
      2018-08-29

      canvasToTempFilePath应该写在draw()里面面


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

      2018-08-29
      赞
      回复
    • Jumor
      Jumor
      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回复Jumor

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

      2018-08-30
      赞
      回复
  • 尚
    尚
    2018-08-31

    我是这么写的

    wechatide://minicode/huCbN4mX7e2m

    2018-08-31
    有用
    回复
  • 睡前原谅一切
    睡前原谅一切
    2018-08-30

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


    2018-08-30
    有用
    回复 1
    • 特立独行的喵
      特立独行的喵
      2018-08-30

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

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

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

    2018-08-29
    有用
    回复
  • *´ ㉨ `*
    *´ ㉨ `*
    2018-08-29

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

    2018-08-29
    有用
    回复 1
    • 特立独行的喵
      特立独行的喵
      2018-08-29

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

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

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

    2018-08-29
    有用
    回复
  • WGinit
    WGinit
    2018-08-29

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

    2018-08-29
    有用
    回复
  • 特立独行的喵
    特立独行的喵
    2018-08-28

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

    2018-08-28
    有用
    回复 1
    • 李乾坤David
      李乾坤David
      2018-08-28

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

      2018-08-28
      赞
      回复

正在加载...

请 登录 后发表内容
相关问题
相关文档