3Dパースペクティブとラップエフェクト（here）を使用してアップロードした画像をレンダリングできるようなものを探しています。印刷3Dパースペクティブプレビューキャンバスラップ
これは、現在、私はReflex.jsを使用して3Dの視点を達成することができましたが、同様にラッピング効果でより多くの微妙な解決策を探して、そのようなjCrop
としてjQueryライブラリを使用してトリミングプレビューの形式になります。
すべてのヘルプは理解されるであろう:)事前に
感謝を！
IE9サポートの要件は、基本的にはクライアントサイドにしておきたい場合にキャンバスアプローチを要求します。もちろん、レンダリングサーバーサイドとAJAXをレンダリングして、すべてのブラウザで動作するレンダーしたイメージを読み込むことができます。
IEのバージョンを10未満にすることができると決めた場合（または、変換せずに通常の写真を表示するだけであれば、CSS 3D変換とCSS2クリップを組み合わせてラップアラウンド効果を実現できます）以下のような：
<!DOCTYPE html>
<style>
body { margin: 100px; position: relative; }
.edge { width: 20px; height: 196px; background-size: auto 100%; position: absolute; left: 30px; top: 2px; transform: perspective(600px) rotateY(-45deg); transform-origin: right; }
.panel { position: absolute; left: 31px; top: 0; clip: rect(auto,auto,auto,20px); }
.panel>img { width: 350px; height: 200px; transform: perspective(600px) rotateY(30deg); transform-origin: left; }
</style>
<div class="edge" style="background-image: url(my_image.jpg)"></div>
<div class="panel"><img src="my_image.jpg" /></div>
それを打破するために、我々は、ユーザーの画像をロードした、背景として設定されたのと同じイメージでdivとともに、ページにそれを落としdivが薄く幅になるように設定されていること。主画像とほぼ同じ高さになります。background-sizeプロパティを使用すると、背もたれが高くても背景画像がdivに収まるようにできます。
次に、それらの2つが絶対に隣り合わせになるように配置します。 CSS2 clipプロパティは画像の左の20ピクセルを切り取ることができるので、この時点でdivとimgは1つの画像のように見えます。
最後に、ブロックごとにperspectiveとtransform-originを設定し、それらをY軸を中心にして互いに反対に回転させます。クリップのために、.edgeブロックを元々のサイズよりわずかに小さくする必要があります（200ピクセルの高さの画像で、見栄えを良くするためには196ピクセルにしなければなりませんでした）が、かなりうまく動作します。
明らかに、ベンダープレフィックス（-moz-、-ms-、-o-、-webkit）を記入する必要があり、私は読者のための練習として影を残しています。コンテナはおそらく行うだろう）。
どのブラウザをサポートする必要がありますか？これまでのところ、あなたのアプローチはすべて一緒にインターネットエクスプローラをロックアウトします。 – Fresheyeball
これはすべてのGrade Aブラウザを少なくともサポートするはずです。 Firefox、Chrome、IE 9の最新バージョン –
キャンバスタグでやってみることをおすすめします。そのことはたくさんの仕事になるだろうし、プラグインを一切入れたくないという衝動に抵抗するだろう。 – Fresheyeball