画像をBase64に変換するボーダー画像のスタイルを含む

Question

私はユーザーが画像をトリミングし、その画像の枠線を選択できるようにするアプリを開発しています。 私が知りたいのは、境界線スタイルの画像をJavascript経由で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の答えに基づいて、私は切り取った画像で新しいキャンバスを作成し、パターンの枠線を追加しました。私のニーズにお応えしました。

Answer 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'; 

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

Answer 2

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

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

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