Tutorials‎ > ‎

Simple Photo Editor using HTML5

posted Dec 23, 2011, 2:36 AM by Sofia _   [ updated Aug 15, 2016, 11:36 PM by Surya Wang ]

This article is about how to create a memes. I am using canvas html5 and jquery.

The memes or image is able to rotate but when we normally rotate in canvas the position is different. So I make a function to keep the image is still at the same position even if rotate.
function drawImage(myContext,imgSrc, x, y, size, rotate) {
    var halfS = size / 2;
    var imageCursor = new Image();
    imageCursor.src = imgSrc;
    myContext.save();
    var tX = x - halfS;
    var tY = y - halfS;
    myContext.translate(tX, tY);
    myContext.rotate(Math.PI / 180 * rotate);
    var dX = 0, dY = 0;
    if (rotate == 0) { dX = 0; dY = 0; }
    else if (rotate > 0 && rotate < 90) { dX = 0; dY = -(size / (90 / rotate)); }
    else if (rotate == 90) { dX = 0; dY = -size; }
    else if (rotate > 90 && rotate < 180) { dX = -(size / (90 / (rotate - 90))); dY = -size; }
    else if (rotate == 180) { dX = dY = -size; }
    else if (rotate > 180 && rotate < 270) { dX = -size; dY = -size + (size / (90 / (rotate - 180))); }
    else if (rotate == 270) { dX = -size; dY = 0; }
    else if (rotate > 270 && rotate < 360) { dX = -size + (size / (90 / (rotate - 270))); dY = 0; }
    else if (rotate == 360) { dX = 0; dY = 0; }
    myContext.drawImage(imageCursor, dX, dY, size, size);
    myContext.restore();
}


Here is the simple way to save canvas data. Just using toDataURL function in canvas.
function saveImg() {
    var myCanvas = document.getElementById("myCanvas");
    draw();
    window.open(myCanvas.toDataURL("image/png"));
}


I am using color picker jquery plugin. Example :
$('#bgColor').ColorPicker({
    onSubmit: function(hsb, hex, rgb, el) {
        $(el).val(hex);
        $(el).ColorPickerHide();
        $('#colorBox').css({ 'background-color': '#' + hex });
        draw();
    },
    onBeforeShow: function() {
        $(this).ColorPickerSetColor(this.value);
    }
});


Here is the result 


ċ
MemesCreator.zip
(933k)
Sofia _,
Dec 23, 2011, 2:50 AM