html未捕获的DOMException问题:无法在'CanvasRenderingContext2D'上执行'getImageData':源宽度为0

时间:2020-11-08 11:33:03

标签: javascript html dom

我正遇到html问题:

未捕获的DOMException:无法在'CanvasRenderingContext2D'上执行'getImageData':源宽度为0。

在添加一些CSS之前,它运行正常,现在我已经擦除了所有CSS部分,但它仍然显示相同的错误。

  <body>
    <div class="cont">
      <div class="">
        <label>Image Decryption </label>
        <input
          class="ui secondary button"
          type="file"
          name="pic"
          accept="image/*"
          onchange="decode(this);"
        />
      </div>
      <div class="img1">
        <h5>Decoded Text:</h5>
        <img id="stegimage" src="" alt="" width="400" height="400" ; />
        <h2 id="decoded"></h2>
      </div>
    </div>
  </body>

这是我正在使用的js部分:

var imgdatauri;

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (s) {
      document.querySelector("#image1").src = s.target.result;
      imgdatauri = s.target.result;
    };
  }
  reader.readAsDataURL(input.files[0]);
}

function hideText() {
  document.querySelector("#image2").src = steg.encode(
    document.querySelector("#text").value,
    imgdatauri
  );
}
function decode(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (s) {
      console.log(steg.decode(s.target.result));

      document.querySelector("#stegimage").src =
        (s.target.result)
      

      document.querySelector("#decoded").innerText = steg.decode(
        s.target.result
      );
    };
  }
  reader.readAsDataURL(input.files[0]);
}

0 个答案:

没有答案