DM-10369: client side mask color change #364
Conversation
- Processing image on the client side to set mask color - Add image processing framework that can be used in future of colobar changing - Processed images can be added to store as data png - include new functons in WebUtil: loadImage and requestIdleFrame - small clean up of PlotViewUtil
| var num = parseInt(color, 16); | ||
| return [num >> 16, num >> 8 & 255, num & 255]; | ||
| const num = parseInt(color[0]==='#' ? color.substr(1) : color, 16); | ||
| return [num >> 16, num >> 8 & 255, num & 255]; | ||
| } | ||
|
|
There was a problem hiding this comment.
you may also call function getRGBA() in Color.js which handles the color string like '#...', 'rgb(...)', 'rgba(...)' or a pure color name.
There was a problem hiding this comment.
ok, I will use that.
| const {data}= imageData; | ||
| const len= data.length; | ||
| for(let i= 0; i<len; i+=4) { | ||
| if (data[i] || data[i+1] || data[i+2]) { |
There was a problem hiding this comment.
Does this mean if data[i], data[i+1] and data[i+2] are all zero, then the condition for 'if' is 'false'?
There was a problem hiding this comment.
Thanks for making me really think about this. You found a bug, if the user every turns it black then the mask gets stuck at that color.
It should be
if (data[i] || data[i+1] || data[i+2] || data[i+3]) {
However, now that I think about it, in the mask case the only element in the array that matters for detecting if I need to set the color is data[i+3] so I can optimize it to
if (data[i+3]) {
In the array data[i], data[i+1], data[i+2] is a RGB and data[i+3] is opacity. The images from the server set all 4 to zero because we want full transparency (no mask bit) and data[i+3] to 255 if there is a mask bit. So I can just look at the opacity index in the if, which should be more efficient. The image arrays are big so efficiency matters.
Thank you!
|
Review completes. The mask color change works well. |
Changes:
WebUtil.js:loadImageandrequestIdleFrameCode to pay attention to:
ImageViewerLayout.jsx- small changes but it definea function that modifies imageImageRender.jsx- Image drawing react component - mostly wrapper around CanvasTileDrawerImageProcessor.js- image retrieval and processing frameworkCanvasTileDrawer.js- Does the actually canvas rendering and managing cached imagesTo Test