Upload image onto canvas

Question

I have a canvas on which I can currently add text layers and images from flickr. What I'm trying to do is make it possible to upload an image to the canvas with the html input.

I am using this to upload images from 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");
});

I did have the image upload function working on an old canvas but now I have started working with another canvas which was better I couldn't get it to work anymore. My old way to upload image to a canvas was this:

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

I have tried some things to implement this into my new canvas but since I'm not very experienced with Javascript I couldn't get this to work.

Here is a working (old) version of my canvas to make everything more clear and for you guys to test on:
http://codepen.io/anon/pen/daqnt/?editors=001

If someone could help me get this to work it would be great!

I think you'll run into CORS with this pretty soon. See http://stackoverflow.com/questions/7129178/browser-canvas-cors-support-for-cross-domain-loaded-image-manipulation . — Juho Vepsäläinen, Apr 24 '14 at 09:04
@bebraw hmm, never heard of that before. I'll take a look at it, thnx. — Daanvn, Apr 24 '14 at 09:08
You are on the right track, though. You'll need to perform "ctx.drawImage" on your canvas at ".search img" click handler using the image source. To work around the possible CORS issue you could implement a proxy within the same domain (ie. yourdomain.com/flickr?url=) and load the image from there. — Juho Vepsäläinen, Apr 24 '14 at 09:15
@bebraw I'm not sure if you really understand what I want, I do not want to search images from flickr and I will remove this function later. I am trying to upload images from my pc to the canvas with the html file upload. — Daanvn, Apr 24 '14 at 09:22
Ah, that way! In that case you'll need to set up a similar `img.onload` handler for each as you did with Flickr. That should work. — Juho Vepsäläinen, Apr 24 '14 at 09:26

score 1 · Accepted Answer · answered Apr 24 '14 at 14:38

The same general approach should work. However, your new library expects an <img> DOM element when adding a layer.

The following does what you want:

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

Looks good so far, I will give it a +1 for now since I haven't really got the time to test it properly atm. Once I get to test it and it works I'll accept it! — Daanvn, Apr 24 '14 at 14:49

Upload image onto canvas

1 Answers1