CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
user3320657
user3320657

Reputation:

Canvas to Multiple Images

I've created a canvas of size 1240x3500.

I need to convert it to a pair of images., i.e., from (0,0) to (1240,1750) and from (0,1751) to (1240,3500).

Is is possible to achieve this using toDataURL() or is there any other function to establish this?

Upvotes: 0

Views: 48

Answers (1)

user1693593
user1693593

Reputation:

There is not such a method available out of the box. Good news is that it's quite simple to make:

  • create a new (off-screen) canvas the size of the region
  • clip-draw the part of the original image into the new canvas
  • call toDataURL() on the new canvas

One way:

function regionToUri(canvas, x, y, w, h) {

    var ncanvas = document.createElement('canvas'), // create new canvas
        ctx = ncanvas.getContext('2d');

    ncanvas.width = w;                              // set it to target size
    ncanvas.height = h;

    ctx.drawImage(canvas, x, y, w, h, 0, 0, w, h);  // use region draw

    return ncanvas.toDataURL();                     // return data-uri
}

Modify the return statement if you need another format than PNG (or better, supply a parameter for this as well).

var dataURI = regionToUri(originalCanvas, x, y, w, h);

Note: For this to work your original image must fulfill CORS requirements.

Upvotes: 1

Related Questions