从画布创建图像答案

【问题标题】：Create Image from a Canvas从画布创建图像
【发布时间】：2014-07-01 03:59:10
【问题描述】：

我一直在网上寻找，但对我的具体任务没有任何答案。我想要完成的是拥有一个包含图像和文本字段等内容的画布。横幅制造商。虽然我已经设法从带有背景的画布创建图像，但保存的文件没有内容，只有一个 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(); 
    }
?>

【问题讨论】：

标签： javascript php html image canvas

【解决方案1】：

你只是忘了drawImage。

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

【讨论】：