收藏
回答

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

在安卓手机上并无问题。



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

3 个回答

  • 罗梅光
    罗梅光
    01-06

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

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

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

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

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

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

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

      也许一些时候,搞清楚和没搞清楚最后的结果都是一样的。但是凡事都不愿意搞清楚,那凡事也就只能捡现成的。
      01-04
      回复
    • 11110111001011110111001110111
      11110111001011110111001110111
      01-04回复Raven R
      简单的说,canvas 2d 现在就是个试验品
      相关的问题已经提过了,或许官方看到了 或许没看见  也可能已经在处理了 谁知道呢
      01-04
      回复
    • Raven R
      Raven R
      01-04
      你所说的相关问题曾经在哪些地方提到过?麻烦给一些可以看到的链接。搜索canvas 2d 关键词 在此处并无相关问题的具体描述。
      01-04
      回复
    • 11110111001011110111001110111
      11110111001011110111001110111
      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
      01-04
      回复
    • Raven R
      Raven R
      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 的方式来解决,然而汉字字体文件太大,在很多场景下也不是一个可选的方案。
      01-04
      回复
    查看更多(1)
  • Raven R
    Raven R
    01-04

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

    因此现在有一对矛盾。

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


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


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

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


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

    01-04
    赞同
    回复
登录 后发表内容
问题标签