CODEWITHSUNDEEP
javascriptjqueryhtml5-canvas
vickey colors
vickey colors

Reputation: 171

Save Uploaded image in canvas to server

We are fetching mask image from json & displaying in page. Once we click on mask, we are displaying file upload dialog box, so that user will upload the image.

enter image description here

Requirement :

Once user click on save button, i want to upload that image to server.... but now its not saving the image in server....

Codepen : https://codepen.io/kidsdial/pen/pXBRga

Script : 

function test(){
var canvas  = document.getElementById("cvs");
var dataURL = canvas.toDataURL();

$.ajax({
  type: "POST",
  url: "upload.php",
  data: { 
     imgBase64: dataURL
  }
}).done(function(o) {
  console.log('saved'); 

});

}

Upload.php : 

<?php    
define('UPLOAD_DIR', 'uploads/');
imgBase64 = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

Below is Snippet :

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

let jsonData = {
    "layers": [{
        "x": 0,
        "height": 400,
        "layers": [{
            "x": 20,
            "src": "ax0HVTs.png",
            "y": 20,
            "height": 296,
            "width": 429,
            "name": "mask_1"
        }],
        "y": 0,
        "width": 500
    }]
};

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.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 = ev.currentTarget;

            JQmasks.forEach(function(el) {
                var id = $(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.getImagePosition = function() {
            return {
                x: settings.x,
                y: settings.y,
                scale: settings.scale
            };
        };

        
        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;
        };
          
        container.loadMaskImage = function(imageUrl, from) {
            // console.log('loading mask image from', 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);
          
            container.append(div);
            if (settings.onMaskImageCreate)
                settings.onMaskImageCreate(div);
        };

        if (settings.maskImageUrl) {
            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));

//Download image to server 

function test(){
var canvas  = document.getElementById("cvs");
var dataURL = canvas.toDataURL();

$.ajax({
  type: "POST",
  url: "upload.php",
  data: { 
     imgBase64: dataURL
  }
}).done(function(o) {
  console.log('saved'); 

});

}
.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;
}
<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>

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

here is code in Pastebin

Upvotes: 0

Views: 3684

Answers (1)

tamak
tamak

Reputation: 1591

The main issue is that some server-side language is necessary here... sure, you can (ajax) POST the base64 but something on the server has to know what to do with the POST(ed) data it receives.

Below is the PHP (server side code) I used on a previous project to allow the user to upload their own avatar image.

In my use case I have the ajax POST sending 3 things:

  1. the users image file name
  2. the users image file extension (png, jpg or gif)
  3. the raw base64 encoding data

The PHP should be fairly self explanatory, but let me know if you have any questions.

You MAY need to make sure that the permissions on the folder where you're writing the image will in fact allow the PHP process to write. Sometimes I've had to tweak folder permissions, just depends on the host platform configuration.

If it doesn't work, you can set PHP Errors to ON so it'll respond with details about what problems PHP is having. (a quick google search should help with that).

You can simplify my example code with a single known file type and file name to do a quick test. If you need help with it I might be able to connect with you via email to get details and assist. (I remember how eager I was to get this working when I dealt with it -- I feel your pain!!!).

Updated PHP source code for the working solution:

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

    // STRIP OFF THE BEGINNING OF THE BASE64 DATA, BUT DEPENDS ON THE IMAGE TYPE.  
    // I COULD HAVE SIMPLIFIED THIS BUT USED IF STATEMENTS.
    if ( $imgtype === 'png'){
        $img = str_replace('data:image/png;base64,', '', $img);
    };
    if ( $imgtype === 'jpg' || $imgtype === 'jpeg'){
        $img = str_replace('data:image/jpeg;base64,', '', $img);
    };
    if ( $imgtype === 'gif'){
        $img = str_replace('data:image/gif;base64,', '', $img);
    };

    // 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 
    file_put_contents('...path.../'.$fname, $img);


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

Upvotes: 2

Related Questions