html5中canvas图片显示不了，图片路径是同文件的1.png
0
[已解决问题]
解决于 2016-01-07 13:56
图片和网页放在同一个文件夹里
<head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function a1() { var c=document.getElementById("test"); var b= c.getContext("2d"); var img=new Image(); img.src="1.png"; b.drawImage(img,0,0); } </script> </head> <body onload="a1()"> <canvas id="test" height="1200px" width="1200px" style="border: solid 1px #ff0000;"></canvas> </body> </html>
最佳答案
0
最好是用相对路径
如上图
一个项目叫测试
在测试文件夹中建一个img文件夹 把需要用到的图片放在img中
假如1.html文件要调用图片
<img src="img/1.jpg">
canvas使用也一样
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var v_canvas=document.getElementById("canvas"); var context=v_canvas.getContext("2d"); var img2=new Image(); img2.src="img/1.jpg"; img2.onload=function(){ context.drawImage(img2,0,0); }; } </script> </head> <body> <canvas width="500" height="500" style="border: solid 1px #ff0000;" id="canvas"></canvas> </body> </html>
奖励园豆：5
我现在把图片放到和网页同一个文件夹了，还是没有用T_T
@很小的菜鸟: 不能吧？程序运行报错吗？
@默然沉醉: 不报错，我在js的function里面最后加了alert(0)，也能显示，这个方法说明也走通了，就是没显示图片
@很小的菜鸟: 如果你直接<img src="img/1.jpg">引用图片能出来吗？
如果可以出来，那你再运行我的canvas代码应该也可以出来
@默然沉醉: 你的可以出来^O^ 虽然不知道我的为什么出不来
@很小的菜鸟: 那你好好对比一下吧，看看哪里不一样
@默然沉醉: 你写的是img2.onload=function(){ context.drawImage(img2,0,0); };我是直接写b.drawImage(img,0,0);，这样有什么区别吗
@很小的菜鸟: 是同步执行绘制图像的函数，可以实现一边加载，一边绘制
但是你去掉也好使，
@默然沉醉: 问题找到了，不是路径的问题。而是你写的img2.onload=function(){ context.drawImage(img2,0,0); };我是直接写b.drawImage(img,0,0);，直接写的话不出图像。。。
其他回答(2)
0
使用相对路径
相对路径指的是什么呢，这张图片是D盘的qqq.jpg
@很小的菜鸟: https://www.baidu.com/s?wd=html%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84&rsp=5&f=1&oq=%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84&tn=monline_3_dg&ie=utf-8&rsv_idx=2&rsv_pq=da85d42a00112f03&rsv_t=6623iNemEWU54Q%2F7R1xglFD5G8VAntTpS1dZxHzg97AhYPJRn3dv9hWIgJstdDsSnb7%2B&rsv_ers=xn0&rs_src=0
@羽商宫: 嗯，谢谢你，我试过了，还是不显示
0
相对路径：你当前的html文件的路径为根目录，开始寻找路径。
如果当前的html在C：/user/one/desktop/demo/ 下面
desktop就是桌面的意思。
C：/user/one/desktop/demo/ 目录下面还有：
img/
|----1.jpg
|----2.jpg
引用的时候这样写绝对路径
<img src="img/1.jpg">
实际后台已经做了处理：当前的html路径+"img/1.jpg" = “C：/user/one/desktop/demo/img/1.jpg”
如果换成域名或者IP，都是同样的道理。
域名：www.myyuming.com/img/1.jpg
IP:192.168.11.12/img/1.jpg
所以开发过程中，把使用到的资源，放在一起，使用相对路径。发布的时候，也很方便。
我现在把图片放到和网页同一个文件夹了，还是没有用T_T
