Question

我们无法将上载的图像拖到第一个蒙版图像的右侧。...因为它与第二个图像的左侧重叠。...

这是codepen：https://codepen.io/kidsdial/pen/JxxQRv

$(document).ready(function () {
            // dont have a webserver so im using base64string instead
              var maskedImageUrla ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAAEWCAYAAABiyvLjAAAACXBIWXMAAC4jAAAuIwF4pT92AAAF+mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTE5VDE4OjExOjMwKzA1OjMwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTAxLTE5VDE4OjExOjMwKzA1OjMwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wMS0xOVQxODoxMTozMCswNTozMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpjNzlhOWNlMi1jZmM4LTI3NDQtOWQ5YS0wN2RkNGI0Y2YzNGQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDozYjhkZGNiMS04MjQ4LTM4NDAtYmY1OC1jN2VhMTYyOTYyMGUiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5NGVkMjU4ZC0zMzhiLTljNDMtOTYyOS1jMmM1MmRiMzE2NGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjk0ZWQyNThkLTMzOGItOWM0My05NjI5LWMyYzUyZGIzMTY0ZSIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0xOVQxODoxMTozMCswNTozMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpjNzlhOWNlMi1jZmM4LTI3NDQtOWQ5YS0wN2RkNGI0Y2YzNGQiIHN0RXZ0OndoZW49IjIwMTktMDEtMTlUMTg6MTE6MzArMDU6MzAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz62EfeeAAATzUlEQVR4nO3df5BdZX3H8Xfu7OxsQ4zbEGOMMYQQQ4ghhB9BCIj8DKAQiTqAETH8qIkMSgMtGIMylMFIMThoGbCCoYBSobVKpYIi5WdApR2IURkGEWkaI41pTNNM2El3+8d3L7nc3Lv33HvPOd/nOefzmtnR3b33nC9J9rPf85znPM+ooaEhREZwEXDj8P//E2CXYy2SoYp3ARKsCcCDwE1Az/DHNNeKJFMKA2nkGOBXwIK6r89wqEVyojCQep8BHgXGNfjerJxr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";
var maskedImageUrlb ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaAAAAGECAYAAABwC/R5AAAACXBIWXMAAC4jAAAuIwF4pT92AAAF+mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTE5VDE4OjExOjMxKzA1OjMwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTAxLTE5VDE4OjExOjMxKzA1OjMwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wMS0xOVQxODoxMTozMSswNTozMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NDhiN2JiYi1kNDY4LWY5NDctYTdjMy1jYzMzZTQzYjc2ODgiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo0ZTJmZTkyNS01NzIyLTMxNGMtOTU2OC01NjQyNDFhYmVhYjMiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplZDNhMTc5My0yNTY5LTdhNDQtYTNiYi1kN2Y4ZGJkZmRjODkiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmVkM2ExNzkzLTI1NjktN2E0NC1hM2JiLWQ3ZjhkYmRmZGM4OSIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0xOVQxODoxMTozMSswNTozMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NDhiN2JiYi1kNDY4LWY5NDctYTdjMy1jYzMzZTQzYjc2ODgiIHN0RXZ0OndoZW49IjIwMTktMDEtMTlUMTg6MTE6MzErMDU6MzAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE4IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz79f9E7AAAfmklEQVR4nO3de5BedZ3n8bddqa5UisqkqMiwTkRkERkMiNwUQbzgBYaLoiKKV3QcdRhlHGQZ1nUpF+94Q1xFRUZRUBEcBAYZQGSQASZExBgQY4xUNmKKyoZUNtvb29Pb7B/fbul0+vL00+ec77m8X1Vd6XS6n+cjdvfn+f3O7/x+T3r88ceRpJItBfaa9Pa08T9XAMuBJcBiYDdg0fj7MxkGxoBRYNv425ZJ7z8C/A9gI7Bp/G1bgf9bVJAnWUCSCrII2B9YCfw5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";
          
          // maskedImage one
            var mask1 = $(".container").mask({
                maskImageUrl: maskedImageUrla,maskedImageUrlb,
                imageUrl: "",
                onImageCreate: function(img){
                // add your style to the img example below
                  //img.css({"background": "red" })
                },
                onMaskImageCreate: function(img){
                // add your style to the img example below
                  
				  img.css({ "position" : "relative",
"left":105, "top":105	  })
                }
            });
            // maskedImage two
            var mask2 = $(".container").mask({
                maskImageUrl: maskedImageUrlb
            });



fileupa1.onchange= function(){
  mask1.loadImage(URL.createObjectURL(fileupa1.files[0]));
};

fileupa2.onchange= function(){
  mask2.loadImage(URL.createObjectURL(fileupa2.files[0]));
};

}); // end of document ready

