0

私のフレンは、フェイスケーキベーカリーのために彼のためにウェブサイトを開発することを望んでいます。ユーザーがケーキを注文し、ケーキに印刷する写真を送信できるように、ユーザーにフォームを提供することになっています。次に、ユーザーが送信した画像でケーキがどのように見えるかのプレビューを表示する動的画像処理システムを作成する必要があります。 ..そうするようにいくつかのライブラリを提案できれば非常に役に立ちます。

4

2 に答える 2

1

次の 2 つのことをしようとしているようです。

  1. ユーザーが選択した写真をクライアント側で表示します (サーバーに送られる前に)。
  2. そのイメージを変換して、ケーキの正しい位置に表示されるようにします。

これらの機能は両方とも、伝統的にバックエンド処理の領域に分類されますが、HTML5 および CSS3 ドラフト標準のおかげで、少なくとも Chrome と Firefox で利用できます。以下の解決策は普遍的なものではなく、サポートされていないブラウザーのサーバー ベースの解決策にフォールバックする必要がありますが、言及する価値があります。

ユーザーが選択した画像を表示する

ユーザーが からファイルを選択すると、イベント<input type=file>が送出されます。changeこれが発生した場合、DOM オブジェクトには、これらのファイルの内容を読み取ることができる というFileListプロパティがあります。ファイルを画像ソースに使用できる URL に変換できます。filesURL.createObjectURL

input.addEventListener('change', function () {
    preview.src = URL.createObjectURL(this.files[0]);
});

preview.addEventListener('load', function () {
    URL.revokeObjectURL(this.src);
});

デモについては、 http://jsfiddle.net/bnickel/yP7Bb/を参照してください。

ケーキトップ風に変身

CSS3 3d 変換を使用すると、サーフェスを 3D に見えるように変換できます。私は実験して、次のことが非常に説得力があることを発見しました。0.7 は垂直方向に圧縮し、-0.008 は遠近感を追加するための回転です。

-webkit-transform: matrix3d(1,     0,     0,     0,
                            0,     0.7,   0,    -0.008,
                            0,     0,     1,     0,
                            0,     0,     0,     1);

        transform: matrix3d(1,     0,     0,     0,
                            0,     0.7,   0,    -0.008,
                            0,     0,     1,     0,
                            0,     0,     0,     1);

        transform: matrix3d(1,     0,     0,     0,
                            0,     0.7,   0,    -0.008,
                            0,     0,     1,     0,
                            0,     0,     0,     1);

ここで値を操作できます: http://jsfiddle.net/bnickel/v9Jat/

于 2012-07-08T14:41:35.920 に答える
0

絶対配置と 3d 変換 css、オーバーフローを背景なしで非表示にした境界半径円、丸いケーキの子要素としての画像を使用できます。

それはそれについてです。

于 2012-07-08T07:06:47.463 に答える