Question

我知道之前已经讨论了这个问题，并且我阅读了很多文章并尝试了所声称的工作，所以请不要立即丢弃我的问题。

我正在尝试将不同的图片加载到统一尺寸的画布中。它可以是单个图像或多个图像，但我一次处理一个图像。

这是主要代码（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。

Answer 1

我注意到你写了这个意外地定义了一个全局图像对象：

base_image = new Image();

这就是为什么最后一张图像在加载时会覆盖所有以前的图像。

var base_image = new Image(); // this is fixed

希望这个例子可以帮助你，你可以通过js完成大部分工作。只需按下＆＃34;运行代码片段＆＃34; -Button并告诉我这是你想要的：

＆＃13;

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);
});

＆＃13;

<div id="msg"></div>
<div id="canvasCon"></div>

＆＃13;

将图像加载到画布中（HTML / Javascript）

1 个答案: