canvas中的drawImage
发布于 6 年前 作者 ylong 7283 次浏览 来自 问答

关于canvas实在是步步踩坑，没办法公司还就必须要用，望大牛告知技术方面的知识，万分感谢。

canvas画图的时候，开发者文档提供的获取图片的方式通过选择手机相册或者拍照。而我将图片放在本地，结果在开发者工具上可以画出来，在手机端画不出来是什么原因？是小程序本身的不足的地方还是另有窍门，有大牛可以指导一下吗？

10 回复

我的情况是这样，drawImage用网络连接的图片时在模拟器上可以显示，但是在真机上就不显示，必须先用getImageInfo或者downLoadFile获取网络图片（域名要在小程序后台管理中设置好），拿到临时地址；我在模拟器上用getImageInfo获取图片会报错，在真机上才获取到，然后用getImageInfo返回的地址drawImage到画布上就有了

@18楼 是的

我的项目中有一些背景图  要怎么用canvas画呢  先上传到服务器？

13楼    context.drawImage() 之后调用 context.draw() 方法了吗

统一回复：

  1. 要画的图必须先下载在本机，会有个临时图片地址，用临时图片地址。网络图片都不行的。

  2. context.drawImage()之后不要立即context.draw()。

    因为图片有时比较大或者比较复杂drawImage要时间，有时没drawImage完图片就context.draw()了。

    最好的方法是context.draw()放下一步的按钮操作。是在不行就谢了定时器吧再执行

好大一个坑~~~~~~~~

9楼解释的并不全面吧，有一段时间没有玩小程序了，其实大家如果想实现，并不是只有通过真机的相册和拍照两种途径，要抓住9楼说的drawImage只能通过tempFilePath的方式去读取资源，换个思维，把一张图上传到你自己的图片库（当然前提是https域名什么的要保证，然后通过后台接口返回给你资源）当时记得做出来以后很复杂，但是确实实现了，所以大家还是静下心来，认真研究一下比较好。。。欢迎大家关注小程序《有来有趣+》里面大都用到了canvas

请问12楼的，我也是先获取图片然后再画，但是就是画不出来，不管是真机还是模拟器上；

我的代码是这样子的

用这两种都不行

谢谢14楼的，加了能显示了，而且这里面存在异步问题，前面先画的东西要save，然后在画图片之前要restore

在开发者工具里canvas还是用浏览器的canvas实现的，所以drawImage可以绘制项目目录本地的文件。在真机上的canvas是客户端原生实现的，drawImage只能通过tempFilePath的方式去读取资源，所以图片的来源只能是从真机相册中选择的图片和拍照得到的图片。

回到顶部