画布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