Есть ли способ реализовать javascript для выбора цвета изображения без использования холста?

Я реализую способ увеличения изображения, которое теперь отображается увеличенным как фоновое изображение другого элемента img. Эта часть работает, как и ожидалось, я могу перемещать мышь, фокусироваться на нужном мне месте, щелкать и как бы делать снимок/снимать изображение этой области (увеличенное как фон другого изображения контейнера). Теперь мне нужно реализовать способ выбора цвета из этого увеличенного изображения. После 3 дней я не смог перенести это фоновое увеличенное изображение на холст, чтобы выбрать цвет, получить правильные размеры оказалось для меня слишком сложно. Есть ли способ реализовать выбор цвета из моего уже работающего увеличенного (фонового изображения) без использования холста?

Я пробовал несколько вариантов этой функции безрезультатно:

                function useCanvas(canvas, image, callback) {
                var thisImg = new Image();
                var imgUrl = image.style.backgroundImage.replace('url("', '').replace('")', '');
                thisImg.src = imgUrl;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(thisImg,
                    colorContrast.xPos,
                    colorContrast.yPos,
                    thisImg.width, thisImg.height,
                    0, 0,
                    thisImg.width, thisImg.height
                );
                return callback();
            }

//zooming happens here
var container$ = document.getElementById('capture-image');
container$.style.backgroundImage = "url('" + img.src + "')";
container$.style.backgroundRepeat = "no-repeat";
container$.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";}

введите здесь описание изображения

-Благодарность,


person Mike Gmez    schedule 20.08.2020    source источник
comment
Можете ли вы опубликовать свой код здесь, пожалуйста, чтобы на ваш вопрос можно было ответить четко и прямо. Рекомендации здесь: stackoverflow.com/help/how-to-ask   -  person Nathaniel Flick    schedule 20.08.2020
comment
Как вы увеличиваете этот фон?   -  person Konrad Linkowski    schedule 21.08.2020
comment
Обновил его с информацией о масштабировании.   -  person Mike Gmez    schedule 22.08.2020


Ответы (1)


Я смог выполнить задачу, включив эту библиотеку: Magnifier.js, которая не использовать фоновое изображение, а динамически изменять увеличенное изображение при перемещении стекла.

person Mike Gmez    schedule 29.08.2020