2017-03-09 17 views
-1

私はユーザーが画像をトリミングし、その画像の枠線を選択できるようにするアプリを開発しています。 私が知りたいのは、境界線スタイルの画像をJavascript経由でbase64に変換できるかどうかです。画像をBase64に変換するボーダー画像のスタイルを含む

var img = new Image(); 
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; 
var pat = canvasContext.createPattern(img,"repeat"); 
canvasContext.strokeStyle = pat; 
canvasContext.lineWidth = 5; 
canvasContext.strokeRect(-(this.rotatedOffset.x * exportZoom), -(this.rotatedOffset.y * exportZoom), canvas.width, canvas.height); 

上記のコードは、キャンバスに黒の境界線を追加するだけです。

ここで私がしたいのは、画像/パターンをキャンバスの境界線として追加することです。

UPDATE:@ K3Nの答えに基づいて、私は切り取った画像で新しいキャンバスを作成し、パターンの枠線を追加しました。私のニーズにお応えしました。

+0

確実に可能です。ボーダーとイメージをキャンバスに描画することができます(ボーダーのサイズを考慮してキャンバスコンテキストを作成する必要があるかもしれません)。そして同様のアプローチでCropitを使って書き出します。返信ありがとうございます。 – Dan

+0

私の主な問題は、クロップされたイメージにcss border-imageを追加し、すべてをbase64にエクスポートしたいということです。私はキャンバスに単純なボーダーを追加することができますが、私はボーダーとしてより複雑なイメージパターンを追加したいと思います。どのように私はそれを達成するだろうか?私は私の質問を更新しました。 – Ricky

+0

CSSでこれを行うことは何の意味もありません。 CSSスタイルをエミュレートする必要があります(DOM要素やスタイルからビットマップを直接取り除くことはできないため)。キャンバスにそのまま転送してください。 CSSを使って大きな円を描いています。 – K3N

答えて

1

私はキャンバスに直接これを行うことをお勧めします。 DOM + CSSはキャンバスで描画するためのビットマップとして簡単に転送できないので、CSSスタイルをシミュレートする代わりにキャンバスに直接描画してキャンバス上で描画することもできます。

キャンバスにパターンを使用できますが、イメージが読み込まれるまで待つことが重要です。イメージの読み込みは非同期で、呼び出し時にcreatePattern()イメージがロードされてデコードされず、空のパターンが作成されることがあります。

var img = new Image(), pat; 
img.onload = function() {       // wait for image to load 
    pat = canvasContext.createPattern(this, "repeat"); // image is ready (here "this") 
    canvasContext.strokeStyle = pat; 
    canvasContext.lineWidth = 5; 
    canvasContext.strokeRect(-(this.rotatedOffset.x * exportZoom), -(this.rotatedOffset.y * exportZoom), canvas.width, canvas.height);  
    // next step (if any) from here ... 
}; 
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; 

もちろん、これは境界線が適用される前にキャンバスに描画される画像に適用されます。このため、キャンバスに必要なすべてのイメージを事前にロードして、正しい描画順序を確保することをお勧めします。

+0

ありがとう@ K3N、その作業:)私が気付いたのは、画像が境界の幅に比例していないということです。これを行う方法はありますか?言い換えると、queパターンの画像を境界幅に合わせるか?例:http://imgur.com/sV35utX – Ricky

+0

@Rickyの新しいブラウザは、パターンオブジェクトのsetTransformをサポートしています。それを適用する前にパターンをスケーリングしてください。あなたは 'var f = dstWidth/img.width;を試すことができます。 pat.setTransform(f、0,0、f、0,0); '(必要ならばyに対して)ブラウザがサポートしていない場合は、オフスクリーンキャンバスを目的のパターンサイズで作成し、スケーリングしてイメージを描画し、そのキャンバスをパターンソースとして使用する必要があります。 – K3N

+0

setTransform()関数を使用しようとしましたが、次のエラーが表示されます。.setTransformは関数ではありません(Chromeでテストしています)。いずれにしても、私の主な問題を解決するので、答えを正しいものとしてマークしました:) – Ricky

1

Croppieを試してみてください。これは結果としてクロップされた画像base64を提供するjQueryプラグインです。

https://foliotek.github.io/Croppie/

私は今、非jqueryのバージョンを持っていないが、Croppieはまともです。

enter image description here

+0

返事をありがとう。私はこのプラグインを試しましたが、AngularJSで正しく機能するようにはできませんでしたので、私はCropitと一緒に行きました。それにもかかわらず、私の問題は、画像クロッピングプラグインではなく、どのようにCSSのボーダー画像スタイルで画像をbase64に変換するかです。私の質問を更新しました。 – Ricky

+1

@ricky - それを聞いて申し訳ありませんが、ファイルをcroppieにバインドするのはちょっと面倒ですが、 'ng-1.4.x'の' ngcroppie'ディレクティブがあることを知っています –

+0

私はそのディレクティブを試しましたが、バージョン1.6.xにはいくつか問題があるようです。私は将来のプロジェクトのためのモジュールを詳しく見ていきます:) – Ricky

関連する問題