Question

我发现这个jsfiddle http://jsfiddle.net/t7mv6/86/完全符合我的需要。一直在搜索示例并研究了几个在线html5画布教程。我试图将目录中许多选择的几个图像加载到一个html5画布。我写了这个尝试使用jsfiddle：

<!DOCTYPE html>
<html>
  <HEAD>
 <script type="text/javascript">
var input = document.getElementById('input');

input.addEventListener('click', handleFiles);
var i=0;
function handleFiles(e) {alert("here");

    var ctx = document.getElementById('canvas').getContext('2d');

    var img = new Image;
    alert("hello");
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
        ctx.drawImage(img, 20,20);
        alert('the image is drawn');

    }
}
  </script>

  </head>
  <Body >

<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="800" height="500" id="canvas"/>

</body>
</html>

以上内容不适用于我的chrome或firefox。它似乎正确显示初始页面，但图像不会显示在画布中。

我想我可能遇到安全问题或需要用onload包装它。不要真正理解onload函数的语法。 js console表示没有错误。

任何帮助表示赞赏！

添

Answer 1

您可以通过将multiple属性添加到input来选择多个图片。

<input type="file" multiple id="input"/>

这是一个示例代码和一个关于如何在单个画布上以缩略图形式显示多个图像的演示。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var input = document.getElementById('input');
input.addEventListener('change', handleFiles);

function handleFiles(e) {
  //    var images=[];
  var files=e.target.files;
  for(var i=0;i<files.length;i++){
    var img=new Image;
    img.x=i*100;
    img.onload=function(){
      ctx.drawImage(this,this.x,0,80,this.height*(80/this.width));
    }
    img.src=URL.createObjectURL(files[i]);
  }
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<input type="file" multiple id="input"/>
<br>
<canvas id="canvas" width=400 height=300></canvas>

尝试从文件目录加载画布图像

1 个答案: