從畫布創建圖像

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);