RmBxZz

index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <input id="fileup" name="fileup" type="file" style="display:none">

    <div id="container" class="container">
    </div>

rmbxzz.markdown

RmBxZz

A Pen by kids on CodePen.

License.

script.js

var target;
        const imageUrl = "https://i.imgur.com/RzEm1WK.png";

        let jsonData = {
            "layers": [{
                "x": 0,
                "height": 612,
                "layers": [{
                    "x": 160,
                    "src": "ax0HVTs.png",
                    "y": 91,
                    "height": 296,
                    "width": 429,
                    "name": "mask_1"
                }, {
                    "x": 25,
                    "src": "iEA642D.jpg",
                    "height": 324,
                    "width": 471,
                    "y": 22,
                    "name": "car"
                }],
                "y": 0,
                "width": 612
            }]
        };

        const containerElement = $('#container');
        const fileUp = $('#fileup');
        let mask;

        $(function() {

            // Upload image onclick mask image 

            containerElement.click(function(e) {
                var res = e.target;
                target = res.id;
                if (e.target.getContext) {
                    // click only inside Non Transparent part 
                    var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
                    if (pixel[3] === 255) {
                        setTimeout(() => {
                            $('#fileup').click();
                        }, 20);
                    }
                }
            });

            // Fetch mask images from json file - IGNORE this code 

            function getAllSrc(layers) {
                let arr = [];
                layers.forEach(layer => {
                    if (layer.src) {
                        arr.push({
                            src: layer.src,
                            x: layer.x,
                            y: layer.y,
                            height: layer.height,
                            width: layer.width,
                            name: layer.name
                        });
                    } else if (layer.layers) {
                        let newArr = getAllSrc(layer.layers);
                        if (newArr.length > 0) {
                            newArr.forEach(({
                                src,
                                x,
                                y,
                                height,
                                width,
                                name
                            }) => {
                                arr.push({
                                    src,
                                    x: (layer.x + x),
                                        y: (layer.y + y),
                                        height,
                                        width,
                                        name: (name)
                                });
                            });
                        }
                    }
                });
                return arr;
            }

            function json(data) {
                var width = 0;
                var height = 0;

                let arr = getAllSrc(data.layers);
                let layer1 = data.layers;
                width = layer1[0].width;
                height = layer1[0].height;
                let counter = 0;
                let table = [];

                // container dimensions 
                containerElement.css('width', width + "px").css('height', height + "px").addClass('temp');
                //end 

                for (let {
                        src,
                        x,
                        y,
                        name
                    }
                    of arr) {

                    //Get Height and width of mask image [ edit button ] 
                    var ImagePosition = arr;
                    //code end 

                    if(name.indexOf('mask_') !== -1){
                    var imageUrl1 = imageUrl;
                }else{
                    var imageUrl1 = '';
                }

                    var mask = $(".container").mask({
                        imageUrl: imageUrl1,

                        // Fetch Mask images 
                        maskImageUrl: 'http://i.imgur.com/' + src,
                        // end 

                        onMaskImageCreate: function(img) {
                            // Mask image positions 
                            img.css({
                                "position": "absolute",
                                "left": x + "px",
                                "top": y + "px"
                            });
                            // end 

                        },
                        id: counter
                    });
                    // here 
                    table.push(mask);
                    fileup.onchange = function() {

                        let mask2 = table[target];
                        const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
                        document.getElementById('fileup').value = "";
                        
                    };
                    counter++;
                }
                return mask;
            }
            mask = json(jsonData);
        }); // end of function 

        // Image code 

        (function($) {
            window.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);

                // Create the image properties
                settings.maskImage = new Image
                settings.image  = new Image

                // set the cross-origin attributes
                settings.maskImage.setAttribute('crossOrigin', 'anonymous');
                settings.image.setAttribute('crossOrigin', 'anonymous');

                settings.maskImage.onload = function() {
                    // once the mask is loaded, load the image
                    container.loadImage(settings.imageUrl)
                }

                settings.image.onload = function() {
                    // once the image is loaded, render to canvas
                    container.drawMask()
                    container.drawImage()
                }

                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.drawMask = function() {
                    canvas.width = settings.maskImage.width;
                    canvas.height = settings.maskImage.height;
                    context.save();
                    context.beginPath();
                    context.globalCompositeOperation = "source-over";
                    // draw the masked image after scaling 
                    context.drawImage(settings.maskImage, 0, 0, settings.maskImage.width, settings.maskImage.height);
                    context.restore()
                };

                container.drawImage = function() {
				   
                    const img = settings.image					

                    settings.x = (canvas.width - (img.width * settings.scale)) / 2
                    settings.y = (canvas.height - (img.height * settings.scale)) / 2

                    context.globalCompositeOperation = 'source-atop';
                    context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
                    initImage = false;
                }

                // change the draggable image 

                container.loadImage = function(imageUrl) {
                    
                    settings.y = startY;
                    settings.x = startX;
                    prevX = prevY = 0;

                    initImage = true;

                    settings.image.src = imageUrl; // CHANGED

                    // sirpepole Add this 
                    return settings.id;
                };

                container.loadMaskImage = function(imageUrl, from) {
                    canvas = document.createElement("canvas");
                    context = canvas.getContext('2d');
                    canvas.setAttribute("draggable", "true");
                    canvas.setAttribute("id", settings.id);
                    // settings.maskImageUrl = imageUrl;
                    settings.maskImage.src = imageUrl // CHANGED

                    div = $("<div/>", {
                        "class": "masked-img"
                    }).append(canvas);

                    // div.find("canvas").on('touchstart mousedown', function(event) 
                    div.find("canvas").on('dragstart', 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);
                    // Moved this to the settings.maskImage.onload
                };
                container.loadMaskImage(settings.maskImageUrl);
                JQmasks.push({
                        item: container,
                        id: settings.id
                    })
                    // Edit image 
                div.addClass('masked-img' + settings.id);
                div.attr('data-id', settings.id);
                // ends 
                return container;
            };
        }(jQuery));

style.css

.container {
        background: silver;
        position: relative;
    }
    
    .container img {
        position: absolute;
        top: 0;
        bottom: 250px;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 999;
    }
    
    .masked-img {
        overflow: hidden;
        position: relative;
    }