When my company's users create a new "customer site" they upload the customer's logo and then choose some colours that will form the basis of theming for the customer's site. In that way, a customer will 'feel' like they have their own branded experience when using 'their' website.
The colours are inevitably based on the customer's logo. To use the colour picker component, I have to train my users to go to Paint, load the logo, choose the colour using the colour picker, go into the palette and 'copy the crazy 6-digit numbers that may contain letters of the alphabet that starts with a #' and paste that into the colour picker of our web site.
Rather, I would prefer if they could simply use an eyedropper from the ColorPicker component using functionality similar to https://imagecolorpicker.com/en It would save training and greatly improve the useability of my website.
Can I put that forward as being a feature request?
Thanks
Dave A
Hello David,
Thank you for logging this Feature Request. We will monitor the community interest in such a feature and consider it for future implementation.
Until such a feature becomes available out-of-the-box you could implement such tool using the MDN tutorial for extracting data from a canvas element and adding a custom command to the ImageEditor for example. This way the user will eb able to upload an image, and pick a color.
<script>
function pick(event, canvas, ctx) {
const bounding = canvas.getBoundingClientRect();
const x = event.clientX - bounding.left;
const y = event.clientY - bounding.top;
const pixel = ctx.getImageData(x, y, 1, 1);
const data = pixel.data;
const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
return data
}
var imageEditorNS = kendo.ui.imageeditor;
imageEditorNS.commands.GetColorImageEditorCommand = imageEditorNS.ImageEditorCommand.extend({
exec: function () {
var that = this,
options = that.options,
imageeditor = that.imageeditor,
canvas = imageeditor.getCanvasElement(),
ctx = imageeditor.getCurrent2dContext(),
image = imageeditor.getCurrentImage();
canvas.addEventListener("click", function(event){
var data = pick(event, canvas, ctx);
var picker = $("#colorpicker").getKendoColorPicker();
picker.value(`rgba(${data[0]},${data[1]},${data[2]},${data[3] / 255})`);
picker.trigger("change")
},{once : true});
}
});
</script>
<div class="demo-section wide">
<label>Selected Color:</label>
@(Html.Kendo().ColorPicker()
.Name("colorpicker")
)
<h3>Upload image and select color:</h3>
@(Html.Kendo().ImageEditor()
.Name("imageEditor")
.Height(900)
.Toolbar(toolbar=>toolbar.Items(i=> {
i.Add().Name("open");
i.Add().Command("GetColorImageEditorCommand").Type("button").Text("Get Color").Icon("eyedropper");
}))
)
</div>
Here is a sample REPL demonstrating the above. Feel free to modify the example to meet your requirements.
Regards,
Aleksandar
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.