2

PHP / Javascript/JQueryを使用するインタラクティブなWebサイトに取り組んでいます。ページ上で、訪問者にマウスで画像を移動および/または回転させて、新しい構図（次の図のように）を作成し、結果をJPGとして保存することを提案したいと思います…</ p>

画像をdivに移動および回転

…でも、どうすればいいのかわからない…手伝ってくれませんか？

どうもありがとう。

4

3 に答える 3

2

単純なものについては、CanvasではなくSVGを使用します。

Raphaelは、SVGの優れたライブラリの1つです。

このような単純なことを実行できるCanvasライブラリは、FabricJSとKineticJSです。

通常、私はライブラリを推奨しませんが、それがアプリが行うすべてのことである場合、それはあなたに多くの時間を節約するでしょう。

于 2012-04-24T03:01:19.423 に答える
0

ですから、これは本当に難しいことです。

Canvasを使用している場合は、小さなサーバーサイドスクリプトを使用してPNGにエクスポートできます。

このようなことをした人は他にもいます。LucidChartはDOM要素を使用して物を移動し、Canvasで描画します。彼らがどのようにエクスポートするのかわかりません。

全体にCanvasを使用する場合の方法について少し説明します。

PHP側：

// requires php5
define('UPLOAD_DIR', 'images/');
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';

JS側（jQueryを使用）：

var c  = document.getElementById("yourCanvas");
var png = canvas.toDataURL();
$.post("postimg.php", {img: png}, function() {
    console.log("saved your thing");
});

私は昨年これについてブログ投稿を書きましたが、PHP側のみが含まれていました。

http://j-query.blogspot.com/2011/02/save-base64-encoded-canvas-image-to-png.html

于 2012-04-24T03:14:31.733 に答える
0

もう 1 つの可能性は、svg-editプロジェクトを利用することです。基本的な変換だけが必要な場合は、必要に応じて微調整することもできます。

于 2012-04-24T08:44:55.383 に答える