Блог

Главная - Вопросы по программированию - Восстановление размера изображения с помощью javascript

Восстановление размера изображения с помощью javascript

#javascript #html

Вопрос:

привет, я хотел бы создать сайт, на котором вокруг изображения вы можете увидеть радиальную надпись (ссылку) (например, солнечные лучи). На самом деле я попытался поместить изображение и через холст я пытаюсь наложить круг, а затем соединить с ним радиальные записи (следующим шагом будет перемещение записей), однако на самом деле я не могу сгенерировать прямоугольник холста с изображением того же размера (чтобы затем иметь правильные пропорции длясоздайте круг). Я пробовал getAttribute или $ {nameclass.width} и другие. но я не могу восстановить размер изображения с помощью javascript. (В css я использую проценты для лучшей адаптации к последующим реализациям @media)

 <canvas id="myCanvas" >Error</canvas>

  <div  >
    <img class="logo_centrale" src="img.png" alt="Errore" >
    <script>
         document.getElementById("myCanvas").style.border = ' 3px solid #f00 ' ;
         document.write(document.getElementsByClassName("logo_centrale").width);
         var l = document.getElementsByClassName("logo_centrale").width;/*doesn't work*/
         var c = document.getElementById("myCanvas");
         var ctx = c.getContext("2d");
         ctx.beginPath();
         ctx.strokeStyle = ' #fff ';
         l = l / 2 ;
         a = a / 2 ;
         ctx.arc( l , a ,200,0,2*Math.PI);
         ctx.stroke();
   </script>
  </div>
 
 body {
  position: fixed;
  background-color: black;
}
*{
  border: dashed;
  border-color: white;
}
.logo_centrale{   
z-index: -1;
    max-width: 45%;
    position: relative;
    display: block;
    margin-top: 10%;
    margin-left: auto;
    margin-right: auto;

}

#myCanvas{  z-index: 2;
    position:absolute;
    width: 630px;
    height: 430px;
    margin-top: 11%;
    margin-left: 27.3%;

}

Ответ №1:

Вы должны подождать, пока изображение будет готово, прежде чем пытаться получить размер, затем вы можете использовать .width и .height :

 <img class="logo_centrale" src="img.png" alt="Errore" onload="process(event)">
<script>
    function process(event) {
         console.log(event.target.width)
         console.log(event.target.height)
         // your canvas code
    }
</script>

https://jsfiddle.net/geb58asc/

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

1. Существует возможность не использовать onload для тега и вызывать его через имя класса или идентификатор

2. вам нужно дождаться загрузки изображения, вы можете извлечь элемент по классу / идентификатору, а затем прикрепить прослушиватель событий с помощью кода document.querySelector('.logo_centrale').onload = ... . Но проблема в том, что если изображение загружается до того, как вы прикрепите событие, событие никогда не сработает. Другой вариант — иметь изображение без src атрибута, и с помощью кода сначала вы добавляете прослушиватель событий onload, а затем устанавливаете src, таким образом, он должен работать. Если вы не хотите использовать onload, вы можете использовать некоторый взлом setTimeout, но onload — это правильный обратный вызов, который нужно использовать, чтобы убедиться, что он загружен

3. не работает, я пробую оба решения

4. jsfiddle.net/andrea97/42dgxa8m/6/#amp;togetherjs=d7sEP9qPtA

5. Вы устанавливаете src атрибут в функции, которая запускается при запуске onload обратного вызова, но src в начале вашего изображения нет, поэтому оно никогда не вызовет onload событие. вы можете сделать что-то подобное, чтобы правильно прикрепить обратные вызовы jsfiddle.net/m3uqenhb/2

Метки: