从画布创建图像

Question

我一直在网上浏览，对我的特定任务没有任何答案。 我要完成的工作是创建一个画布，其中包含图像和文本字段。 标语制作者。 尽管我设法从具有背景的画布上创建图像，但是保存的文件没有内容，只有300x300的带有alpha的字段。 我研究过mRNA的值，它始终具有相同的值，这意味着它正在保存一些原始数据和恒定数据。 我想知道它是如何工作的。

这是我如何执行此操作的代码：

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（我正在使用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

您只是忘记了drawImage。

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