CSS mask-imageプロパティマスクレイヤーをかけてその形に合わせてborderを付ける事は不可能でしょうか

上記URLのように元の画像に重ねるマスクレイヤーを使ってます
そこにborderを付けると元の画像にborderを付けたのと同じ状況になります
マスクレイヤーの形に合わせてborderを付ける事は不可能でしょうか？

<style>
img.prefix_sample1 {
mask-image: url('heart.png');
-webkit-mask-image: url('heart.png');
border: thick double #32a1ce;
}
</style>

<img class="prefix_sample1" src="image.png">

行動規範の内容に同意します

回答1件

結論から言うと不可能です。
画像加工ライブラリ等を使用して画像自体を編集するか、canvasに描画すればできるかもしれません。
（双方とも私は具体的な方法を知りません）

cssのfilterのdrop-shadowを使用して擬似的な線をつくることは可能です。

html
1<div class='psuedo-border'>
2  <img class="prefix_sample1" src="https://picsum.photos/id/237/1200/1200">
3</div>

css
1 img.prefix_sample1 {
2   -webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1200px-Heart_coraz%C3%B3n.svg.png');
3 }
4
5 .psuedo-border {
6   -webkit-filter:
7     drop-shadow(0px 0px 1px #32a1ce)
8     drop-shadow(0px 0px 1px #32a1ce)
9     drop-shadow(0px 0px 1px #32a1ce)
10     drop-shadow(0px 0px 1px #32a1ce)
11     drop-shadow(0px 0px 1px #fff)
12     drop-shadow(0px 0px 1px #fff)
13     drop-shadow(0px 0px 1px #fff)
14     drop-shadow(0px 0px 1px #fff)
15     drop-shadow(0px 0px 1px #32a1ce)
16     drop-shadow(0px 0px 1px #32a1ce)
17     drop-shadow(0px 0px 1px #32a1ce)
18     drop-shadow(0px 0px 1px #32a1ce)
19 }