javascript - Pass Uploaded Image in document.getElementById instead of canvas

Question

We are displaying box image & mask images by fetching json.

User will click on Mask image & upload their own image.

Issue :

Onclick Save button, Both mask image & user uploaded image are saving in server as below....

Requirement :

But Onclick Save button, i need to save only user uploaded image on server.

Below is User Uploaded image :

Html

<button class ="save" onclick="test()">Save image to server</button>

Script

function test() {
    var canvas = document.getElementById("1");
    var dataURL = canvas.toDataURL(); // THE BASE 64 DATA
    var dataFileName = document.getElementById('fileup').value.replace(/.*(/|\)/, ''); // GET THE FILE NAME THAT USER CHOSE
    var dataFileType = dataFileName.split('.').pop();

    $.ajax({
        type: "POST",
        url: "save.php",
        data: {
            imgBase64: dataURL,
            imgFileName: dataFileName,
            imgFileType: dataFileType
        }
    }).done(function(o, imgFileName) {

        console.log(o);
        var response = JSON.parse(o);
        console.log(response);

        $('body').prepend('<img src="' + dataFileName + '" style="height: 200px; width: auto;">');

    });
}    

save.php

<?php

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

if (isset($_POST['imgBase64']) && isset($_POST['imgFileName']) && isset($_POST['imgFileType'])) {

    $fname   = filter_input(INPUT_POST, 'imgFileName'); // THE FILENAME THE USER CHOSE IS RECEIVED VIA POST
    $img     = filter_input(INPUT_POST, 'imgBase64'); // THE BASE64 ENCODING RECEIVED VIA POST
    $imgtype = filter_input(INPUT_POST, 'imgFileType'); // THE FILE TYPE / EXTENSION IS RECEIVED VIA POST   

    if ($imgtype === 'png') {
        $img = str_replace('data:image/png;base64,', '', $img);
    };
    if ($imgtype === 'jpg') {
        $img = str_replace('data:image/png;base64,', '', $img);
    };

    $imgtype = "png";

    $fn_array = explode(".",$fname);    
    unset($fn_array[count($fn_array)-1]);

    $fileName = join($fn_array).".".$imgtype;

    // REPLACE ALL SPACES IN THE IMAGE DATA WITH PLUS SYMBOL
    $img = str_replace(' ', '+', $img);
    // CONVERT THE DATA FROM BASE64 ENCODING
    $img = base64_decode($img);

    // SAVE THE FILE WITH NAME SYNTAX :
    file_put_contents('/var/www/html/ecom1/site/test/save/' . $fileName, $img);


    echo '{"error":false, "message":null,"data":[{"msg": "Image has been saved successfully!", "fileName": "' . $fileName . '"}]}';
}
?>   

Below is Full code in Snippet :

var target;
const imageUrl = "";

let jsonData = {
    "layers": [{
        "x": 0,
        "height": 200,
        "layers": [{
                "type": "image",
                "name": "bg_img",
                "x": 0,
                "y": 0,
                "width": 200,
                "height": 200,
                "src": "14IVyVb.png",
            },
            {
                "type": "image",
                "src": "l8vA9bB.png",
                "name": "mask_userimg",
                "x": 10,
                "y": 15,
                "width": 180,
                "height": 166
            }
        ],
        "y": 0,
        "width": 200
    }]
};

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

    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 = [];

        containerElement.css('width', width + "px").css('height', height + "px").addClass('temp');

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

            var ImagePosition = arr;

            var imageUrl1 = imageUrl;

            var mask = $(".container").mask({
                imageUrl: name.indexOf('mask_') !== -1 ? imageUrl1 : undefined,

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

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

                },
                id: counter
            });

            ImagePosition.map(function(cur, index) {
                var available = cur.name.includes('mask_');

                if (!available) {
                    $('.masked-img' + index).css('pointer-events', 'none');
                }
            });

            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.
        const 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) {},
            rotate: 0,
        }, 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, true)
            container.drawMask()
        }

        settings.image.onload = function() {
            // once the image is loaded, render to canvas            
            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,
            scale = settings.scale,
            div;

        container.drawMask = function() {
            if (!settings.maskImage) return true;
            canvas.width = settings.maskImage.width;
            canvas.height = settings.maskImage.height;
            context.save();
            context.beginPath();
            context.globalCompositeOperation = "source-over";
            // draw the masked image after scaling
            if (settings.maskImage)
                context.drawImage(settings.maskImage, 0, 0, settings.maskImage.width, settings.maskImage
                    .height);
            context.restore()
        };

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

            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.save();
            context.translate(settings.x + img.width / 2, settings.y + img.height / 2);
            context.rotate(settings.rotate);
            context.scale(settings.scale, settings.scale);
            context.translate(-(settings.x + img.width / 2), -(settings.y + img.height / 2));
            let width = img.width,
                height = img.height;
            if (img)
                context.drawImage(img, settings.x, settings.y, width, height);
            context.restore();
            initImage = false;
        }

        container.loadImage = function(imageUrl, isMask) {
            if (!imageUrl) return true;
            settings.y = startY;
            settings.x = startX;
            settings.scale = 1;
            settings.rotate = 0;
            prevX = prevY = 0;
            initImage = true;
            settings.image.src = imageUrl; // CHANGED
            if (!isMask)
                container.data('image_set' + settings.id, true)
            return settings.id;
        };

Answer 1

Your problem is that you upload the canvas not the user image:

var canvas = document.getElementById("1");
var dataURL = canvas.toDataURL(); // THE BASE 64 DATA

But you have to upload the selected image in the file input element. Over here is shown how to read the data from an file input element.