Загрузка изображения на холст с помощью javaScript

Привет всем, что я сейчас тестирую, используя элемент canvas для рисования всех фонов (позже я добавлю эффекты к этим изображениям, и это причина, по которой я не использую css для загрузки изображений), который сказал, что в настоящее время у меня возникают трудности при загрузке изображения на холсте. вот код:

<html>    
<head>    
    <title>Canvas image testing</title>
    <script type="text/javascript">
        function Test1() {
            var ctx = document.getElementById('canvas');
            if (canvas.getContext) {
                var ctx = canvas.getContext('2d');
                //Loading of the home test image - img1
                var img1 = new Image();
                img1.src = 'img/Home.jpg';
                //drawing of the test image - img1
                img1.onload = function () {
                    //draw background image
                    ctx.drawimage(img1, 0, 0);
                    //draw a box over the top
                    ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
                    ctx.fillRect(0, 0, 500, 500);
                };
            }                
        }
    </script>
    <style type="text/css">
        canvas { border: 2px solid black; width: 100%; height: 98%; }
    </style>
</head>
<body onload="Test1();">    
    <canvas id="canvas" width="1280" height="720"></canvas>      
</body>
</html>

Я думаю, что я не загружаю изображение правильно, но я не уверен.

Ответ 1

Есть несколько вещей:

drawimage должен быть drawimage - отметить капитал i.
Ваш getElementById ищет элемент с идентификатором canvas, но он должен быть test1. canvas - это тег, а не идентификатор.
Замените переменную canvas (например, в строках canvas.getContext) на ctx, так как это переменная, которую вы использовали для выбора вашего элемента canvas.
Привяжите обработчик onload перед установкой src изображения.

Итак, ваша функция должна закончиться следующим образом:

function Test1() {
    var ctx = document.getElementById('test1');
    if (ctx.getContext) {

        ctx = ctx.getContext('2d');

        //Loading of the home test image - img1
        var img1 = new Image();

        //drawing of the test image - img1
        img1.onload = function () {
            //draw background image
            ctx.drawImage(img1, 0, 0);
            //draw a box over the top
            ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
            ctx.fillRect(0, 0, 500, 500);

        };

        img1.src = 'img/Home.jpg';
    }
}

Ответ 2

Использование новых функций JavaScript:

let img = await loadImage("./my/image/path.jpg");
ctx.drawImage(img, 0, 0);

и функция loadImage выглядит так:

function loadImage(url) {
  return new Promise(r => { let i = new Image(); i.onload = (() => r(i)); i.src = url; });
}

Ответ 3

переместите прослушиватель событий onload до того, как вы установите src для изображения.

    var img1 = new Image();

    //drawing of the test image - img1
    img1.onload = function () {
        //draw background image
        ctx.drawImage(img1, 0, 0);
        //draw a box over the top
        ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
        ctx.fillRect(0, 0, 500, 500);

    };

    img1.src = 'img/Home.jpg';

Ответ 4

Назначьте свой локальный ресурс файла (url) источнику изображения и рисуйте изображение, используя контекст из холста, который хотите загрузить. Это. См. Ниже код.

var loadImage = function (url, ctx) {
  var img = new Image();
  img.src = url
  img.onload = function () { 
    ctx.drawImage(img, 0, 0);
  }
}