✨ [Amp story desktop one panel] [background blur] Do not blur transparent images #35525
Conversation
|
Hey @gmajoulet, @newmuis! These files were changed: |
| isTransparentGifOrPng_(mediaEl) { | ||
| if (!this.isGifOrPng_(mediaEl)) { | ||
| return false; | ||
| } | ||
| const imgEl = mediaEl.querySelector('img'); | ||
| const canvas = this.win_.document.createElement('canvas'); | ||
| canvas.width = canvas.height = CANVAS_SIZE; | ||
| const context = canvas.getContext('2d'); | ||
| context.drawImage(imgEl, 0, 0, CANVAS_SIZE, CANVAS_SIZE); | ||
| const imgData = context.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE).data; | ||
| // Image data pixel values are in sets of 4: r, g, b, a. | ||
| // For this reason we increment in 4. | ||
| for (let i = 0; i < imgData.length; i += 4) { | ||
| const pixelAlphaVal = imgData[i + 3]; | ||
| if (pixelAlphaVal < 255) { | ||
| return true; | ||
| } | ||
| } | ||
| return false; | ||
| } |
There was a problem hiding this comment.
Just curious, how long does this take to run on a lower range Android and older iPhone, with a 1mB+ image?
How much faster does it get if we change the algorithm to, say, increase i by 16 or 32 instead of 4 with each loop? Any other idea to make this faster, if it is not already?
There was a problem hiding this comment.
Just curious, how long does this take to run on a lower range Android and older iPhone, with a 1mB+ image?
Loading the image costs more than this operation. As I understand, once the image is loaded into memory we can draw it to the 3x3 canvas for free.
How much faster does it get if we change the algorithm to, say, increase i by 16 or 32 instead of 4 with each loop? Any other idea to make this faster, if it is not already?
It would break if weincrease i by 16 or 32because there would be no data. We're only reading 9 pixels!
As far as I know this is taking advantage of the img data already loaded in memory and only reading the minimum number of pixels needed. It's as optimized as I can currently imagine.
|
Cool PR, I learned a lot : )) |
Co-authored-by: Gabriel Majoulet <gmajoulet@google.com>
Co-authored-by: Gabriel Majoulet <gmajoulet@google.com>
If media is png or gif, check if it's transparent.
If it is transparent, try again with the next largest media element on the page.
Aug-04-2021.14-39-13.mp4
Fixes #35441