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)

我想给你一个帮助来解决这个问题：当我在JS文件中将var image = new Image;更改为var image = {};时。然后没有错误，但因为var image不等于new Image然后根本就没有图像。所以我认为bug就在那条线上，我说var image = new Image;但我不知道为什么会有一个bug（为什么会这样）？

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。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

Canvas HTML5错误的DrawImage

1 个答案:

Fiddle Demo