有没有一种方法可以在不使用画布的情况下实现图像颜色选择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,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";}

enter image description here

-谢谢

解决方法

我可以通过合并以下库来完成任务:Magnifier.js,该库不使用背景图像,而是在移动玻璃时动态地更改放大的图像。