Невозможно отобразить изображение, если источник передан как переменная

Я пишу код, который берет изображение и вставляет его в холст HTML. Код работает, когда я объявляю свой <img> в HTML-файле, но это не позволяет пользователю вводить новый файл.

Вот структура html (программа работает, если снова вставить строку тега:

 <style type='text/css'>
            canvas{
                border: 10px solid black;
            }
        </style>
    </head>
    <body>
        <canvas id='balls'>


        </canvas>
        <canvas id='hide' style:'border: 10px solid black;'>
                <!-- <img id = "taco" width = "300" height = "300"  src = "prime.png"> -->
        </canvas>
        <div>
            <input id='url' placeholder = "image url">
            <button id='submit'>Submit</button>
        </div>
        <!--[if lt IE 7]>
            <p class = "browsehappy">You are using an <strong>outdated</strong> browser. Please <a href = "#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <script src = "client.js" async defer></script>
    </body>
</html>

Вот часть кода JS, над которой я работаю:

$(document).ready(onReady);
var canvas = document.querySelector('canvas');

canvas.width = 300;
canvas.height= 300;
let bounced = false;
let newPic = `id = "taco" width = "300" height = "300"  src = "prime.png"`


function onReady(){
    $('#submit').on('click', updateImage)
    $('#hide').empty()
    $('#hide').append(`<img ${newPic}>`)
    makeCanvas();
    setup();
    animate();

}


function updateImage() {
    newPic= `id = "taco" width = "300" height = "300"  src = "${$('#url').val()}" alt = "prime.png"`
    //console.info(newPic)
    $('#hide').empty()
    $('#hide').append(`<img ${newPic}>`)
    makeCanvas();
    setup();
    animate();
}
 let c, can, ctx, img

function makeCanvas(){
 c = canvas.getContext('2d');
 can=document.getElementById("hide");
 console.info(can)
 can.width = 300;
 can.height = 300;
 ctx=can.getContext("2d");
 img=document.getElementById("taco");
 ctx.drawImage(img,10,10);
 console.info(img)
 console.info(ctx.drawImage(img,10,10))
}

Мои операторы console.info для img идентичны, когда код в файле HTML помещается обратно.

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

— 26.10.2018 20:35

javascript html canvas

26.10.2018 20:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вы настраиваете свой холст, ваше изображение вообще не загружается. Так что ваши ctx.drawImage (img, 10,10); вызов просто рисует ... выгруженное изображение ... пустой набор байтов ... Ничего.

Итак, вы должны сначала загрузить свое изображение. После этого рисовать будет легко. Вот небольшой пример кода:

var canv, ctx, img;
function setup() {
  //Setting up canvas

  //Fetching Context
  ctx = canv.getContext("2d");

  //Now drawing our image
  ctx.drawImage(img,10,10);
}
img = new Image();
img.onload = setup;    //We'll setup the canvas after the image is fully loaded
img.src = "your/path/or/variable/pointing/to/your/image.ext";

Надеюсь, это поможет!

Спасибо, это решило мою проблему

— 26.10.2018 21:29

Добро пожаловать @ user8735495. Вот небольшой совет: попробуйте загрузить все необходимые ресурсы, такие как скрипты и изображения, ДО того, как вы начнете обрабатывать свой скрипт (и рисовать что-то на холсте).

— 26.10.2018 21:33

26.10.2018 21:28