After opening the photo, a half page indent appears on top:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>uploader</TITLE> <style> #canvas { display: none; } </style> </HEAD> <body> <input type="file" name="img" id="uploadimage" size="1"> <a id="downloadLnk" download="img.jpg">download</a> </p> </td> <script> function draw() { //upload var ctx = document.getElementById('canvas').getContext('2d'), img = new Image(), f = document.getElementById("uploadimage").files[0], url = window.zURL || window.URL, src = url.createObjectURL(f); img.src = src; img.onload = function() { var parkBg = new Image(600, 500); document.body.appendChild(parkBg); parkBg.src = src; } } function download() { //upload var dt = canvas.toDataURL('image/jpeg'); this.href = dt; }; downloadLnk.addEventListener('click', download, false); document.getElementById("uploadimage").addEventListener("change", draw, false) </script> <canvas id="canvas"></canvas> </body> </html>

  • one
    Well, I can only see the indentation from above because of the canvas - Yuri
  • and what exactly is indentation? - Kuzmich
  • 3
    Are you talking about this indent? storage5.static.itmages.ru/i/16/1126/… - Yuri
  • Yes, I'm talking about him. - kuzmich

3 answers 3

Just add a style to the display: block button; it will occupy the entire width and the canvas will lie flat under it.

 <head> <script> function draw() { //upload var ctx = document.getElementById('canvas').getContext('2d'), img = new Image(), f = document.getElementById("uploadimage").files[0], url = window.zURL || window.URL, src = url.createObjectURL(f); img.src = src; img.onload = function() { var parkBg = new Image(600, 500); document.getElementById("canvas").appendChild(parkBg); parkBg.src = src; ctx.drawImage(img, 10, 10); } } document.getElementById("uploadimage").addEventListener("change", draw, false) </script> <style> input[type="file"]{ display: block; } #canvas{ width: 600px; height: 500px; } </style> </head> <body> <canvas id="canvas" ></canvas> </body> </html>
  • one
    Remove "ctx = document.getElementById ('canvas'). GetContext ('2d')," and "<canvas id =" canvas "> </ canvas>" or just copy the code that I put in, the picture loads fine, checked. - junior-web-dev
  • And .... I need to load it into the canvas, and then save it. I corrected the code in question. there is a black square preserved - kuzmich
  • @ Kuzmich, there was already a question about saving. Search the Internet - Yuri
  • img.onload = function () {var parkBg = new Image (600, 500); document.getElementById ("canvas"). appendChild (parkBg); parkBg.src = src; ctx.drawImage (img, 10, 10); } - junior-web-dev
  • Maybe so ? here is by the way an article on inserting an image into canvas on professorweb.ru/my/html/html5/level4/4_5.php - junior-web-dev

So here

 <html> <input type="file" name="img" id="uploadimage" size="1"> <head> <script> function draw() { //upload var ctx = document.getElementById('canvas').getContext('2d'), img = new Image(), f = document.getElementById("uploadimage").files[0], url = window.zURL || window.URL, src = url.createObjectURL(f); img.src = src; img.onload = function() { var parkBg = new Image(600, 500); document.body.appendChild(parkBg); parkBg.src = src; } } document.getElementById("uploadimage").addEventListener("change", draw, false) </script> <style>#canvas {display:none;}</style> <!-- Добавьте этот стиль --> </head> <body> <canvas id="canvas" ></canvas> </body> </html>

  • Just need to hide the canvas - Yuri
 // Remove default margins, fix height html, body { height: 100%; margin: 0; padding: 0; }
  • 3
    Please try to leave a little more detailed answers. - aleksandr barakin