CODEWITHSUNDEEP
javascriptjqueryhtmlcordovacanvas
DaViDa
DaViDa

Reputation: 641

Drawing another image to canvas

So I am creating a cordova app where I take a photo from the iphone library, draw it to canvas and add another image to it in order to save it as one photo. So far the photo I draw from the iphone photo library gets drawn without problems to the canvas, however the second image doesn't.

When I load the second image, it first gets added to a div with absolute positioning in order to move it to wherever I want. After that I get the actual image it's source and it's positions and try to draw it to canvas. The drawing of the second image happens when I call a method that also performs the canvas2ImagePlugin it's functions. In the end only the first photo without the second image gets saved.

The draw image to canvas function:

function drawImage(image_source, dx, dy)
{
    var canvas = document.getElementById('Photo');
    var image = new Image();
    image.src = image_source;  
    image.onload = function() {
        c=canvas.getContext("2d");
        c.canvas.width = window.innerWidth;
        c.canvas.height = window.innerHeight;
        c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
    }
}

The method for drawing the second image and saving it:

function saveImage()
{
    var img = $('.ObjectImage').attr('src', $('img:first').attr('src'));
    var imagePosition = $('.ObjectImage').find('img:first').position();
    drawImage(img, imgPosition.left, imgPosition.top);

    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);
        },
        function(err){
            console.log(err);
        },
        document.getElementById('Photo')
        );

    alert("Image saved");
}

The window.innerWidth, window.innerHeight on the canvas is done to get the canvas in full screen of the parent div.

EDIT to the comment:

function drawImage(image_source, dx, dy)
{
    var canvas = document.getElementById('Photo');
    var image = new Image();
    image.onload = function() {
        c=canvas.getContext("2d");
        c.canvas.width = window.innerWidth;
        c.canvas.height = window.innerHeight;
        c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
    }

    image.src = image_source;
}

Still not working

Upvotes: 0

Views: 1375

Answers (2)

Siderite Zackwehdex
Siderite Zackwehdex

Reputation: 6570

The drawImage function works asynchronously, it starts loading an image and exits immediately. Then, when the image loads, the canvas is updated. If you run something like:

drawImage('test.jpg',0,0);
drawImage('test2.jpg',0,0);

you will get both images updating the canvas at approximately the same time and only one will appear.

Also, what wolfhammer said is correct. If you set the size of the canvas, you clear it, so drawing one image after the other, even if they are smaller sizes and should both appear, will only show the last one. Check this link on how to solve it: Preventing Canvas Clear when Resizing Window

Further more, you are drawing all images with the width and height of the window, which doesn't make sense. Probably you want to use the width and height of the image (so this.width instead of window.innerWidth)

Upvotes: 1

wolfhammer
wolfhammer

Reputation: 2661

When you set the width and height of the canvas the data on "Photo" is cleared. I've provide a resize function if resizing is really needed.

function drawImage(image_source, dx, dy)
{
    var canvas = document.getElementById('Photo');
    var image = new Image();
    image.src = image_source;  
    image.onload = function() {
        c=canvas.getContext("2d");
        //c.canvas.width = window.innerWidth;
        //c.canvas.height = window.innerHeight;
        c.drawImage(image,dx,dy, window.innerWidth, window.innerHeight);
    }
}


var can = document.getElementById('can');
var ctx = can.getContext('2d');
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(20, 90);
ctx.lineTo(50, 10);
ctx.lineTo(80, 90);
ctx.lineTo(10, 40);
ctx.lineTo(90, 40);
ctx.lineTo(20, 90);
ctx.fill();


var btn = document.getElementById('btnResize');
btn.addEventListener('click', function() {
  resize(can, can.width * 2, can.height * 2);
});

function resize(can, w, h) {
  var ctx = can.getContext('2d');

  // copy
  var can2 = document.createElement('canvas');
  var ctx2 = can2.getContext('2d');
  can2.width = can.width;
  can2.height = can.height;
  ctx2.drawImage(can, 0, 0);
  
  // resize
  can.width = w;
  can.height = h;
  ctx.drawImage(can2, 0, 0, can2.width, can2.height, 0, 0, w, h);
}
#can {
  border:1px solid red;
}
<button id='btnResize'>Size x 2</button><br/>
<canvas id="can" width="100" height="100"></canvas>

Upvotes: 0

Related Questions