2

После открытия фотографии сверху появляется отступ на половину страницы:

<!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>

4
  • 1
    Ну я вижу только отступ сверху из за элемента canvas
    – Yuri
    26 ноя 2016 в 17:58
  • а что конкретно является отступом?
    – user210479
    26 ноя 2016 в 18:05
  • 3
    Вы про этот отступ? storage5.static.itmages.ru/i/16/1126/…
    – Yuri
    26 ноя 2016 в 18:09
  • да, я про него.
    – user210479
    26 ноя 2016 в 18:11

3 ответа 3

3

Просто добавь стиль для кнопки display:block; она займет всю ширину и канвас элемент ляжет ровно под ней.

<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>
7
  • 1
    Убери "ctx = document.getElementById('canvas').getContext('2d')," и "<canvas id="canvas" ></canvas>" либо просто скопируй код что я вставил, картинка загружается нормально, проверил. 26 ноя 2016 в 18:18
  • а.... мне ее в canvas загрузить надо, а потом сохранить. я поправил код в вопросе. там черный квадратик сохраняется
    – user210479
    26 ноя 2016 в 18:20
  • @кузьмич, про сохранение уже был вопрос. Ищите в интернете
    – Yuri
    26 ноя 2016 в 18:22
  • img.onload = function() { var parkBg = new Image(600, 500); document.getElementById("canvas").appendChild(parkBg); parkBg.src = src; ctx.drawImage(img, 10, 10); } 26 ноя 2016 в 18:35
  • Может так ? вот кстати статья по вставке изображения в canvas professorweb.ru/my/html/html5/level4/4_5.php 26 ноя 2016 в 18:37
0

Вот так вот

<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>

1
  • Просто нужно canvas скрыть
    – Yuri
    26 ноя 2016 в 18:15
0
// Remove default margins, fix height
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
1
  • 3
    пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. 3 янв 2017 в 13:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.