收藏
回答

canvas 2d 在发者工具中 不能 wx.canvasToTempFilePath?

例子:

https://developers.weixin.qq.com/s/0sOvZ6mB7Wer


使用 lib 2.10.0

<canvas type="2d" id="canvas" style="width: 300px; height: 300px;"></canvas>


wx.canvasToTempFilePath({

          canvas: canvas,

          fileType: 'jpg',

          quality: 1,

          success: function(res){

            console.log(res.tempFilePath);

            wx.previewImage({

              urls: [res.tempFilePath]

            })

          }

        })


canvas2d 可以得到 临时文件的path 但是无法打开。在安卓预览时工作正常。

开发者工具中,一直是这个样子。


------------------------------------------------------------------------------

除此之外,

例子中

<cover-view> 在开发者工具中 无法遮盖 type="2d" 的 canvas

在安卓手机上并无问题。



最后一次编辑于  2020-01-04
回答关注问题邀请回答
收藏

4 个回答

  • Listen
    Listen
    2020-01-04

    恕我直言,当前的canvas 2d 就是个xx 各种不谦容 特别是华为系列手机经常渲染不出信息

    老老实实的用旧的api它不香吗?

    2020-01-04
    有用 1
    回复 7
    • Raven R
      Raven R
      2020-01-04
      这不是香不香的问题,而是搞清楚问题之后选择最合适的解决方式的问题。

      而且“旧”的API 哪里不香我在13小时之前的回复中描述了过了。

      我觉得搞开发时遇到问题应该尽量搞清楚为什么,而不是随便选一个简单轻松的方式去交差。这个不是读书考试,有标准答案,照着吩咐的做就行了。只有搞清楚了以后也许就有更好的解决方式。

      也许一些时候,搞清楚和没搞清楚最后的结果都是一样的。但是凡事都不愿意搞清楚,那凡事也就只能捡现成的。
      2020-01-04
      回复
    • Listen
      Listen
      2020-01-04回复Raven R
      简单的说,canvas 2d 现在就是个试验品
      相关的问题已经提过了,或许官方看到了 或许没看见  也可能已经在处理了 谁知道呢
      2020-01-04
      1
      回复
    • Raven R
      Raven R
      2020-01-04
      你所说的相关问题曾经在哪些地方提到过?麻烦给一些可以看到的链接。搜索canvas 2d 关键词 在此处并无相关问题的具体描述。
      2020-01-04
      回复
    • Listen
      Listen
      2020-01-04回复Raven R
      类似的应该有吧,比如:
      https://developers.weixin.qq.com/community/develop/doc/0002267caf4a98c0c0b8c267651800?highLine=cover-view%2520%25E8%25A6%2586%25E7%259B%2596%2520canvas

      https://developers.weixin.qq.com/community/develop/doc/000c2645d98f28ef0739edbc856c00?highLine=cover-view%2520%25E8%25A6%2586%25E7%259B%2596%2520canvas

      顺便说下 canvas 2d 画网络图片的时候尽可能的先把图片wx.downLoad下来后用临时路径画 不然有可能会渲染不出  ps: 在开发者工具里边canvas是看不到临时文件的 具体是啥原因咱也不清楚 就和你提的 无法预览是一个性质 在真机上又可以 
      当时就是因为这些种种原因我果断放弃了canvas 2d 感觉就是个试验品
      再提一点 设置字体的时候 如果你的手机没有相关的字体 那么可能导致小程序闪退  对,这就是canvas 2d
      2020-01-04
      回复
    • Raven R
      Raven R
      2020-01-04
      你给的两个链接例子是 canvas webgl 的 并不是canvas2d. 另外,关于网络图片需要先download的问题在文档的例子中有提到,
      而且,canvas2d要绘制图片不能直接使用canvasContext.drawIamge 传入image src的方式绘制,canvas2d只接受html 或者 imgage 对象,在小程序中必须使用Canvas.createImage来创建image 对象(html 中可以使用new Image来创建,但小程序没有Image对象,因此必须使用这个API),再者,createImage之后要监听onload事件后异步回调。这意味着直接绘制会导致图片谁先onload谁先被绘制,无法控制层级的问题,因此还需要通过promise或者callbak链来回调(我的做法是在在绘制之前先按照需要的层级创建完img对象后按顺序装list 里面 再统一绘制)。........ 另外,字体的问题在web浏览器中也是一样,并不是小程序的问题。但是web 浏览器可以通过加载webfont 的方式来解决,然而汉字字体文件太大,在很多场景下也不是一个可选的方案。
      2020-01-04
      回复
    查看更多(2)
  • phoenixor
    phoenixor
    2020-03-08

    这个方法可以保存出图片,反倒是echarts官方给的保存图表方法,输出的图片是空白

    2020-03-08
    有用
    回复
  • 罗梅光
    罗梅光
    2020-01-06

    2d的canvas生成图片试试 Canvas.createImage()

    2020-01-06
    有用
    回复 1
    • Raven R
      Raven R
      2020-01-06
      Canvas.createImage() 是在 小程序 没有 new Image 对象时的替代函数。用来创建可以被canvas2d 的 context.drawImage 允许的 img 对象。然而 这个话题抛出的问题是 canvas2d 在开发工具中为什么呈现与文档描述不符的现象。。。 我觉得热心回答问题这很好,但回答以前应该先看清楚问题是什么。在回答的时,如果自己也不太懂,那么最好自己先去试一下。
      问答网站的意义,不仅仅有人提问 其他人回答他而已。更多多时候是给后来人看的。过于简单,且不着边际的回答毫无意义。
      2020-01-06
      回复
  • Raven R
    Raven R
    2020-01-04

    我觉得是devtools并不能很好的支持canvas 2d 的渲染。

    因此现在有一对矛盾。

    项目需要是同层渲染,文档描述 canvas 2d可以同层,这很好。目测在自己手机上也正常工作。这也很好。


    但是在开发工具中无法正常渲染,这意味开发需要全靠脑补,调试不了太复杂的东西。


    如果不使用 canvas2d,放弃“同层”的优势,上面覆盖 cover-image cover-view 来实现。

    可以是可以,但是cover-的这两个组件支持的 css极少,因此视觉效果就很糟糕。


    那么,问题是有没有更好的方式解决这种矛盾?

    2020-01-04
    有用
    回复 5
    • 
      2020-02-28
      作者解决了吗?我现在也遇到问题了,提了个问题没人理
      2020-02-28
      回复
    • Raven R
      Raven R
      2020-02-28回复
      并没有真的解决,但是使用其他方法实现了同样的功能。我认为这是一个兼容问题。当时我实现时放弃了canvas2d模式,使用原本的canvas,但UI层的是无法覆盖的,必须使用cover-image, cover-view。这样的话代价就是非常丑(因为这两类可覆盖的组建不能支持例如box-shaodw之类的css定义)。之后为了让UI层可以覆盖上去,我干脆把canvas挪到了画面之外,而在原本显示canvas 的位置放置每次操作后渲染出来的临时图片。当时由于我的应用在显示画面时并不需要非常即时,于是这种方式可以接受。但是后续版本我希望可以对画布进行更多的操作。于是我干脆用view 模拟了画布,这样画面元素就都可以移动和裁切。实现以后发现用户实际使用时并不是都需要这些操作,我就禁止了一些不适合移动的元素的位移。你可以扫码看最新版本的成品。
      2020-02-28
      回复
    • 
      2020-02-28
      效果还不错,我也用普通canvas吧,那个现在还有很大的问题
      2020-02-28
      回复
    • phoenixor
      phoenixor
      2020-03-08回复Raven R
      我去,这效果太赞了,另外问下canvas保存图片搞定了吗
      2020-03-08
      回复
    • Raven R
      Raven R
      2020-05-09回复phoenixor
      当然,这个 canvas api 就有呀
      2020-05-09
      回复
登录 后发表内容
问题标签