畫布HTML5上的DrawImage錯誤

Question

因此，當我嘗試像這樣在畫布上繪制圖像時（工作正常）：

<html>
    <head>
        <title>HTML5 canvas</title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            $(document).ready(start);
            var image1;
            function start() {
                var ctx = $('#canvas').get(0).getContext('2d');
                image1 = new Image;
                image1.src = "/arenag/arenagimg/BeastBear.jpg";
                image1.onload = function () {
                    ctx.drawImage(image1.src,200, 200, 100, 100);
                };
            }
        </script>
        <style type="text/css">
            #framework {
                border: 2px solid #000;
                width: 100%;
                text-align: center;
            }

            #canvas {
                background-color: #00FFE2;
                margin-right: auto;
                margin-left: auto;
            }
        </style>
    </head>
    <body>
    <div id="framework">
        <canvas id="canvas" width="1024" height="768"></canvas>
    </div>
    </body>
    </html>

然后我添加一個名為imagefactory.js的文件夾並創建一個ImageFactory類，並在該類中創建一個名為drawImage的函數：

var ImageFactory = function (ctx) {
    this.ctx = ctx;
    this.drawImage = function (image_arg, image_x, image_y, image_w, image_h) {
        var _this = this;
        var image = new Image;
        image.src = image_arg;
        image.onload = function () {
            _this.ctx.drawImage(image.src, image_x, image_y, image_w, image_h);
        };
    };
};

然后，我只是嘗試在主文件中調用該函數：

<html>
<head>
    <title>HTML5 canvas</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(start);
        var image;
        function start() {
            image = '/arenag/arenagimg/BeastBear.jpg';
            var ctx = $('#canvas').get(0).getContext('2d');
            var imageFactory=new ImageFactory(ctx);
            imageFactory.drawImage(image,200, 200, 100, 100);
            }

    </script>
    <style type="text/css">
        #framework {
            border: 2px solid #000;
            width: 100%;
            text-align: center;
        }

        #canvas {
            background-color: #00FFE2;
            margin-right: auto;
            margin-left: auto;
        }
    </style>
</head>
<body>
<div id="framework">
    <canvas id="canvas" width="1024" height="768"></canvas>
</div>
</body>
</html>

我收到此錯誤（在畫布所在的主（HTML）文件的36行中）：

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

還有與另一個錯誤相關的錯誤（我的意思是，如果沒有此錯誤，那么也就沒有第一個錯誤）：

[object%20HTMLImageElement]:1 GET http://phpcasovi.dev/arenag/klase/[object%20HTMLImageElement] 404 (Not Found)

我想為您提供解決的方法：當我更改var image = new Image; 改為var image = {}; 然后沒有錯誤，但是因為var image不等於new Image那么就根本沒有圖像。所以我認為bug就是我說var image = new Image;那一行var image = new Image; 但我不知道為什么會有錯誤（為什么要這樣）？

Answer 1

context.drawImage第一個參數應該是Image-Object而不是image.src

從docs ， ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); ， image ， 繪制context的元素。 該規范允許使用任何canvas image source （ CanvasImageSource ），例如HTMLImageElement ， HTMLVideoElement ， HTMLCanvasElement或ImageBitmap 。

 var ImageFactory = function(ctx) { this.ctx = ctx; this.drawImage = function(image_arg, image_x, image_y, image_w, image_h) { var _this = this; var image = new Image(); image.src = image_arg; image.onload = function() { _this.ctx.drawImage(image, image_x, image_y, image_w, image_h); }; }; }; $(document).ready(start); function start() { var image = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png'; var ctx = $('#canvas').get(0).getContext('2d'); var imageFactory = new ImageFactory(ctx); imageFactory.drawImage(image, 200, 200, 100, 100); }

 #framework { border: 2px solid #000; width: 100%; text-align: center; } #canvas { background-color: #00FFE2; margin-right: auto; margin-left: auto; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="framework"> <canvas id="canvas" width="1024" height="768"></canvas> </div>

畫布HTML5上的DrawImage錯誤

問題描述

1 個解決方案

解決方案1
2 已采納 2016-06-27 09:41:51

小提琴演示

畫布HTML5上的DrawImage錯誤

問題描述

1 個解決方案

解決方案1 2 已采納 2016-06-27 09:41:51

小提琴演示

解決方案1
2 已采納 2016-06-27 09:41:51