// jq plugin for mask
(function ($) {

    $.fn.mask = function (options) {
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            maskImageUrl: undefined,
            imageUrl: undefined,
            scale: 1, 
            onImageCreate: function(img){ },
            onMaskImageCreate: function(div) {},
        }, options);


        var container = $(this);
        let prevX = 0,
            prevY = 0,
            translateX = 0,
            translateY = 0,
            draggable = false,
            img, 
            canvas, 
            context, 
            image,
            div;
            

        container.onDragStart = function (evt) {
            var x = evt.offsetX + (translateX);
            var y = evt.offsetY + (translateY);
            var pixelData = context.getImageData(x, y, 1, 1).data;
            draggable = pixelData[0] > 1; // allow to drag
            // reset all images that exist in the current page and set it to inactive
            $(".masked-img .mask-draggable-image").attr("active", "false"); 
            img.attr("active", "true");
            prevX = evt.clientX;
            prevY = evt.clientY;
        };

        container.getImagePosition = function () {
            return { x: translateX, y: translateY };
        };

        container.onDragOver = function (evt) {
            if (draggable && img.attr("active") == "true") {
                translateX += evt.clientX - prevX;
                translateY += evt.clientY - prevY;
                prevX = evt.clientX;
                prevY = evt.clientY;
                container.updateStyle();
            }
        };

        container.updateStyle = function () {
            let transform = "translate(" + translateX + "px, " + translateY + "px) scale(" + settings.scale + ")";
            img[0].style.transform = transform;
        };
      
       // change the draggable image
        container.loadImage = function (imageUrl) {
            if (img)
                img.remove();
            // reset the code.
            translateX = translateY = prevX =prevY= 0;
            settings.imageUrl = imageUrl;
            img = $("<img draggable='true'  src='" + imageUrl + "' />").addClass("mask-draggable-image");
            div.prepend(img);
            if (settings.onImageCreate)
                settings.onImageCreate(img);
        };

        // change the masked Image
        container.loadMaskImage = function (imageUrl) {
            if (div)
                div.remove();
            canvas = document.createElement("canvas");
            context = canvas.getContext('2d');
            settings.maskImageUrl = imageUrl;
            div = $("<div/>", {
                style: "-webkit-mask-image:url(" + settings.maskImageUrl + ");  mask-image: url(" + settings.maskImageUrl + ");",
                "class": "masked-img"
            }).append(canvas);
            div.bind("dragover", container.onDragOver);
            div.bind("dragstart", container.onDragStart);
            image = new Image();
            image.setAttribute('crossOrigin', 'anonymous');
            image.src = settings.maskImageUrl;
            
            image.onload = function () {
                canvas.width = image.width;
                canvas.height = image.height;
                context.drawImage(image, 0, 0, image.width, image.height);
                div.css({ "width": image.width, "height": image.height });
            };
            container.append(div);
            if (settings.onMaskImageCreate)
                settings.onMaskImageCreate(div);
            container.loadImage(settings.imageUrl);
        };
        container.loadMaskImage(settings.maskImageUrl);
        return container;
    };
}(jQuery));

.container {
    border: 1px solid #DDDDDD;
    display: flex;
    position: relative;
    background: gold;
}

container canvas {
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
}

.masked-img {
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: white;
    overflow: hidden;
    margin-left:10px;
}

<script src= "https://code.jquery.com/jquery-3.3.1.min.js">
</script>

image 1 
<input id="fileupa1"  type="file" >

image 2 
<input FILEDIA="1" id="fileupa2"  type="file" >
<div class="container">

</div>

如果您需要其他任何信息，请告诉我。...

请帮助我找到解决方法。...

预先感谢。...

Answer 1

我已经重新创建了插件，现在它仅使用画布遮罩，这里不再涉及css mask。

