Pixel-based color sampling for the Eyedropper tool

[Keavon]

Since there's no way to obtain the color of a pixel from a rendered web page, the Eyedropper tool currently just grabs the fill color of the shape that's clicked on. It doesn't know if you are clicking on the stroke of a shape instead. Or if you are clicking on somewhere along a gradient where you'd expect to pick the interpolated color. (For gradients, we're just using the color on one end of the gradient.) Picking the exact color of the pixel under the mouse cursor would be a more useful behavior. Given the above-mentioned issue, there are two approaches with pros and cons:

• Use the EyeDropper API which is supported on Chromium-based browsers.
  Pro: works even outside the viewport or web browser entirely
  Con: limited browser support (no Firefox and Safari)
• Rasterize the document and render it to an off-screen canvas then sample the corresponding pixel colors from that, using the same code for exporting artwork as PNG/JPG (see Add the File > Export dialog and PNG/JPG downloading #629). It'd have to re-render every time the canvas changes, in case the user pans/scrolls/zooms while picking colors. Be careful of possible DPI scaling-related gotchas. This can be done by rasterizing the canvas with 1x1 dimensions and just taking the color of that one pixel.
  Pro: works in all browsers
  Con: possibly worse performance

The second option is probably a better long-term solution.

[jackiechen73]

@Keavon Hey I'm interested in working on this!

[Keavon]

Great! I recommend the more robust approach of rasterizing the artwork, as described in the second bullet point. Although admittedly that'll be a little more difficult, but it's the better solution. Feel free to ask how to get started on this and we can talk through it on Discord.

[Keavon]

@jackiechen73 just checking if this is still in progress. No worries if not, I can always move it back to the Up For Grabs list so someone else can take it on.

[jackiechen73]

@Keavon Still working on it! Got caught up with school and midterms for a bit but looking to finish this up soon

[mfish33]

@Keavon just came across this it seems promising. https://github.com/canvg/canvg. Was going to start working on this but it seems like @jackiechen73 has it covered.

[Keavon]

@Keavon just came across this it seems promising. https://github.com/canvg/canvg. Was going to start working on this but it seems like @jackiechen73 has it covered.

No need for a dependency, we can use the canvas API to render the SVG string from a blob URL as an image drawn to the canvas. It supports SVG as one of the file types. That's how we already save JPG and PNG from the export dialog.

[jackiechen73]

@Keavon I think I'm going to drop this ticket -- tried implementing the second solution without much success :(

[Keavon]

@Keavon I think I'm going to drop this ticket -- tried implementing the second solution without much success :(

That's fine, no worries. Thanks for the update. I'll move this back to the Available column so somebody else can potentially pick it up if they're interested.