我在画布中动态加载图片时遇到问题。我的Asp.Net代码隐藏通过
发送ImageLinkScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), "upd",
"<script language='javascript'>loadTempAnalyze('"+ imageLink+"') </script>", false);
给客户。在我的画布上绘制图像的代码是:
function loadTempAnalyze(imgLink) {
console.log(imgLink);
var mcv = window.document.getElementById("thermCanvas");
var cont = mcv.getContext("2d");
var img = window.document.getElementById("mImg");
img.onload = function () {
console.log("imageload");
imgComplete(img, cont, mcv);
console.log("image draw");
};
img.src = imgLink;
}
function imgComplete(img, cont, mcv) {
console.log("img call");
window.document.getElementById("imgHeader").style.backgroundImage = "url('" + img.src + "')";
mcv.width = img.width;// + "px";
mcv.height = img.height;//+ "px";
cont.drawImage(img, 10, 10);
};
}
imgLink
显示的链接有效,Firefox的控制台中没有例外,但Canvas中没有显示任何内容。日志似乎没有问题#34; http://localhost/images/p1.png&#34;,然后&#34; imageload&#34;,&#34; img call&#34;和&#34;图像绘制&#34;最后。 img Image按预期显示图像。
我注意到的奇怪行为是,如果我在html中对imgLink进行硬编码,一切正常。
<canvas id="thermCanvas" onload="loadTempAnalyze('http://localhost/images/p1.png')/>
我用来访问该网站的网址是http://localhost/mainPage.aspx
。