Блог

Главная - Вопросы по программированию - поскольку HTMLCanvasElement не работает на Canvas

поскольку HTMLCanvasElement не работает на Canvas

#javascript #html #typescript #canvas

#javascript #HTML #typescript #canvas

Вопрос:

Этот код работает! но выдает предупреждение

Тип аргумента HTMLElement нельзя присвоить типу параметра CanvasImageSource

 function flipImage() {
            const img = document.getElementById("img_v");
            const ctx = img.getContext('2d');
            ctx.setTransform(1,0,0,-1,0,img.height);
            ctx.scale(-1, 1);
            ctx.drawImage(img, -img.width, 0);
        }

<canvas id="img_v"></canvas>

Итак, я исправил, но оба кода не работают!

Предупреждение было удалено

 const img = document.getElementById("img_v") as HTMLCanvasElement;
const img = document.getElementById("img_v") as HTMLImageElement;

Как мне это исправить?

Комментарии:

1. Это машинописный текст? Если да, пожалуйста, включите это в качестве тега.

2. Это Javascript в Html @DBS

3. Я не верю, что as это ключевое слово в vanilla JS, равно как и типы, о которых вы говорите.

4. Откуда берутся эти предупреждения? Похоже, это просто ваша IDE, предполагающая, что вы пишете на TypeScript, когда он должен быть настроен на обычный js.

Ответ №1:

Я предполагаю, что это на JavaScript, а не на TypeScript. Во втором примере используется функция TypeScript, недоступная в простом JavaScript ( as HTMLCanvasElement ).

Чтобы избавиться от предупреждения в JavaScript (а также предоставить лучшие предложения на основе типов), вы должны сначала проверить, имеет ли элемент, возвращаемый getElementById() , правильный тип (в вашем случае HTMLCanvasElement ).

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

 function flipImage() {
  const img = document.getElementById("img_v");
  if (img instanceof HTMLCanvasElement) {
    const ctx = img.getContext('2d');

    // Draw sample image just so we know the example is working
    const image = new Image(50, 50);
    image.src = 'https://i1.sndcdn.com/artworks-YBYtb3jTuIvHpI84-J01Dng-t300x300.jpg';
    ctx.drawImage(image, 0, 0);

    // Continue from here
    ctx.setTransform(1, 0, 0, -1, 0, img.height);
    ctx.scale(-1, 1);
    ctx.drawImage(img, -img.width, 0);
  }
}

flipImage();  
 <canvas id="img_v"></canvas>

Это должно избавить от предупреждения, которое вы видите, а также предоставить лучшие предложения для ctx объекта.