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

将图像上传到画布上

1 个答案: