例子:
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
在安卓手机上并无问题。
恕我直言,当前的canvas 2d 就是个xx 各种不谦容 特别是华为系列手机经常渲染不出信息
老老实实的用旧的api它不香吗?
而且“旧”的API 哪里不香我在13小时之前的回复中描述了过了。
我觉得搞开发时遇到问题应该尽量搞清楚为什么,而不是随便选一个简单轻松的方式去交差。这个不是读书考试,有标准答案,照着吩咐的做就行了。只有搞清楚了以后也许就有更好的解决方式。
也许一些时候,搞清楚和没搞清楚最后的结果都是一样的。但是凡事都不愿意搞清楚,那凡事也就只能捡现成的。
相关的问题已经提过了,或许官方看到了 或许没看见 也可能已经在处理了 谁知道呢
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
而且,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 的方式来解决,然而汉字字体文件太大,在很多场景下也不是一个可选的方案。
这个方法可以保存出图片,反倒是echarts官方给的保存图表方法,输出的图片是空白
2d的canvas生成图片试试 Canvas.createImage()。
问答网站的意义,不仅仅有人提问 其他人回答他而已。更多多时候是给后来人看的。过于简单,且不着边际的回答毫无意义。
我觉得是devtools并不能很好的支持canvas 2d 的渲染。
因此现在有一对矛盾。
项目需要是同层渲染,文档描述 canvas 2d可以同层,这很好。目测在自己手机上也正常工作。这也很好。
但是在开发工具中无法正常渲染,这意味开发需要全靠脑补,调试不了太复杂的东西。
如果不使用 canvas2d,放弃“同层”的优势,上面覆盖 cover-image cover-view 来实现。
可以是可以,但是cover-的这两个组件支持的 css极少,因此视觉效果就很糟糕。
那么,问题是有没有更好的方式解决这种矛盾?