Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Save canvas/image after css applied

I have a simple canvas with an image on it (image 500x333):

<canvas id="capEdit" width="500" height="333"></canvas>

I then apply a simply horizontal flip on the canvas/image using CSS, works perfectly

.flipH { 
    -moz-transform: scale(-1, 1); 
    -webkit-transform: scale(-1, 1); 
    -o-transform: scale(-1, 1); 
    transform: scale(-1, 1); 
    filter: 
    FlipH; 
}

I'm now trying to save the image on the canvas WITH its flipped state, but it only saves the original image, here's what I'm trying:

$(document).on("click", "#applyFlip", function() { // save
        var canvas  = document.getElementById("capEdit");
        var dataUrl = canvas.toDataURL();
        $.ajax({ 
            type: "POST", 
            url: '/ajax/saveFlip.php',
            dataType: 'text',
            data: {
                base64data : dataUrl,
                imgName : imgName
            }
        }); 
    });

QUESTIONS: Should this work? If so, why does this not? If it CAN'T even work like this, is there a way to achieve these results? Basically, horizontal & vertical flipping and rotating, then saving

like image 671
StudioTime Avatar asked Jun 10 '13 13:06

StudioTime


People also ask

How do I save a canvas image?

You can save a canvas to an image file by using the method canvas. toDataURL() , that returns the data URI for the canvas' image data. The method can take two optional parameters canvas.

How do I load an image into canvas in HTML?

Importing images into a canvas is basically a two step process: Get a reference to an HTMLImageElement object or to another canvas element as a source. It is also possible to use images by providing a URL. Draw the image on the canvas using the drawImage() function.


1 Answers

The issue here is that when you use CSS, you're not actually transforming the image except visually. You need to actually transform the canvas context of the image.

Here's a pretty good explanation: http://davidwalsh.name/convert-canvas-image

function convertImageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);

    return canvas;
}

Once you have the image drawn in Canvas using the getContext method, you can then apply transforms, rotates, translates, whatever using the canvas methods, not CSS. If you change it with CSS, you're only editing its appearance in the browser, you're not actually manipulating pixel data. You'd need to do something like this before actually drawing the image:

  // translate context to center of canvas
  context.translate(canvas.width / 2, canvas.height / 2);

  // rotate 180 degrees clockwise
  context.rotate(Math.PI);

It's a bit out of the scope of this question to explain how canvas works but look at the Canvas api for how exactly to transform your context. Once you have the image in the context, transforming the context should be easy enough :)

Once you get your canvas image to appear how you want it, you'll need to get a data URI from it (the new image) and pass that to your saveFlip.php function.

// Converts canvas to an image
function convertCanvasToImage(canvas) {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}
like image 176
imjared Avatar answered Oct 01 '22 21:10

imjared