Javascript 未在HTML画布上加载和显示图像
我在一个网站上工作,当加载时,它会显示来自HTML画布元素的编译图像。我的问题是,在我继续下一步之前,我无法判断何时加载图像以将其绘制到画布上,或者如何强制加载图像。我已经浏览了以前关于这个主题的帖子,并尝试了很多不同的解决方案,但都不适合我 我使用的是web2py,所以我确实使用了一些在服务器端运行的Python助手 当我使用此选项时:Javascript 未在HTML画布上加载和显示图像,javascript,jquery,html,canvas,web2py,Javascript,Jquery,Html,Canvas,Web2py,我在一个网站上工作,当加载时,它会显示来自HTML画布元素的编译图像。我的问题是,在我继续下一步之前,我无法判断何时加载图像以将其绘制到画布上,或者如何强制加载图像。我已经浏览了以前关于这个主题的帖子,并尝试了很多不同的解决方案,但都不适合我 我使用的是web2py,所以我确实使用了一些在服务器端运行的Python助手 当我使用此选项时: canvas = document.getElementById('canvas'); context = canvas.getContext('2d');
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
image1 = new Image();
image1.src = '{{=URL('static', 'images/image-wrap-border-land.png')}}'; //resolves to: '/SNotes/static/images/image-wrap-border-land.png'
image1.onload = function() {
context.drawImage(image1, 0, 0, canvas.width, canvas.height);
};
由于图像没有加载,onload函数不做任何事情,它会跳过它。在设置源代码之前,我也尝试过使用onload函数,但是图像仍然没有绘制出来
我试过:
//code from above
if(image1.completed) {
context.drawImage(image1, 0, 0, canvas.width, canvas.height);
}
但他们也面临同样的问题
我还研究了图像在加载时产生错误的可能性。为了抓住这一点,我写道:
//code from above
image1.onerror = function() {
console.log('error');
}
但是图像源很好,并且图像没有产生错误,只是加载需要很长时间
在将图像绘制到画布之前,是否有方法等待图像加载
编辑以添加特定性: 我的HTML如下所示:
<div id="profile-container" class="container-fluid">
<h1>My Notes</h1>
<div id="empty-orders" class="column-wrapper disable" style="padding-top: 5px; margin: 0 38%;">
<h3>Create a Note and it will appear here</h3>
<button class="btn btn-lg btn-outline">{{=A('GET STARTED', _href=URL('default', 'canvas_board_print'))}}</button>
</div>
<div id="loading" class="column-wrapper">
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
</div>
<div id="row1" class="row">
</div>
</div>
function showOrders(note_orders) {
var orders = note_orders;
//console.log(orders);
var row_num = 1;
var node_num = 1;
if(orders.length > 0) {
for (var i = 0; i != orders.length; i++) {
orders[i].border = JSON.parse(orders[i].border);
orders[i].image_retouching = JSON.parse(orders[i].image_retouching);
orders[i].shipping_info = JSON.parse(orders[i].shipping_info);
var new_node = $("<div>", {id: "node" + node_num, "class": "col-xs-3 node-wrapper"});
var new_canvas = $('<canvas>', {id: "canvas" + node_num, style: 'display: none'});
var new_image = $('<img>', {id: "note_prev" + node_num, 'class': 'img-responsive'});
$('#row' + row_num).append(new_node);
$('#node'+ node_num).append(new_canvas).append(new_image).append(processOrders(orders[i], node_num));
node_num++;
if (i != 0 && (i + 1) % 4 == 0) {
row_num++;
var new_row = $("<div>", {id: "row" + row_num, "class": "row"});
$(' #profile-container ').append(new_row);
}
}
$(' #loading ').addClass('disable');
} else {
$(' #loading ').addClass('disable');
$(' #empty-orders ').removeClass('disable');
}
}
function processOrders(curr_order, node_num) {
var canvas = document.getElementById('canvas' + node_num);
var context = canvas.getContext('2d');
var image1 = new Image();
image1.src = curr_order.image_url;
canvas.width = image1.naturalWidth;
canvas.height = image1.naturalHeight;
if(image1.complete) {
context.drawImage(image1, 0, 0, canvas.width, canvas.height);
if(curr_order.border.style == 'color_wrap') {
document.getElementById('note_prev' + node_num).style.border = "10px solid " + curr_order.border.color;
} else if(curr_order.border.style == 'image_wrap') {
var image_wrap = new Image();
if(canvas.width > canvas.height) {
image_wrap.src = '{{=URL('static', 'images/image-wrap-border-land.png')}}';
} else {
image_wrap.src = '{{=URL('static', 'images/image-wrap-border-port.png')}}';
}
console.log(image_wrap);
image_wrap.onload = function() {
context.drawImage(image_wrap, 0, 0, canvas.width, canvas.height);
};
image_wrap.onerror = function() {
console.log('errors');
}
}
}
document.getElementById('note_prev' + node_num).src = canvas.toDataURL('image/png');
var node_div = document.createElement('div');
//Other non-image informantion is appended to node_div
return node_div;
}
我认为这不是一个好主意,因为我不想创建额外的变量,即使它们不会被使用,但我想它解决了这个问题 context.drawImage的第一个参数是要绘制的图像,第二个参数是context.drawImage在上下文中的位置
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
其余参数允许您缩放图像
我建议你试试
image1.onload = function() { context.drawImage(image1,0,0); }
我可以用你的代码加载图像 您能确认在加载图像时没有收到错误吗 (寻求澄清:作为演示运行代码片段的答案发布) 更新:添加了一种黑客方式,在加载图像后和将其绘制到画布之前等待一秒钟
var canvas=document.getElementById(“canvas”);
var ctx=canvas.getContext(“2d”);
var image1=新图像();
image1.src=http://lorempixel.com/400/200/sports/1/';
image1.onload=函数(){
//你可以马上画这个图像
//ctx.drawImage(图像1,0,0,canvas.width,canvas.height);
//或
//你可以再等一秒钟再画这幅图(我知道,这是一种黑客行为)
setTimeout(函数(){
ctx.drawImage(图像1,0,0,canvas.width,canvas.height);
},1*1000);//1秒(毫秒)
};代码>
画布
在设置src之前设置onload函数。图像很可能是在设置onload函数之前加载的
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
image1 = new Image();
image1.onload = function() {
context.drawImage(image1, 0, 0, canvas.width, canvas.height);
};
image1.src = '{{=URL('static', 'images/image-wrap-border-land.png')}}'; //resolves to: '/SNotes/static/images/image-wrap-border-land.png'
谢谢,但这是问题中的一个输入错误。我在实际代码中正确地编写了它。@nightwuffle您的代码应该可以工作-请参阅我正在运行的代码段-您能用硬编码的URL替换您的变量并进行测试吗?图像没有产生任何错误。我用我的URL替换了您在示例中使用的URL,但它仍然不起作用。我将更新我的帖子,提供更多关于我的代码和问题的具体信息。我已经修复了它。我将image_wrap变量的声明与image1变量的声明一起移动,并将其修复。谢谢你的帮助。为了其他人的利益,请随意添加它作为答案:)谢谢,但我的问题有一个拼写错误。它在我的代码中编写正确。我已经试过了你的建议,这是我的问题,但对我不起作用。我也尝试过在加载后设置图像源,但它仍然跳过它。
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
image1 = new Image();
image1.onload = function() {
context.drawImage(image1, 0, 0, canvas.width, canvas.height);
};
image1.src = '{{=URL('static', 'images/image-wrap-border-land.png')}}'; //resolves to: '/SNotes/static/images/image-wrap-border-land.png'