我想从来自我的ajax请求的数组中的多个图像创建一个Canvas图像;为此,我尝试运行循环,但drawImage
不适用于循环。如何从数组中的图像源创建画布图像?
然后我尝试的功能,并在循环中调用该函数,但同样的事情发生drawImage
下面我提到的所有代码,一个与功能一个与循环不会与此
工作&一个静态目前正在运行的drawImage
中的信息。
我真的很感激,如果你们中的任何人请指导我如何解决这个问题。
静态的drawImage工作正常
function loadImages(sources, callback, imagesrc) {
var images = {};
var loadedImages = 0;
var numImages = 0;
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
var canvas = document.getElementById('product-image');
canvas.height = (jQuery(window).height()) -120;
canvas.width = canvas.height * 0.75;
var heightscreen = (jQuery(window).height()) -120;
var canvasheight = heightscreen;
var canvaswidth = canvas.height * 0.75;
canvaswidthdiv4 = 0;
var widthNeeded = canvasheight * 0.75;
var context = canvas.getContext('2d');
// THIS IS A DUMMY ARRAY SAME AS COME IN AJAX RESPONSE
var sources =
{
Slim_Fit: "http://localhost/plugindev/wp-content/uploads/2015/08/slimFit.png",
Inside_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/maincolar.png",
Outside_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/outer_collar1.png",
Main_Colar: "http://localhost/plugindev/wp-content/uploads/2015/08/inner_collar11.png"
};
loadImages(sources, function(images)
{
context.drawImage(images.Slim_Fit, canvaswidthdiv4, 55, widthNeeded, canvasheight);
context.drawImage(images.Inside_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);
context.drawImage(images.Outside_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);
context.drawImage(images.Main_Colar, canvaswidthdiv4, 55, widthNeeded, canvasheight);
});
下面的代码是我使用的功能的修改,但不工作
loadImages(sources, function(images)
{
jQuery.each(sources, function(key, value) {
DrawImage(key, images);
});
});
function DrawImage(keyname,images){
context.drawImage(images.keyname, canvaswidthdiv4, 55, widthNeeded, canvasheight);
}
下面是修正当我使用环画但这不工作
loadImages(sources, function(images)
{
jQuery.each(sources, function(key, value) {
context.drawImage(images.key, canvaswidthdiv4, 55, widthNeeded, canvasheight);
});
});
请帮忙!
谢谢你,让我试试我的代码。 – mobi001
你岩石蓓蕾,非常感谢 – mobi001