從畫布創建圖像

我一直在網上尋找，並沒有回答我的具體任務。我想要完成的是有一個像圖像和文本字段內容的畫布。一個橫幅製造商。儘管我已經設法從具有背景的畫布創建圖像，但保存的文件沒有內容，只有一個帶有alpha的300x300的字段。我研究了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(); 
    } 
?>

來源

2014-06-30 Adrián

你只是忘了的drawImage。

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

來源

2014-06-30 19:59:10 Lewis

從畫布創建圖像

回答

相關問題