首页 新闻 赞助 找找看

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>
很小的菜鸟的主页 很小的菜鸟 | 菜鸟二级 | 园豆:204
提问于:2016-01-07 11:02
< >
分享
最佳答案
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
默然沉醉 | 菜鸟二级 |园豆:372 | 2016-01-07 12:41

我现在把图片放到和网页同一个文件夹了,还是没有用T_T

很小的菜鸟 | 园豆:204 (菜鸟二级) | 2016-01-07 13:25

@很小的菜鸟: 不能吧?程序运行报错吗?

默然沉醉 | 园豆:372 (菜鸟二级) | 2016-01-07 13:28

@默然沉醉: 不报错,我在js的function里面最后加了alert(0),也能显示,这个方法说明也走通了,就是没显示图片

很小的菜鸟 | 园豆:204 (菜鸟二级) | 2016-01-07 13:30

@很小的菜鸟: 如果你直接<img src="img/1.jpg">引用图片能出来吗?

如果可以出来,那你再运行我的canvas代码应该也可以出来

默然沉醉 | 园豆:372 (菜鸟二级) | 2016-01-07 13:33

@默然沉醉: 你的可以出来^O^  虽然不知道我的为什么出不来

很小的菜鸟 | 园豆:204 (菜鸟二级) | 2016-01-07 13:35

@很小的菜鸟: 那你好好对比一下吧,看看哪里不一样

默然沉醉 | 园豆:372 (菜鸟二级) | 2016-01-07 13:36

@默然沉醉: 你写的是img2.onload=function(){ context.drawImage(img2,0,0); };我是直接写b.drawImage(img,0,0);,这样有什么区别吗

很小的菜鸟 | 园豆:204 (菜鸟二级) | 2016-01-07 13:39

@很小的菜鸟: 是同步执行绘制图像的函数,可以实现一边加载,一边绘制

但是你去掉也好使,

默然沉醉 | 园豆:372 (菜鸟二级) | 2016-01-07 13:41

@默然沉醉: 问题找到了,不是路径的问题。而是你写的img2.onload=function(){ context.drawImage(img2,0,0); };我是直接写b.drawImage(img,0,0);,直接写的话不出图像。。。

很小的菜鸟 | 园豆:204 (菜鸟二级) | 2016-01-07 13:55
其他回答(2)
0

使用相对路径

羽商宫 | 园豆:2490 (老鸟四级) | 2016-01-07 11:08

相对路径指的是什么呢,这张图片是D盘的qqq.jpg

支持(0) 反对(0) 很小的菜鸟 | 园豆:204 (菜鸟二级) | 2016-01-07 11:09

@很小的菜鸟: 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) 反对(0) 羽商宫 | 园豆:2490 (老鸟四级) | 2016-01-07 11:12

@羽商宫: 嗯,谢谢你,我试过了,还是不显示

支持(0) 反对(0) 很小的菜鸟 | 园豆:204 (菜鸟二级) | 2016-01-07 11:17
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

所以开发过程中,把使用到的资源,放在一起,使用相对路径。发布的时候,也很方便。

[0] | 园豆:1257 (小虾三级) | 2016-01-07 12:53

我现在把图片放到和网页同一个文件夹了,还是没有用T_T

支持(0) 反对(0) 很小的菜鸟 | 园豆:204 (菜鸟二级) | 2016-01-07 13:25
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册