大家好我目前正在测试使用canvas元素绘制所有背景(我稍后将添加效果到这些图像,这是我不使用CSS加载图像的原因),说我目前在加载图像时遇到困难在画布上.这是代码:
<html>
<head>
<title>Canvas image testing</title>
<script type="text/javascript">
function Test1() {
var ctx = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//Loading of the home test image - img1
var img1 = new Image();
img1.src = 'img/Home.jpg';
//drawing of the test image - img1
img1.onload = function () {
//draw background image
ctx.drawimage(img1, 0, 0);
//draw a box over the top
ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
ctx.fillRect(0, 0, 500, 500);
};
}
}
</script>
<style type="text/css">
canvas { …Temp.js
export default class Temp {
async addImageProcess(src){
let img = new Image();
img.src = src;
return img.onload = await function(){
return this.height;
}
}
}
anotherfile.js
import Temp from '../../classes/Temp'
let tmp = new Temp()
imageUrl ="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"
let image = tmp.addImageProcess(imageUrl);
console.log(image)
以上是我的代码.我有一个图像网址,并尝试使用异步等待获取图像的属性,但它不起作用,不明白我错过了什么.
它适用于IE6和FireFox; 但由于某些原因不在IE7中.
在Page_Init上使用ASP.NET我填充了指向书中图像链接的章节列表以及包含pageID的javascript数组.
恩.
第1章 - > href ="javascript:seePage(4);"
这是我正在使用的实际代码:
var availablePages = ['1002_001','1002_002','1002_003','1002_004','1002_005'];
function seePage(index) {
$get('imgSingle').src = 'graphics/loading.gif';
var img = new Image();
img.src = 'get.jpg.aspx?size=single&id=' + availablePages[index];
img.onload = function() {
var single = $get('imgSingle');
single.src = img.src;
}
}
当我点击第1章时,图像在整个板上加载(IE6,7,FF),点击第二章链接也可以正常工作; 然而,在(并且仅在)IE7中点击同一章两次(第1章,第2章,然后是第1章),图像卡在"加载"图像上...我在这里拉出我的头发... .