$(document).ready(function() {
    var maskedImageUrla = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAAEWCAMAAABVFALRAAAAaVBMVEVHcEz////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////dvhWBAAAAInRSTlMABWcZ/QmP9IX67TovokSZ5d0hD65eudRVbnvATScSx89zp18fZAAABsRJREFUGBnlwAeCo0gWBNAAEhLvjbyJ+x9yd6a7p8vIAEIq5c+Hd+FGkQOreT3JPWyWxCS5g8U2/NcZ1jr0/CWDreqSvw2wVBrzj8iBlXLNv1LYaKX4wRoW6viRymAfl59VsI7Lrw6wTMdvVrBLoviVKmCVOuZ3A2ziD7zEg0VaXtTBHhtelsEaOa8oYYta85o97OCceNUadgh53RZWSHiDOsACfsVbXFgg4E095Et4W9RAOr/iHR2kC3lPC+G8iPdoH7IFvG8F0byI97UQLeAI0QGCeRHHcCFYyFGOkOsQcZw9xAo5UgipGs2RSgdChRxtBZl8zdF6yLTheKqGRI7mBCEk2nGK2IdAGSdxIY8fcZIT5FlxohzitJyohTROxIlUDWF2nKyAMAUn0x5kiTldCFESzhA3kCTkHGdIMnCO0occHudxIceK85Q+xCg40xpiDJyp9CGErzjXGkIknK30IYPL+c6QIeB8cQMRtnxACBFiPkB7EKDhQwoIkPAh0R7m6/iYFuYL+KAcxuv5oBOMV/FRLkwX80EqbmC4iA8LYDaHD1NRDaN5XEALo+25hB1MlnAJlQ+D5VxECIOtuIhoD3N1XITawlxrLqSDsdZcSNnAVBsupYCpXC4mh6F2XEzlw0wplxPATAcuR6UwU8TlDA6MVHFBGxhpywVFKUyUcUmDAwOFXFSIt+OlO3cTFhmQFUEQhud11+UePnC5KJXgXRzyc9GfYsVf1P+RSvEXvS3WuYd/5VxW5eMNpOu25Ah6G7hJk3JhBX7Yft1qUnG8mEvL8XOaVVbyDZQH/Ax/feS7aPET9oHmG3HxcnnP96L3eCnfrfh2Tg5exws131GAV/EyxTe1w2usNd9W7OEF9ke+s6ODZ3PCiK+mOIEK8GTpwNfTnGSHZ3I2iu9P13ie+kgjnHw8S6dpiAJPsqE5OjxFSIPoFE8Q0ihVg8WFNEyPpZ1pnBDL6migFZaUKxpIp1jOXtNI1QFLaSoaqsdSehorwDLWNFiHJaQRDRbleJxf0WhxjYcFNFzV4EEpjbd18JgjjacKPKSjBGc8wCkpgdphPpcy6ARzOSVlULGHmTqKMTSY50Qx1NbBHCklyTBHQFECzBBTlg0mSyiM6jBVSGmiHBOdKI5OMIlHgXSKKVwKpMoaE7QUqfIwXkWZhgZjOZTq6GOkPcXqHYyTU64W47iUS2UYJaRkBcYoKFqAEXrKFuC+E4ULcVdM6Ta4R1G8M+6gBda4jTZwcVNEG7i4paQV1rhhSzuccV2maIczrgpoiw2uWdMaG1yxoz1CXJbSGoohLvJpkxAXlbRJgUtaWiVz8N2GdmkdfJPQMr2PrxxNyxwbfNXSNicPX6xonaHGZ46mdcoanxW0T5nik5QW0jk+GWgfFa3w0Zk2Ui4+OES0UogPMtqpwF8JLdX6+M+Wlto2+COhrQYPfxS0VdngtyamnRRr/NHRUjH+2tJOLf7aR7TSGR+EtFKCD/xK0T7Kx0c5LXTCZyHtE+CLjNZZ4Qunp21qfOWfaJcY3x0qWqXFBV5Jm5xxyT5WtEeCyyLaw8dlOa0x4BqXtghwlUtL7HBdRzsccMNO0wIn3JSWlC/AbYee4uW4wwkpnPJx105TtCNGqAcKpkKM0bQULME454hSRQ5GSgcK1WM0J4wo0hkT7LeUKMUkq5LiaEzkbzSFyTCZVyiK0mGGtKeiHAfMkg+UQp0wk9MNFGKD+ZJWUYIUj/DCmMaL8SCnO9JsqsDj0kLTZDsswXePNFbkYyF1ONBMLRZUr7eK5umwrGaVaRrmgMU5eXCiQbZ4jmYXDDTEGs9z2IVbzbenPDyXk7rZoPjOeryCn6yzk+abWuF16vxcHDXfTezg1bx8XfRVxLcR4Kd4SbcptqXiPxR/UI2fVifdpmgHzZ/S4234+7wLs2PMfyi+zg5vx9/v1kE7aL5I6eBtebkb9CWfboN31yRusNV8HuXBDPUq7GM+RQuT7Lui4uJymKbZBQOXVMFIXpdpLuUMYyVBxSVEB5hsH5Z8WAbTJYXmYxKYz+mOfMAAGdIs4lwupDiEmrNoH3I0m5gzFBDF32hOlkKYQ6A4zRHypEdO0kEiV3O82IFI9ZGjbSBVyJG0D7F2mmOoEIKlMUfQDSSrK94XQjav4j3RAcJ5Je8IIF4dK94SebBAxFsK2KDjDaqGFQpel8EOfsWr9rBEwitUC2sEvCKFNZqYF7WwiMuLEljEKXlBD6u4vCCHVXzNb7awTMBvclhmzy/UCdbp+cUO1kn42REWCviB0jVslPEvDUu5mr9ta9iqWW81VVUkGOV/xCNgIHRY9GIAAAAASUVORK5CYII=";
    var maskedImageUrlb = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaAAAAGECAMAAABH1QRLAAAAXVBMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+EHRzTAAAAHnRSTlMAS6Ph+PEC/BEI6SQaLY0/ethWzsQ0uoSXZ6xws1/MHbQyAAALUElEQVQYGe3AB2KjSBQE0AKaDuQgUK77H3PXE+2xZSVCg/6DuMTmwX4bbuooiRV/UiqO2v4QbvdBbiFmovNmG9aKPxleEG92+9JCTCo771rDOyT9tskgpuDKouZDovCcQYwqPfaKz6i3HcQ4XFBEHEBSlBBD02UYczDRNoUYULqNOLDN2UEMwjU9x6B2KcTTul3M0fSBhniC29ccV3S0EA9y+4TjU0UG8QB9jjgNU1iIewU1p6MqB3GPcsNpxXsNcav8xOnVJcRN0pDzOKUQ12hbGM7FVA7iW65SnFNUQlzmjjHnZbhzEBekLT2QlBBf2iv6odAQn9gTvdGmEB/pMqFHVAPxni5o6JXCQfyRtvTOxkL80sT0UJJjWq47F4fTIQx3RbE97s9BmadWY3auoJ9UgIm47lycEn5JtUWTYUZZS2/tMbosqA4Jr0nCY6cxj5geKzRGpIMw4c3UZhtkmNrRGPrs4DCWrEp4tyg8p5iOC+k5s7EYgw5OfFRUZZiG3dB/rcXg7DHiUzZnh/GlNZegthhWFxo+Te06jCyPuQy1xXB0s+FA6qPFmGIuRW0xEN3UHJAJS4wlUIaL0ToMIq85tHrvMIbAcEl6h+fpynAEqsgwuMBwWU4aT9LZhmMJcwwrMFyaEE9qYo7okGJAgeHyFHiGPXBkO4uhBIZLtMfjyoSji88YRmC4TCUe5AoaTqAtMYDAcKFUiofkNacSZnhWYLhYtcP9dKM4HbN1eEpguGAh7nfktKIAT0gVF22Pe205uUOGR9mIy2Y63KfiDNQZj9E9ly6xuMee8+gzPKLg8h1wh4ZziRvc78w12ONmpeF8Qod7Ga6BSXGrmHOqU9wlSwxXodW4SZYYzkoFuINruRYVbmFrzm6rcbOQq2FyXOc29EBvcaMjV6TVuOpALyQdblIarske12zpCXPEDbKEq6IyfC+gP0KHa/SG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";

    // maskedImage one
    var mask1 = $(".container").mask({
        maskImageUrl: maskedImageUrla,
        onMaskImageCreate: function(img) {
            // add your style to the img example below
            img.css({
                "left": 105,
                "top": 105
            })
        }
    });
    // maskedImage two
    var mask2 = $(".container").mask({
        maskImageUrl: maskedImageUrlb,
    });

    fileupa1.onchange = function() {
        mask1.loadImage(URL.createObjectURL(fileupa1.files[0]));
    };

    fileupa2.onchange = function() {
        mask2.loadImage(URL.createObjectURL(fileupa2.files[0]));
    };

}); // end of document ready

