Below is a sample code that you should be able to run in a browser. It should first load the image. After the image is shown, you can click on it to see the difference between the original image and image with an identitdy svg filter.
It might be hard to see on the browser directly, but you can download the result as image and open it in any image viewer. The result is not all black weirdly. It has blotchy regions that resemble some sort of compression artifact.
So my questions are:
- Does applying any svg filter incur quality loss?
- Why is it the case? (Maybe I missed it, but it wasn't mentioned in the documents)
- How can I achieve a lossless svg filter?
<body>
<canvas id='canvas' width=850 height=850></canvas>
<svg width="0" height="0" style="position:absolute;z-index:-1;">
<defs>
<filter id="identity" x="0" y="0" width="100%" height="100%">
<feComponentTransfer></feComponentTransfer>
</filter>
</defs>
</svg>
</body>
<script>
canvas = document.getElementById('canvas')
image = new Image()
image.src = 'https://cms-assets.tutsplus.com/uploads/users/127/posts/31341/final_image/1_10.png'
image.onload = function() {
let ctx = canvas.getContext('2d')
ctx.drawImage(this, 0, 0)
canvas.image = this
}
canvas.onclick = function() {
let ctx = this.getContext('2d')
ctx.clearRect(0, 0, this.width, this.height)
ctx.filter = 'none'
ctx.drawImage(this.image, 0, 0)
ctx.globalCompositeOperation = 'difference'
ctx.filter = 'url(#identity)'
ctx.drawImage(this.image, 0, 0)
// 20x the difference
ctx.filter = 'brightness(20)'
ctx.drawImage(canvas, 0, 0)
}
</script>