我知道这个问题之前已经讨论过，我已经阅读了很多文章并尝试了声称有效的方法，所以请不要立即放弃我的问题。
我正在尝试将不同的图像加载到统一尺寸的 Canvas 中。它可以是单个图像或多个图像，但我一次处理一个图像。
这是主要代码(HTML/JS/PHP):
<?php
if ($record->photo != "") //make the first canvas
{
list($width, $height, $type) = getimagesize($record->photo);
echo "Width: " .$width. "<br />";
echo "Height: " .$height. "<br />";
?>
<canvas id="my_canvas" width="341" height = "256"></canvas>
<body>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript">
var img_src = "<?php echo $record->photo;?>";
var width = "<?php echo $width;?>";
var height = "<?php echo $height;?>";
make_canvas('my_canvas', img_src, width, height);
</script>
<?php
}//if 1
canvas2、3 等的类似 block ，末尾带有结束标记。
以下是 make_canvas() 函数“以某种方式”工作的版本。这意味着它们有时会在加载时渲染一些图片，但可能会在刷新时有所改进。当要显示多于一张图片时，我永远无法使其正常工作。
版本 1 - 不一致并缓存最后一个图像:
function make_canvas(id, src, width, height)
{
if (width > 341)
{
var new_width = 341;
var ratio = new_width / width;
var new_height = Math.round(height * ratio);
}
else
{
var new_width = width;
var new_height = height;
}
document.write("id: " + id + "<br />");
document.write("src: " + src + "<br />");
document.write("new_height: " + new_height + "<br />");
var canvas = document.getElementById(id),
context = canvas.getContext('2d');
base_image = new Image();
//base_image.src = '';
base_image.onload = function(){
context.drawImage(base_image,0,0,new_width, new_height);
}
base_image.src = src;
}
版本 2:可以加载一张图像并在刷新时缓存它
function make_canvas2(id, src, width, height)
{
if (width > 341)
{
var new_width = 341;
var ratio = new_width / width;
var new_height = Math.round(height * ratio);
}
else
{
var new_width = width;
var new_height = height;
}
document.write("id: " + id + "<br />");
document.write("src: " + src + "<br />");
document.write("new_height: " + new_height + "<br />");
var canvas = document.getElementById(id),
context = canvas.getContext('2d');
base_image = new Image();
base_image.src = '';
base_image.addEventListener("load", function() {
// execute drawImage statements here
context.drawImage(base_image,0,0,new_width, new_height);
}, false);
//base_image.onload = function(){ };
base_image.src = src;
}
我尝试在 onload 的 IF 条件或 onload 函数中的 WHILE 循环中添加 base_image.complete，但永远无法实现在首次加载时正确显示多个图像。 我将不胜感激任何工作示例，最好与上面类似并且没有 jQuery。
最佳答案
我刚刚注意到您不小心通过编写以下内容定义了全局图像对象:
base_image = new Image();
这就是为什么最后一个图像在加载时会覆盖所有以前的图像。
var base_image = new Image(); // this is fixed
希望这个例子对你有帮助，你可以通过js完成大部分工作。只需按下“运行代码片段”按钮并告诉我这是否是您想要的:
var imageUrls = [
'http://animal-dream.com/data_images/koala/koala6.jpg',
'/image/20n3G.jpg',
'https://upload.wikimedia.org/wikipedia/de/d/db/Das_G%C3%BCtermarktgleichgewicht_bei_einkommensabh%C3%A4ngiger_Nachfrage.jpg'
];
var canvasWidth = 341;
var canvasHeight = 256;
function create_canvas(id, width, height)
{
var canvas = document.createElement('canvas');
canvas.setAttribute('id',id);
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
document.getElementById('canvasCon').appendChild(canvas);
}
function make_canvas(id, src, width, height)
{
if (width > 341)
{
var new_width = 341;
var ratio = new_width / width;
var new_height = Math.round(height * ratio);
}
else
{
var new_width = width;
var new_height = height;
}
document.getElementById('msg').innerHTML += 'id: ' + id + '<br />src: ' + src + '<br /> new_height: ' + new_height + '<br />';
var canvas = document.getElementById(id),
context = canvas.getContext('2d');
var base_image = new Image();
base_image.onload = function () {
context.drawImage(base_image, 0, 0, new_width, new_height);
}
base_image.src = src;
}
imageUrls.forEach(function(url,index){
var canvasId = 'my_canvas'+(index+1);
create_canvas(canvasId,canvasWidth, canvasHeight);
make_canvas(canvasId, url, canvasWidth, canvasHeight);
});<div id="msg"></div>
<div id="canvasCon"></div>关于javascript - 将图像加载到 Canvas 中(HTML/Javascript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41827420/