8

キャンバスから抽出して ajax 経由で投稿する画像をアップロードしようとしていますが、サーバー側で画像ファイルを作成するのに問題があります。

私はこの答えに従っています: https://stackoverflow.com/a/7347358/1358670しかし、それでもあちこちで何かを見逃しているようです。

これが私のjavascript（ブラウザ）コードです：

var img = myCanvas.toDataURL("image/jpeg");

// ajax request to send the image

サーバー側では、次のことを行います。

var fd =  fs.openSync('./img.jpeg', 'w');
req.body.image = req.body.image.replace(/^data:image\/\w+;base64,/, "");
console.log( req.body.image );

var buff = new Buffer(req.body.image, 'base64');
fs.write(fd, buff, 0, buff.length, 0, function(err,written){
    console.log( ">> "+ err );
    fs.closeSync( fd );
});

ご覧のとおり、画像が正しく送信されたかどうかを確認するために画像をログに記録しましたが、それでも作成されたimg.jpegファイルを開くことができません。

ヘルプやヒントは大歓迎です。

編集

ここでも解決策を試しました: https://stackoverflow.com/a/6933413/1358670しかし、私はまだ同じ問題を抱えています

編集：2

サーバー側で PHP スクリプトを使用してフロントエンド側をテストしましたが、生成された画像は非常に優れていたので、問題は NodeJS コードにあると結論付けます。

4

1 に答える 1

4

問題はNodeJSでの扱いにあり、コードはどこでも同じで、人々が彼らのために働いたとコメントしていたので、何も変わらなかったのでプロセスを疑いませんでしたが、何かが間違っていました.

PHP スクリプトで確認すると、NodeJS コードにないステップが見つかりました。これが PHP コードです。

$img = $_POST[ 'image' ];

$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);

$data = base64_decode($img);
$file = "./". uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';

違いは次のとおりです。str_replace(' ', '+', $img);

他の人がどのように機能したかはわかりませんが、base64 のすべてのスペースを + に置き換えると問題が解決しました。

新しい NodeJS コード

req.body.image = req.body.image.replace(/^data:image\/\w+;base64,/, "");
req.body.image = req.body.image.replace(/ /g, '+');
console.log( req.body.image );

var buff = new Buffer(req.body.image, 'base64');
fs.write(fd, buff, 0, buff.length, 0, function(err,written){
    console.log( ">> "+ err );
    fs.closeSync( fd );
});

これが他の誰かに役立つことを願っています

コードのより良いバージョン:

req.body.image = req.body.image.replace(/^data:image\/jpeg+;base64,/, "");
req.body.image = req.body.image.replace(/ /g, '+');

fs.writeFile('./records/'+model+'/out.jpeg', req.body.image, 'base64', function(err) {
    console.log(err);
});
于 2014-03-27T17:51:30.243 に答える