我无法将图像添加到缩略图库的画布中答案

【问题标题】：I cannot add images to the canvas of my thumbnail image gallery我无法将图像添加到缩略图库的画布中
【发布时间】：2017-12-16 03:25:29
【问题描述】：

我是 html 和 javascript 的新手。我试图通过从图片库中调用图片来将图片添加到画布上。我正在对我的脚本使用 onclick 方法并且没有工作，因此我很挣扎。我在下面添加了我的代码。谢谢您的帮助！作业问...

实现 imgOnClick(elmt) 函数，以便它绘制（到画布的 drawImage() 方法）由 elmt 给出的图像。 elmt 将是一个标记对象。画布的 id 为 imgresult。

在文档就绪函数中，让每个缩略图图像将其单击事件设置为 imgOnClick() 函数。我建议您在为其余图像实施之前对一个图像进行测试。确保将图像缩放到可用大小。

   <pre> <code><!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel=stylesheet type="text/css" href="memeory.css">
        <title>Meme-ory :: Javascript Meme Generator</title>
        <script type="application/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

        <script>
            $( document ).ready(function() {
           $('.thumbnail').click(imgOnClick('img'){ 

           });


       });


        function imgOnClick('img') {
        var canvas = document.getElementById("imgresult");
        var ctx = canvas.getContext("2d");
        var img = document.getElementById("closeenough");

        ctx.drawImage(img, 10, 10);

        };

            };

            function buttonOnClick() {

            };



        </script>
    </head>

    <body>
        <header>
            <h1>Meme-ory: Raging on in the Moonlight!</h1>
        </header>

        <main>


            <div id="controls">
                <form>
                    <label for="toptext">Top Text:</label>
                    <input id="toptext" type="text">

                    <label for="bottomtext">Bottom Text:</label>
                    <input id="bottomtext" type="text">

                    <input id="createMemeButton" type="button" value="Give me Meme!">
                </form>
            </div>

            <div id="imagegallery">
                <img class="thumbnail" id="closeenough" src="closeenough.png" alt="close enough">
                <img class="thumbnail" id="cutenessoverload" src="cutenessoverload.png" alt="cuteness overload">
                <img class="thumbnail" id="deskflip" src="deskflip.png" alt="deskflip">
                <img class="thumbnail" id="lol" src="lol.png" alt="LOL">
                <img class="thumbnail" id="trollface" src="trollface.png" alt="troll face">
            </div>

            <div id="memeresult">
                <canvas id="imgresult">
                </canvas>
            </div>
        </main>
    </body>
</html>

【问题讨论】：

请同时添加您的 html。
更新了html
2 个问题： 1. 您的控制台中是否出现任何错误？ 2. 如果你使用 jQuery，为什么不使用 jQuery 方法来监听事件？
对不起，我不熟悉 jquery 方法，但控制台错误说“ErrorNotification.js:122 找不到具有指定 id 的上下文”

标签： javascript jquery html image canvas

【解决方案1】：

如果您尝试选择页面中的元素，则只能在创建该元素时进行。您不能在它存在之前选择它。在这种情况下，您尝试在页面的 HEAD 中选择画布和图像，但这些元素仅在稍后在您的正文中定义。

有两个简单的修复：

要么将脚本代码移到页面末尾（就在</body> 之前），要么将代码包含在$( document ).ready(function() { 块中，如下所示：

$(document).ready(function() {

    window.onclick = function imgOnClick(e) {
        var canvas = document.getElementById("imgresult");
        var ctx = canvas.getContext("2d");
        var img = document.getElementById("closeenough");
        ctx.drawImage(img, 0, 0);
    };
});

这两种方法都可以确保您在创建元素时尝试选择它们。

【讨论】：

我尝试了您描述的两种方式，但仍然无法在画布上加载图像。
尝试检查您的控制台是否有错误。另请注意，我将 imgOnClick('img'){ 更改为 imgOnClick(e) {