Save multiple images in canvas JQuery

Question

Can we save the image in canvas. Like as shown in the JSFiddle.

I want to save the image in such a way the balloon should come over the image

$(document).ready(function() {
    var d_canvas = document.getElementById('canvas');
    var context = d_canvas.getContext('2d');
    var background = document.getElementById('background');
    var ballon = document.getElementById('ballon')
    context.drawImage(background, 0, 0);

    $('#ballon').draggable();

    $('#draw').click(function() {
        var $ballon = $('#ballon'),
            $canvas = $('#canvas');
        var ballon_x = $ballon.offset().left - $canvas.offset().left,
            ballon_y = $ballon.offset().top - $canvas.offset().top;

        context.drawImage(ballon, ballon_x, ballon_y);

        $ballon.hide();
        $(this).attr('disabled', 'disabled');
    });
});

adeneo · Accepted Answer · 2013-11-14 23:48:44Z

3

There are generally two ways to get an image from a canvas:

using getImageData() to get the rgba value for every pixel for a given rectangle of the canvas.
using toDataURL() to get a Base64 string of the entire canvas.

The second method is probably most useful, and combined with some HTML5 magic, and the download attribute, we can create a downloadable image or send the string to the server and save it as an image :

var base64 = d_canvas.toDataURL("image/png");

var a = document.createElement('a');

a.href        = base64,
a.target      = '_blank';
a.download    = 'myImage.png';

document.body.appendChild(a);
a.click();

If you need the baloon to be in a specific place, moving that should be trivial.

Here's a

FIDDLE

Note that I had to remove the external images and use base64 to avoid cross-origin images in the canvas.

edited Nov 14, 2013 at 23:48

answered Nov 14, 2013 at 23:42

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rlemon Over a year ago

Imgur has cors enabled afaik

adeneo Over a year ago

@rlemon - they probably do, but I got the "canvas tainted by cross-origin ... " error in my console, so I just replaced the images with Base64 for the fiddle ?

Imad Alazani Over a year ago

+1 in canvas, can we allow to move balloon where ever we click inside the canvas only ?

adeneo Over a year ago

You can move the baloon where ever you like, this just saves whatever is in the canvas at the time, and I just conveniently choose to use the same button for saving. You can have another button, hook into a click event on the canvas, or whatever really.

Collectives™ on Stack Overflow

Save multiple images in canvas JQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related