Créer une image sur une toile

Question

J'ai regardé sur le web et je n'avais pas de réponse à ma tâche spécifique. Ce que je veux accomplir est d'avoir une toile avec du contenu comme des images et des champs de texte. Un fabricant de bannière. Bien que j'ai réussi à créer une image à partir d'une toile avec un arrière-plan, le fichier enregistré n'a pas de contenu, seul un champ de 300x300 avec alpha. J'ai examiné la valeur de l'ARNm et il a toujours les mêmes valeurs, ce qui signifie qu'il enregistre des données brutes et constantes. J'aimerais savoir comment cela fonctionne aussi.

Voici mon code sur la façon dont je l'ai fait:

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 (j'utilise 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

Vous avez juste oublié de drawImage.

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