将图像加载到画布中（HTML / Javascript）
[英]Loading images into canvas (HTML/Javascript)
问题描述
我知道这已经讨论过了，我已经阅读了很多文章，并尝试了所谓的工作，所以请不要立即丢弃我的问题。
我正在尝试将不同的图像加载到统一尺寸的画布中。 它可以是单个图像或多个图像，但我一次处理一个图像。
这是主要代码（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等的类似块，末尾有结束标记。
以下是“某种程度上”工作的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条件下为onload添加base_image.complete或在onload函数中添加WHILE循环但是在第一次加载时无法正确显示多个图像。 我将不胜感激任何工作示例，最好与上面类似，没有jQuery。
1 个解决方案
解决方案1
0 已采纳 2017-01-24 12:04:06
我justed指出你通过写这个意外地定义了一个全局图像对象：
base_image = new Image();
这就是为什么最后一张图像在加载时会覆盖所有以前的图像。
var base_image = new Image(); // this is fixed
希望这个例子可以帮助你，你可以通过js完成大部分工作。 只需按下“运行代码段”-Button并告诉我这是你想要的：
var imageUrls = [ 'http://animal-dream.com/data_images/koala/koala6.jpg', 'https://i.stack.imgur.com/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>
PHP / Javascript / HTML5画布 - 加载外部图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.