CODEWITHSUNDEEP
javascripthtmlcanvas
Daanvn
Daanvn

Reputation: 1266

Add image to HTML5 canvas on file upload issue

Allright, this is going to be quite hard to explain but I will try to explain my problem as clear as possible.

I currently have a HTML5 Canvas with a couple of preloaded shapes which I changed to images. I am using a modified version of this example. On the canvas I have now I can drag, drop and select the shapes which are preloaded.

I have implemented an option to upload a new image to the canvas using 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(){
            ctx.drawImage(imgNew, 0, 0);

        }
        imgNew.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

This will now just put an image in the top-left corner of the canvas and when I select another shape this image will disappear. All shapes that are already in the canvas are in an array called 'shapes'. In the example there is an option to add a new shape when you dubbelclick on the canvas, this is the code:

 // double click for making new shapes
  canvas.addEventListener('dblclick', function(e) {
    var mouse = myState.getMouse(e);
    myState.addShape(new Shape(mouse.x - 10, mouse.y - 10, 20, 20, 'rgba(0,255,0,.6)'));
  }, true);

This is the addShape part which is called when double clicking:

CanvasState.prototype.addShape = function(shape) {
  this.shapes.push(shape);
  this.valid = false;
}

What I am trying to do is when I upload an image using the file upload the image should be added to the 'shapes' array so I can also drag,drop and select the uploaded image. (basically I need to do the same with the uploaded image as I can do with the preloaded ones) My guess is that it should be done something like the doubleclick method and addShape but I can't get this to work.

A working version of my current version can be found here:
http://codepen.io/anon/pen/qLuCy/

If anyone knows how I can get this to work it would be great!

Upvotes: 2

Views: 1019

Answers (1)

GameAlchemist
GameAlchemist

Reputation: 19294

first the result, here : http://codepen.io/anon/pen/qBmnC/

Your shape object can only draw one single hard-coded image, so change this and have shape be either a color or an image. In fact for this you just have to change shape.draw since the 'type' of the fill does not matter in the constructor. So just test the fill and draw accordingly :

// Tekent de Shape
Shape.prototype.draw = function(ctx) {
        var locx = this.x;
        var locy = this.y;
        var fill = this.fill ; 
        if (typeof fill == 'string' ) 
        {
          ctx.fillStyle = fill;
          ctx.fillRect(locx, locy, this.w, this.h);
        }
        else
        {
          ctx.drawImage(fill, locx, locy, this.w, this.h);
        }
}

then on image load i just add a shape that has this image as fill : 

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,imgNew.height,imgNew));
        }
        imgNew.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

I had to put the shape collection, s, as a global var. You can also see that i used the same scheme in init() to add an image once it's loaded.

Upvotes: 1

Related Questions