0

(base64 エンコーディングから) 描画された画像を角の丸いキャンバスに保存する必要があります。キャンバスは以下を使用して定義されます。

<canvas id="thumbnailImage" width="86" height="86" style="border:1px solid #d3d3d3;border-radius:10px;">

イメージは期待どおりに表示され (ctx.drawImage などを使用)、角が丸くなっています。次に、丸みを帯びた画像の base64 エンコード データを取得します。

        var imageData = $(jImageId)[0].toDataURL("image/jpeg",qly);

残念ながら、角の丸いキャンバスなしで画像を表示すると、角がまだ残っています...

質問: キャンバスに表示される base64 画像データを取得する簡単な方法はありますか?それとも、苦痛なピクセル クリッピングの試練を経験する必要がありますか?

ありがとう ！

4

1 に答える 1

1

境界線の半径は、キャンバス内の画像データではなく、HTML のスタイリングであるように思われるため、角を消して丸みを帯びた画像を取得する必要があります。

検索した後、私はこれらの 投稿を見つけました。これは、単に再角化するのではなく、形状を消去する方法を教えてくれました。

JSFiddle (ただし、COR の制限により、最終的なエクスポート部分では機能しません)

ctx.drawImage(src,0,0);
ctx.save();
ctx.globalCompositeOperation="destination-out";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(10,0);
ctx.arcTo(0,0,0,10,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(100,0);
ctx.lineTo(90,0);
ctx.arcTo(100,0,100,10,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(0,100);
ctx.lineTo(0,90);
ctx.arcTo(0,100,10,100,10);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(90,100);
ctx.arcTo(100,100,100,90,10);
ctx.closePath();
ctx.fill();
ctx.restore();
des.src=can.toDataURL("image/png");

丸みを帯びた角の半径が既にわかっているという事実に基づいてください。

私のローカルホストでの結果のスクリーンショットは次のとおりです。

ローカルホストの結果

于 2013-09-06T12:06:12.280 に答える