[英]HTML Canvas not displaying image
我确定这是一个简单的东西,我忽略了,但我似乎无法让我的画布显示存储在服务器上的jpg。
<img id="test_img" alt="test" src="/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg"/>
<canvas id="user_photo" style="position:relative;"></canvas>
<script type="text/javascript">
var image = new Image();
image.src = "/media/tmp/a4c1117e-c310-4b39-98cc-43e1feb64216.jpg";
var pic = document.getElementById("user_photo");
pic.getContext('2d').drawImage(image, 0, 0);
</script>
<img>
按预期显示,但画布为空白,但它似乎具有正确的尺寸。 谁知道我做错了什么?
我疲惫的双眼会感激任何帮助。
谢谢
您可能想要使用以下方法
image.onload = function() {
pic.getContext('2d').drawImage(image, 0,0);
}
因此,您确保在尝试绘制图像时加载图像。
var initialFloorplanWidth = 0;
var initialFloorplanHeight = 0;
var canvasImage = new Image();
documentReady = function () {
preloadFloorplan();
}
preloadFloorplan = function () {
onLoad = function () {
initialFloorplanHeight = canvasImage.height;
initialFloorplanWidth = canvasImage.width;
var canvasHtml = '<canvas id="MainCanvas" width="' + initialFloorplanWidth + '" height="' + initialFloorplanHeight + '">Canevas non supportés</canvas>';
$("#MainContainer").append(canvasHtml);
var canvas = $("#MainCanvas")[0];
var canvasContext = canvas.getContext("2d");
canvasContext.drawImage(canvasImage, 0, 0);
}
canvasImage.onload = onLoad;
canvasImage.src = initialFloorplan;
}
这段代码效果很好。
在加载文档时尝试这样做。 在图像可用之前,我感觉您的代码正在运行。 您还可以检测img本身何时加载。 看到这个 。
也许这与你的其余代码有关。 代码中是否标识了“user_photo”?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.