html - 透明部分のある PNG 画像の CSS ボーダー

Question

私が持っているPNG画像に境界線を追加しようとしています（例が含まれています）。問題は、現在境界線を追加すると、正確なベクトルではなく、すべての画像の周りのボックス形状に追加されることです(つまり、画像に透明な部分が含まれます)。

透明な領域を考慮しない境界線の構成を設定する方法はありますか。(CSSでなくても...多分HTML5/JS？)

Answer 1

これを自分で行う必要があることに気づきました-このハックを思いつきました。互いにわずかにずれている、元の画像の背後にある一連のオーバーレイ画像。コンテキスト ctx3 は元の画像のコピーであり、これにより元の画像の背後にある白いシルエットが数回複製されます。

      ctx3.shadowColor = "rgba(255,255,255,1)";
      ctx3.globalCompositeOperation = 'source-over';
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 0;
      ctx3.shadowOffsetY = 2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 0;
      ctx3.shadowOffsetY = -2;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = 2;
      ctx3.shadowOffsetY = 0;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);
      ctx3.shadowOffsetX = -2;
      ctx3.shadowOffsetY = 0;
      ctx3.shadowBlur = 0;
      ctx3.drawImage(YourImageSource,0,0);