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

Question

[TonyStark1337]

Привет, есть код

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, но по идей должно быть две фото (одна поверх другой) почему их нету в финалином результате?

Answer 1

[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. Могут валиться ошибки корса и прочие если изображения лежат не на вашем хосте

Comments

[TonyStark1337]

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at draw (test.com/test.html:57:31)
at HTMLImageElement.imgT.onload (test.com/test.html:47:10)

[twobomb]

TonyStark1337, я же сказал, изображения должны быть на вашем хосте

[twobomb]

TonyStark1337, Если делаете это на локалхосте, залейте их в папку с проектом и берите оттуда

[twobomb]

Могу предложить еще такой вариант, выберите 2 фотки с компа

<label >Выберите 2 изображения
<input id="files" type="file" multiple  accept="image/x-png,image/gif,image/jpeg">
</label>
<canvas id="myCanvas" width="1000" height="1000"
            style="background-color:#eee; border:1px solid #ccc;">
            
        </canvas>

var images = [];

function ff(imgs){
var canvas = document.getElementById("myCanvas"), 
                context = canvas.getContext("2d");
       
      var loaded = 0;
			var img = new Image();
      var imgT = new Image();
			img.src = imgs[0];
      imgT.src = imgs[1];
      imgT.onload = img.onload = function() {
        if(++loaded == 2)
          draw();
      };
      
      function draw(){
        context.drawImage(imgT, 200, 200,200,200);      
        context.drawImage(img, 0, 0,200,200);           
        document.write("<img src='"+canvas.toDataURL()+"' />")
      }
}

document.querySelector("#files").onchange = function(e){
	Array.from(this.files).forEach(f=>{
    var reader = new FileReader();
    reader.onload = function (e) {
     		 images.push(e.target.result)
        if(images.length == 2)
        	ff(images);
    };
    reader.readAsDataURL(f);  
  });
};

Answer 2

[RAX7]

1. нужно дождаться загрузки обеих картинок и после этого уже отрисовывать их и вызывать canvas.toDataURL
2. https://developer.mozilla.org/en-US/docs/Web/HTML/...