私はユーザーが画像をトリミングし、その画像の枠線を選択できるようにするアプリを開発しています。 私が知りたいのは、境界線スタイルの画像を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の答えに基づいて、私は切り取った画像で新しいキャンバスを作成し、パターンの枠線を追加しました。私のニーズにお応えしました。
確実に可能です。ボーダーとイメージをキャンバスに描画することができます(ボーダーのサイズを考慮してキャンバスコンテキストを作成する必要があるかもしれません)。そして同様のアプローチでCropitを使って書き出します。返信ありがとうございます。 – Dan
私の主な問題は、クロップされたイメージにcss border-imageを追加し、すべてをbase64にエクスポートしたいということです。私はキャンバスに単純なボーダーを追加することができますが、私はボーダーとしてより複雑なイメージパターンを追加したいと思います。どのように私はそれを達成するだろうか?私は私の質問を更新しました。 – Ricky
CSSでこれを行うことは何の意味もありません。 CSSスタイルをエミュレートする必要があります(DOM要素やスタイルからビットマップを直接取り除くことはできないため)。キャンバスにそのまま転送してください。 CSSを使って大きな円を描いています。 – K3N