colorpicker | A custom color picker that will pick colors from any image | Theme library

The color picker is provided as is by the browser, same way dropdowns appear as the browser has defined.

While there is a way to change some of it's appearance, you can not go as deep as you want. Also let me note that what you are seeing is how chrome shows the color picker, other browsers show it quite differently, if you open it in Firefox or Safari it will be different. If you want to go deeper into that topic, I found this article quite in-depth.

If you however want a much more customized user experience you could search for javascript color picker libraries and find one that suits your needs best or even write a custom implementation for it.

You can use oninput property.

Change your RenderProductImage function like below:-

forEach returns nothing so you cannot assign a variable to it the way you are doing it. Use map instead

You can use the index param in your map function. If the index is 0 it is the first item in the loop.

There's no need to have a separate localColor. You can directly pass in $dataModel.masterColor to the picker.

Use the Debugger to step through your code and see when "The getter 'red' was called on null" actually happens.

What you want is a CDN, which serves image assets via a GET request (the img src accepts a string which it uses to fetch (GET) content). In short, a CDN serves the application with assets -- be it images, javascript, CSS or HTML. A React application is designed to update content in place via manipulating a virtual DOM; therefore, expecting it to serve assets across domains is anti-pattern. Instead, you would use a custom server (like express) or a web server (like nginx) to serve static assets.

As a simple example, imgur.com would the React application, while i.imgur.com would be their CDN to serve images like this and s.imgur.com would be their CDN to serve CSS/JS assets like this.

This answer goes into more detail how to do it; HOWEVER, this is only one of many, many ways on how accomplish the above, but the concept is still the same: Making a request to retrieve an image via an img src string.

I hesitate to provide full example code since I have no idea what stack you're working with and what your knowledge/comfort-level is regarding backend services. As such, if you want practice consuming a request that serves images on the frontend, then I'd recommend you start with this API service.

Here's one of many ways to do it: Example Repo

To run the example...

1.) Clone the repo: git clone git@github.com:mattcarlotta/save-canvas-example.git

2.) Install dependencies: yarn or npm i

3.) Run yarn dev or npm dev

4.) Click one of the buttons to either save an image as PNG or as a PDF

The example includes quite a bit of notes, but to provide a brief:

• User clicks button. File Ref
• Depending on the clicked button, the canvas is converted to a Blob, which is then converted to a File. File Ref
• This file is then sent (via POST) to an image microservice running at http://localhost:4000 listening for requests to /upload-file. File Ref
• The microservice sees the request and directs to our middleware functions. File Ref
• Then it directs it to the /upload-file controller. File Ref
• The controller determines if the file upload was valid (in the middleware), if not it throws an error. File Ref
• When valid, the file details are generated from req.file (this comes from our multer middleware function), a directory is created and a file is saved to that directory. File Ref
• A filepath is then sent back to the client. File Ref
• Client receives filepath from image microservice and sets it to state. File Ref
• Client then renders a shareable link, a link to view the file, and a preview. File Ref

Save PNG:

Save PDF:

Flow Diagram

Interesting problem.

Well you have the handle object:

div[class*='p-colorpicker-hue-handle']

You can try to drag it via Selenium up or down

For selecting colors you can find the "main" color picker and click not on the center of it, but by giving it offset:

cssExpression: "div[class='ng-trigger-overlayAnimation'][class='p-colorpicker-panel']"