Question

我正在尝试使用HTML / javascript制作一个简单的页面。关键是检查用户提交表单的图像的一些参数（宽度，高度......）。在JS中，我从表单中获取文件，并尝试使用对象URL将其“转换”为图像。

问题发生在那里，当我将url加载到图像.src属性中时，图像似乎不能很好地加载。它的属性保持默认值（width = 0，name =“”......），甚至没有触发.onload事件。

我的代码的简化版本如下。

当我在浏览器中复制/粘贴网址时，网址效果很好我得到了我提交的图片。无法调用.onload或.onerror函数。

我不知道为什么图像没有正确加载。如果有人有线索，我会很高兴，如果你分享它。

function checkData() {
  var images = document.getElementsByName('img');

  var img = new Image();

  img.onload = function() {
    alert('the image is drawn');
  }

  img.onerror = function(e) {
    console.log("Not ok", e);
  }

  img.src = URL.createObjectURL(images[0].files[0]);

  if (img.width != 385 || img.height != 345) {
    alert("Wrong size");
    return false;
  }
}

console.log();

<form method=POST name="Form" onsubmit="return checkData()" action="">
  Image 1
  <input type="file" name="img"><br>

  <input type="submit" value="check">

</form>

Answer 1

这会将用户上传的图像绘制到画布上。我认为那是你的目标？

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method=POST name="Form" action="">
    Image 1 
    <input type="file" onchange="previewFile()"><br>
    <canvas id="canvas"></canvas>
</form>
<script>

    function previewFile() {
        var file = document.querySelector('input[type=file]').files[0];
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        if (file) {
            ctx.drawImage(file,385,345);
        } 
    }

</script>
</body>
</html>

Answer 2

我认为这是重复的，正如我的评论所述但出于好奇，我在下面建立了一个工作示例。

您必须等到图像加载后再检查其尺寸。

＆＃13;

#canvas {
  width: 20px;
  height: 20px;
}

＆＃13;

<form method="post" name="form" id="myform" action="">
  Image 1
  <input type="file" name="img"><br>
  <input type="submit" value="check">
</form>

<canvas id="canvas"></canvas>

＆＃13;

node_modules

＆＃13;

图片无法正确加载

2 个答案: