Я реализую способ увеличения изображения, которое теперь отображается увеличенным как фоновое изображение другого элемента 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";}
-Благодарность,