将图像上载到画布上

我有一个画布，我目前可以从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

如果有人可以帮助我得到这个工作，这将是巨大的！

来源

2014-04-24 Daanvn

牛米。注意到你的codepen。 –

我想你很快就会遇到CORS。请参阅http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation。 –

@bebraw嗯，从来没有听说过。我会看看它，thnx。 – Daanvn

相同的一般方法应该工作。但是，添加图层时，新库需要添加<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]); 
    });

来源

2014-04-24 14:38:21

目前看起来不错，现在我会给它一个+1，因为我没有真正的时间来正确地测试atm。一旦我开始测试它，它会起作用，我会接受它！ – Daanvn

有一段时间来测试它，它似乎很好，thnx！^^ – Daanvn

将图像上载到画布上

回答

相关问题