画布图像绘制不工作

Canvas image drawing is not working

本文关键字：绘制 工作 图像 布图像      更新时间：2023-09-26

我试图在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>

将您的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>

在设置了源之后才初始化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>

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

相关文章：