Javascript - 单击图库中的图像时用图像填充画布答案

【问题标题】：Javascript - Fill canvas with image on clicking a image from galleryJavascript - 单击图库中的图像时用图像填充画布
【发布时间】：2018-01-19 20:20:31
【问题描述】：

我有一个图片库，其中包含使用本地目录中的 PHP 的图片。我想通过单击选择图像并将其显示在画布上以使用户能够在图像上绘图。

图库是用php生成的，下面是部分html和php代码

HTML

<div id="loaded_img_panel" name="loaded_img_panel" class="dragscroll" >           
</div>

PHP：

echo '<img src="'.$num.'" id="thumbNails"/>';

我可以毫无问题地显示图像。

我创建了一个画布来显示图像。

HTML-画布

<canvas id="myCanvas"></canvas>

以下是我拥有的javascript。

<script type="text/javascript">
   window.load = function() {
     var image = document.getElementById("thumbNails");
     image.addEventListener("click", fetchImage);

       function fetchImage(e) {
         fill_canvas(image).src = e.target.src
         }
       function fill_canvas(img) {
         var canvas = document.getElementById("myCanvas");
         var ctx = canvas.getContext("2d");

         canvas.width = img.width();
         canvas.height = img.height();

         ctx.drawImage(img, 0,0)
        }
     }
 </script>

【问题讨论】：

你发现日志有什么错误吗？
fill_canvas 不返回要设置的元素 src of...
@Rayon 没有错误......还有其他选择吗？
您必须使用window.onload 而不是window.load

标签： javascript php html canvas

【解决方案1】：

您必须使用window.onload 而不是window.load

window.onload = function() {
  var image = document.getElementById("thumbNails");
  image.addEventListener("click", fetchImage);

  function fetchImage(e) {
    fill_canvas(image);
  }

  function fill_canvas(img) {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    canvas.width = img.width;
    canvas.height = img.height;

    ctx.drawImage(img, 0, 0)
  }
}

<div id="loaded_img_panel" name="loaded_img_panel" class="dragscroll">
</div>
<hr>
<canvas id="myCanvas"></canvas>
<hr>
<img src="https://tpc.googlesyndication.com/simgad/9841060568868240804" id="thumbNails" width="100" />

【讨论】：

谢谢..但我无法在我的网站画布上显示图像..尽管您的示例确实有效
我已接受您的回答，因为它正在工作。我会检查我的代码并向您确认。
再次感谢您。我想出了如何解决从图库中单击时显示图像的问题。已将其添加为答案。

【解决方案2】：

好的。我就是这样解决这个问题的。

 window.onload = function() {
            var x = document.getElementById("mycanvas");
            canvas = x.getContext('2d');
            var thumbNails = document.getElementById("loaded_img_panel");
            var pic = new Image();
            thumbNails.addEventListener('click', function(event) {
                pic.src = event.target.src;
                pic.addEventListener("load", function(){canvas.drawImage(pic,0,0)})
            }, false); 
          }

我没有使用我的图像 id，即 thumbNail，而是使用了我的图像库的 div id。

【讨论】：