сделать img с alpha из jpeg не на canvas

285

23 апреля 2017, 00:42

думаю как сделать изображение с альфа каналом из jpg без использования canvas т.к. такая обработка каждый раз задерживает готовность страницы и сильно зависит от производительности железа пользователя новое свойство с применением альфа масок тоже не приемлемо не везде правильно отображается

вот из такой картинки

нужно получить такую

Answer 1

Если треугольник где alpha должен быть полностью прозрачным, то можно отрезать часть картинки при помощи svg.

<svg with=322 height=322> 
  <clipPath id="clipTriangle"> 
    <polygon points="0 0,0 322,322 0"> 
    </polygon> 
  </clipPath> 
 
  <image clip-path="url(#clipTriangle)" xlink:href="https://i.stack.imgur.com/iG66c.jpg" x="0" y="0" height="322px" width="322px"/> 
 
</svg>

Answer 2

чуть чуть подправил чтоб работало

<svg id="_1" data-name="svg1" xmlns="http://www.w3.org/2000/svg" width=400 height=400>
<clipPath id="clipTriangle">
    <polygon points="0 0,0 400,400 0">
    </polygon>
</clipPath>
<image clip-path="url(#clipTriangle)" xlink:href="you_file.jpg" width="400" height="400" />
</svg>