javascript - 将图像上传到 Canvas 上

Question

我有一个 Canvas ，目前可以在上面添加来自 flickr 的文本图层和图像。我想做的是可以使用 html 输入将图像上传到 Canvas 。

我用它从 flickr 上传图像:

$(".search form.image-search").submit(function(){
        $(".search li").remove();
        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags="+$(".search input[name=q]").val()+"&tagmode=any&format=json&jsoncallback=?",
            function(data) {
            $.each(data.items, function(i,item) {
                var img = $("<img/>").attr("src", item.media.m);
                img.attr("title", item.title);
                $("<li></li>").append(img).appendTo(".search ul");
                if ( i == 8 ) return false;
            });
        });
        return false;
    }); 

$(".search img").live("click", function() {
    jCollage.addLayer($(this).context).setTitle($(this).attr("title"));
    updateLayers(jCollage.getLayers());
    $("#layer_" + (jCollage.getLayers().length - 1)).addClass("selected");
});

我确实有在旧 Canvas 上工作的图像上传功能，但现在我开始使用另一个更好的 Canvas ，我无法再让它工作了。我将图像上传到 Canvas 的旧方法是这样的:

var imageLoader = document.getElementById('uploader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var imgNew = new Image();
        imgNew.onload = function(){
s.addShape(new Shape(60,60,imgNew.width/2,imgNew.height/2,imgNew));
        }
        imgNew.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

我已经尝试了一些方法来将其实现到我的新 Canvas 中，但由于我对 Javascript 的经验不是很丰富，所以我无法让它工作。

这是我的 Canvas 的工作(旧)版本，使一切更加清晰并供你们测试:
http://codepen.io/anon/pen/daqnt/?editors=001

如果有人可以帮助我让它发挥作用，那就太好了!

Answer 1

同样的通用方法应该有效。但是，您的新库需要 <img>添加图层时的 DOM 元素。

以下内容符合您的要求:

http://codepen.io/nonplus/full/fjzcv/

  $("#uploader").change(function(e) {
      var reader = new FileReader();
      var title = e.target.value.replace(/.*[\\/]|(\.[^\.]+$)/g, "");
      reader.onload = function(event){
          var $img = $("<img/>").attr("src", event.target.result);
          jCollage.addLayer($img.get(0)).setTitle(title);
          updateLayers(jCollage.getLayers());
          $("#layer_" + (jCollage.getLayers().length - 1)).addClass("selected");    
      }
      reader.readAsDataURL(e.target.files[0]);
  });