我想从来自 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);
});
});
请帮忙!
最佳答案
注意,问题中的 js
似乎在 .drawImage
的第二个、第三个、第四个参数处将先前绘制的图像上的每个图像绘制到 canvas
上加载图像
?
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);
});
另请注意来源
位于
// 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"
};
是对象,不是数组
<小时/>js
可以缩短为单个 .forEach()
循环;在 .forEach
回调中调用 .drawImage
时根据需要调整 canvas
上的位置
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');
var images = ["http://lorempixel.com/50/50/cats"
, "http://lorempixel.com/50/50/nature"
, "http://lorempixel.com/50/50/animals"
, "http://lorempixel.com/50/50/sports"
];
images.forEach(function(src, index) {
var img = new Image;
img.onload = function() {
context.drawImage(this, index * this.width, index * this.width)
}
img.src = src
})
<canvas id="product-image" width="400px" height="400px"></canvas>
关于javascript - 如何从数组中的图像源创建 Canvas 图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32292364/