TonyStark1337
@TonyStark1337

Почему не отображается изображение после наложение на canvas?

Привет, есть код
var canvas = document.getElementById("myCanvas"), 
                context = canvas.getContext("2d");
                 
            var img = new Image();
			var imgT = new Image();
			
            img.src = "https://img.rosbalt.ru/photobank/1/c/a/0/Z8X2VMCx.jpg";
			imgT.src = "http://zabavnik.club/wp-content/uploads/background_html_1_16082041.jpg"
            img.onload = function() {
                 
                context.drawImage(img, 0, 0);
				context.drawImage(imgT, 300, 400,200,200);
				
            };
			console.log("url-final-  "+canvas.toDataURL());

<canvas id="myCanvas" width="1000" height="1000"
            style="background-color:#eee; border:1px solid #ccc;">
            
        </canvas>


На выводе в console.log выводится все что есть в Canvas в base64 img, при конвертация в png получается голое фото 1000x1000, но по идей должно быть две фото (одна поверх другой) почему их нету в финалином результате?
  • Вопрос задан
  • 48 просмотров
Решения вопроса 2
twobomb
@twobomb
var canvas = document.getElementById("myCanvas"), 
                context = canvas.getContext("2d");
                 
			var img = new Image();
      var imgT = new Image();
      var loaded = 0;
			img.src = "https://img.rosbalt.ru/photobank/1/c/a/0/Z8X2VMCx.jpg";
      imgT.src = "http://zabavnik.club/wp-content/uploads/background_html_1_16082041.jpg"
      imgT.onload = img.onload = function() {
      	if(++loaded == 2)
        	draw();
      };
      
      function draw(){
        context.drawImage(imgT, 300, 400,200,200);      
        context.drawImage(img, 0, 0);             
           console.log(canvas.toDataURL());

      }

P.S. Могут валиться ошибки корса и прочие если изображения лежат не на вашем хосте
Ответ написан
RAX7
@RAX7
1. нужно дождаться загрузки обеих картинок и после этого уже отрисовывать их и вызывать canvas.toDataURL
2. https://developer.mozilla.org/en-US/docs/Web/HTML/...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 ₽
eGamings Воронеж
от 80 000 до 110 000 ₽
Aviakassa.ru Севастополь
от 80 000 до 200 000 ₽
31 мар. 2020, в 14:11
1 руб./за проект
31 мар. 2020, в 14:02
15000 руб./за проект
31 мар. 2020, в 13:33
1500 руб./в час