画布到多个图像

Question

I've created a canvas of size 1240x3500 .

I need to convert it to a pair of images., ie, 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?

Answer 1

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.