將圖像上載到畫布上

我有一個畫布，我目前可以從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

將圖像上載到畫布上

回答

相關問題