2

ユーザーがアップロードした画像をカーブさせて、ユーザーが新しい画像を保存できるようにするサイトを作成しようとしています。下のリンクに示すように、画像を湾曲させる方法を理解するのに問題があります。Canvasでは曲線形状を単色で作成できますが、画像では作成できません。

http://i53.tinypic.com/2gule04.jpg

4

2 に答える 2

4

私はこのようなものを試しました。

ここに画像の説明を入力

幅 300、高さ 227 のソース画像があります。この画像を 15 ピクセル下に曲げます。したがって、同じ幅と高さ = imageWidth + 15 px のキャンバスを作成します。すなわち。227+15 = 242。

HTML:

<img id="source" src="rhino.jpg">
<canvas id="canvas" width="300" height="242" ></canvas>

Javascript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('source');

var x1 = img.width / 2;
var x2 = img.width;
var y1 = 15; // curve depth
var y2 = 0;

var eb = (y2*x1*x1 - y1*x2*x2) / (x2*x1*x1 - x1*x2*x2);
var ea = (y1 - eb*x1) / (x1*x1);

// variable used for the loop
var currentYOffset;

for(var x = 0; x < img.width; x++) {

    // calculate the current offset
    currentYOffset = (ea * x * x) + eb * x;

    ctx.drawImage(img,x,0,1,img.height,x,currentYOffset,1,img.height);
}
于 2015-03-18T09:33:33.593 に答える
0

これを行う簡単な方法はありません。Canvas のピクセル単位の API を使用して、変換を自分でコーディングする必要がある場合があります。http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/を参照してください。

純粋なピクセル ベースのソリューションの代わりに、メッシュ ベースのソリューションを試すことができます。ソース イメージを小さなチャンクに分割して、ターゲット シェイプにマップします。次に、テクスチャ マッピングを使用して詳細を埋めます。HTML5 Canvas を使用した画像操作とテクスチャ マッピングを参照してください。マッピングアルゴリズム用。ここで別のアルゴリズムを見つけることができます。ただし、マッピング座標を把握する必要があります。

于 2011-08-31T04:50:35.840 に答える