I think how to make an image with an alpha channel from jpg without using canvas. such processing delays the readiness of the page each time and strongly depends on the performance of the user's iron. new property using alpha masks is also not acceptable not correctly displayed everywhere

from such a picture

enter image description here

need to get this

enter image description here

    2 answers 2

    If the triangle where alpha should be completely transparent, then you can cut off part of the picture with 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>

    • just what you need THANK YOU VERY MUCH - cache0

    slightly corrected to work

     <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>