Question

为什么我的页面在按钮和画布之间有很多空白空间。当我上传一些图片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>

<HEAD>
  <TITLE>uploader</TITLE>
</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>

Answer 1

The empty space you are seeing is in fact canvas element - without CSS styling it is invisible.

You are not displaying image on canvas - You are adding image element to the document and in it displaying uploaded image.

I suspect You need to display image on canvas. See my example that accomplishes exactly that: https://jsfiddle.net/hxfp39wo/1/

canvas元素有超宽的上边框

1 个答案: