first, the main image is loaded from the computer, and then the logo on a transparent background. after which you need to download a picture with a logo

the final image is saved normally if both images are loaded via the Choose file menu. But if the main image is loaded via Choose file, and the logo - with the Add logo button. It is visible in the canvas, but the final image is saved without it, as the logo is not added.

ps If you do not click the Add logo button, everything works in the console on this site. Here is an example of the logo http://chu93.aphp.fr/wp-content/blogs.dir/32/files/2015/10/LOGO-YOUTUBE.png

var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); function draw() { //Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠ· Ρ„Π°ΠΉΠ»Π° var ctx = document.getElementById('canvas').getContext('2d'), img = new Image(), f = document.getElementById("uploadimage").files[0], url = window.zURL || window.webkitURL, src = url.createObjectURL(f); img.src = src; img.onload = function() { ctx.drawImage(img, 0, 0, 480, 400); } } document.getElementById("uploadimage").addEventListener("change", draw, false) function Up() { //Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° var ctx = document.getElementById('canvas').getContext('2d'), img = new Image(), src = "http://chu93.aphp.fr/wp-content/blogs.dir/32/files/2015/10/LOGO-YOUTUBE.png"; img.src = src; img.onload = function() { ctx.drawImage(img, 0, 0, 480, 400); } } function doCanvas() { //отрисовка пустого поля ctx.fillStyle = '#f90'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#fff'; ctx.font = '60px sans-serif'; ctx.fillText('Pls choose img', 7, canvas.height / 2 - 10); } function download() { //скачиванС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ var dt = canvas.toDataURL('image/jpeg'); this.href = dt; }; downloadLnk.addEventListener('click', download, false); 
 <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body onload="doCanvas()"> <input type='file' name='img' size='0' id='uploadimage' /> <button type="button" onclick="Up()">Add logo</button> <a id="downloadLnk" download="img.jpg">Download</a> <button onclick="doCanvas()">Clear</button> </br> <canvas id="canvas" width="480" height="400"></canvas> <script src="config.js"></script>

    1 answer 1

     var img = new Image; img.src = ctx.toDataURL; document.getElementById(ΠΈΠ΄_ΠΊΠ½ΠΎΠΏΠΊΠΈ).addEventListener('click', function() { ctx.drawImage(img, 0, 0, canvas_width, canvas_height) });

    Save the canvas-image in the variable img, then when you click on the button we draw this image. canvas_width and canvas_height are the width and height of the canvas, respectively.

    Your mistake was that you forgot to declare a variable of type Image (), that is, not var dt = file.png (yours is the wrong version), but var dt = new Image(); dt.src = file.png; var dt = new Image(); dt.src = file.png; (correct option).