キャンバスをデコードするtodataURL

Question

キャンバスのtodataurl（）メソッドで作成したデータを使用するのが難しいです。現在、私のコードは結果データをphpサーバに送ります。このサーバはfile_put_contents（）メソッドを使ってそのデータを格納するファイルを作成します。今私は切り取って、ファイルからイメージのタグsrcにそれはうまく動作し、適切に表示されるので、私はこれまでのすべてがpeachyと仮定ファイルにぎこちない。

しかし、JSでコードを使用しようとすると問題が発生します。私はPHPのbase64_decodeメソッドを試してきましたが、引き続きファイルが壊れていました。このコードを見つけました：

<?php 
    $encodedData = str_replace(' ','+',$encodedData); 
    $decocedData = base64_decode($encodedData); 

まだ破損しているファイルがあります。理想的には、.pngファイルを作成したいのですが、私はJSでデータファイルを再度処理するだけです。どんな助けでも大歓迎です。

Answer 1

toDataURL()機能によって画像データの前に付加されているヘッダーを取り除かなければならないようです。このサーバー側の使用に

.. 
var data=canvas.toDataURL(); 
var output=data.replace(/^data:image\/(png|jpg);base64,/, ""); 
// now send "output" to the server 
.. 

：Javaスクリプトで

<?php 
    $decocedData = base64_decode($encodedData); 
?> 

Answer 2

はcanvas.toDataURL（からの結果を送信する）これらのブラウザ上のクライアント側で 次のようなヘッダを取り除くことができますこのメソッドをデフォルトの型 "image/png"でサポートするよりも、 PNGファイルを作成する

var imageInfo = canvas.toDataURL(); 
// now send "imageInfo" to the server 

直接的な方法：

<?php 
$imageInfo = imageInfoFromBrowser(); // Your method to get the data 
$image = fopen($imageInfo, 'r'); 
file_put_contents("fileName.png", $image); 
fclose($image); 
?> 

を私はPHP 5.3/Windowsでこの作業を持って、他のバージョンのために、確認してください。

PHPでテストするための画像データサンプル。

$imageInfo = "data:image/png;base64,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" 

Answer 3

もう1つ重要なことは、ブランクをplussに変換する必要があることです。そうしない場合は、復号化されたデータが破損している：

$encodedData = str_replace(' ','+',$encodedData); 
$decocedData = base64_decode($encodedData); 

あなたはより多くを読むことができるのhttp://www.php.net/manual/en/function.base64-decode.php

Answer 4

他のソリューションは私のために動作しませんでした。

これは動作します：

//image sample 
$baseFromJavascript = "data:image/png;base64,BBBFBfj42Pj4"; 

// remove the part that we don't need from the provided image and decode it 
$data = base64_decode(preg_replace('#^data:image/\w+;base64,#i', '', $baseFromJavascript));