// jq plugin for mask
(function($) {
    var JQmasks = [];
    $.fn.mask = function(options) {
        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.
            maskImageUrl: undefined,
            imageUrl: undefined,
            scale: 1,
            id: new Date().getUTCMilliseconds().toString(),
            x: 0, // image start position
            y: 0, // image start position
            onMaskImageCreate: function(div) {},
        }, options);


        var container = $(this);

        let prevX = 0,
            prevY = 0,
            draggable = false,
            img,
            canvas,
            context,
            image,
            timeout,
            initImage = false,
            startX = settings.x,
            startY = settings.y,
            div;

        container.mousePosition = function(event) {
            return {
                x: event.pageX || event.offsetX,
                y: event.pageY || event.offsetY
            };
        };

        container.selected = function(ev) {
            var pos = container.mousePosition(ev);
            var item = $(".masked-img canvas").filter(function() {
                var offset = $(this).offset()
                var x = pos.x - offset.left;
                var y = pos.y - offset.top;
                var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
                return d[0] > 0;
            });

            JQmasks.forEach(function(el) {
                var id = item.length > 0 ? $(item).attr("id") : "";
                if (el.id === id)
                    el.item.enable();
                else el.item.disable();
            });
        };

        container.enable = function() {
            draggable = true;
            $(canvas).attr("active", "true");
            div.css({
                "z-index": 2
            });
        };

        container.disable = function() {
            draggable = false;
            $(canvas).attr("active", "false");
            div.css({
                "z-index": 1
            });
        };

        container.onDragStart = function(evt) {
            container.selected(evt);
            prevX = evt.clientX;
            prevY = evt.clientY;
        };

        container.getImagePosition = function() {
            return {
                x: settings.x,
                y: settings.y,
                scale: settings.scale
            };
        };

        container.onDragOver = function(evt) {
            if (draggable && $(canvas).attr("active") === "true") {
                var x = settings.x + evt.clientX - prevX;
                var y = settings.y + evt.clientY - prevY;
                if (x === settings.x && y === settings.y)
                    return; // position has not changed
                settings.x += evt.clientX - prevX;
                settings.y += evt.clientY - prevY;
                prevX = evt.clientX;
                prevY = evt.clientY;
                container.updateStyle();
            }
        };

        container.updateStyle = function() {
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.beginPath();
                context.globalCompositeOperation = "source-over";
                image = new Image();
                image.setAttribute('crossOrigin', 'anonymous');
                image.src = settings.maskImageUrl;
                image.onload = function() {
                    canvas.width = image.width;
                    canvas.height = image.height;
                    context.drawImage(image, 0, 0, image.width, image.height);
                    div.css({
                        "width": image.width,
                        "height": image.height
                    });
                };

                img = new Image();
                img.src = settings.imageUrl;
                img.setAttribute('crossOrigin', 'anonymous');
                img.onload = function() {
                    settings.x = settings.x === 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
                    settings.y = settings.y === 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
                    context.globalCompositeOperation = 'source-atop';
                    context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
                    initImage = false;
                };
            }, 0);
        };

        // change the draggable image
        container.loadImage = function(imageUrl) {
            if (img)
                img.remove();
            // reset the code.
            settings.y = startY;
            settings.x = startX;
            prevX = prevY = 0;
            settings.imageUrl = imageUrl;
            initImage = true;
            container.updateStyle();
        };

        // change the masked Image
        container.loadMaskImage = function(imageUrl, from) {
            if (div)
                div.remove();
            canvas = document.createElement("canvas");
            context = canvas.getContext('2d');
            canvas.setAttribute("draggable", "true");
            canvas.setAttribute("id", settings.id);
            settings.maskImageUrl = imageUrl;
            div = $("<div/>", {
                "class": "masked-img"
            }).append(canvas);

            div.find("canvas").on('touchstart mousedown', function(event) {
                if (event.handled === false) return;
                event.handled = true;
                container.onDragStart(event);
            });

            div.find("canvas").on('touchend mouseup', function(event) {
                if (event.handled === false) return;
                event.handled = true;
                container.selected(event);
            });

            div.find("canvas").bind("dragover", container.onDragOver);
            container.append(div);
            if (settings.onMaskImageCreate)
                settings.onMaskImageCreate(div);
            container.loadImage(settings.imageUrl);
        };
        container.loadMaskImage(settings.maskImageUrl);
        JQmasks.push({
            item: container,
            id: settings.id
        });
        return container;
    };
}(jQuery));

.container {
    border: 1px solid #DDDDDD;
    display: flex;
    background: red;
}

.container canvas {
    display: block;
}

.masked-img {
    overflow: hidden;
    margin-left: 10px;
    position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
image 1 
<input id="fileupa1"  type="file" >

image 2 
<input FILEDIA="1" id="fileupa2"  type="file" >
<div class="container">

</div>

CodePen

仅拖动图像的一部分

1 个答案: