Question

我试图在Javascript加载窗口后使用画布绘制图像，但我只能获得图像的一部分，我无法获得完整的图像。请帮助我。

 <!DOCTYPE html>
        <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script>

        window.onload = function() {
            drawEx1();
        }

        var image1 = null;

        function drawEx1() {
            image1 = new Image();
            image1.src =
                "file:///C:/Users/Documents/project%20trails/app/i.jpg";
            image1.addEventListener('load', drawImage1);
        }

        function drawImage1() {
            var canvas  = document.getElementById("canvas1");
            var context = canvas.getContext("2d");

            context.drawImage(image1, 10, 10);
        }

            </script>

        </head>
        <body >
            <div >

               <input type="button" id="btn" value="submit" />
                <canvas id="canvas1"></canvas>
            </div>
        </body>
        </html>

Answer 1

将drawImage1功能更改为以下内容。运行下面的代码段以查看实际操作。

    function drawImage1() {
        var canvas  = document.getElementById("canvas1");
        var context = canvas.getContext("2d");
        canvas.width = 400;
        canvas.height = 400;
        context.drawImage(image1, 0, 0, image1.width, image1.height, 0, 0, 400, 300);
    }

<script>
  window.onload = function() {
    drawEx1();
  }

  var image1 = null;

  function drawEx1() {
    image1 = new Image();
    image1.src =
      "http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75";
    image1.addEventListener('load', drawImage1);
  }

  function drawImage1() {
    var canvas = document.getElementById("canvas1");
    var context = canvas.getContext("2d");

    canvas.width = 400;
    canvas.height = 300;
    context.drawImage(image1, 0, 0, image1.width, image1.height, 0, 0, 400, 300);
  }
</script>


<body>
  <div>

    <input type="button" id="btn" value="submit" />
    <canvas id="canvas1"></canvas>
  </div>
</body>

Answer 2

在设置源之前，您没有初始化onload侦听器，这可能意味着onload事件永远不会触发

    window.onload = function() {
        drawEx1();
    }

    var image1 = null;

    function drawEx1() {
        image1 = new Image();
        image1.addEventListener('load', drawImage1);
        image1.src =
            "file:///C:/Users/Documents/project%20trails/app/i.jpg";

    }

    function drawImage1() {
        var canvas  = document.getElementById("canvas1");
        var context = canvas.getContext("2d");
        // resize the image as needed
        context.drawImage(image1, 10, 10); // include desired image size and image width on this line
    }

        </script>

    </head>
    <body >
        <div >

           <input type="button" id="btn" value="submit" />
            <canvas id="canvas1"></canvas>
        </div>
    </body>
    </html>

我还试着运行解决方案是一个网络服务器（IIS express，apache）并通过URL而不是文件路径加载图像。我认为在这种情况下你应该能够通过文件路径加载图像，但是在尝试修改该元素时可能会导致问题

画布图像绘制不起作用

2 个答案: