將圖像上傳到畫布

Question

我有一個畫布，當前可以在其上添加flickr的文本層和圖像。 我正在嘗試做的事情是可以使用html輸入將圖像上傳到畫布。

我正在使用它從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");
});

我確實在舊畫布上具有圖像上傳功能，但是現在我開始使用另一個畫布，更好的是我無法再使用它了。 我將圖片上傳到畫布的舊方法是：

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]);     
}

我已經嘗試了一些方法來將其實現到我的新畫布中，但是由於我對Javascript的經驗不是很豐富，所以無法使它起作用。

這是我的畫布的工作版本（舊版本），旨在使所有內容更加清晰，並讓您進行測試：
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]);
  });