Create Image from a Canvas

Question

I've been looking in the web and had no answer to my specific task. What I want to accomplish is having a canvas with content like images and text fields. A banner maker. Although I have managed to create an image from a canvas with a background, the file saved has no content, only a field of 300x300 with alpha. I've looked into the value of mRNA and it always has the same values meaning it's saving some raw and constant data. I'd like to know how that works as well.

Here's my code on how I did this:

HTML:

<form class="" enctype="multipart/form-data" action="/gears/imageuploader.php" method="post">
<input type="image" id="mRNA" name="mRNA" title="Save Banner"/>
<label>Image Name: </label>
<input type="text" name="name" />
</form>

CSS:

#canvas {
    min-width: 100%;
    background: red;
}

JavaScript (I'm using Mootools):

document.addEvent('domready', function(){
    var canvas = $('canvas');
    var rna = $('mRNA');
    var save = $('save');
    var button = $('submit');

    var context = canvas.getContext('2d');
    rna.value = canvas.toDataURL("image/png");


    rna.addEvent('click', function(){
        context = canvas.getContext('2d');
        rna.value = canvas.toDataURL('image/png');
    });
});

PHP:

<?php
    error_reporting(E_ALL);
    ini_set('display_errors','On');

    $dir = "../uploadedimages/";

    $mRNA = $_POST['mRNA'];
    $name = $_POST['name'];
    $extention = ".png";
    $mRNA = str_replace('data:image/png;base64,', '', $mRNA);
    $mRNA = str_replace(' ', '+', $mRNA);
    $DNA = base64_decode($mRNA);
    $organism = $dir.$name.$extention;

    if(file_put_contents($organism, $DNA)){
        include('../gears/redirect.php');
        redirect(); 
    }
?>

Answer 1

You just forgot to drawImage.

var context = canvas.getContext('2d');
context.drawImage(yourImage, 0, 0, imageWidth, imageHeight);