Pass canvas image dataURL to be decoded and saved server-side via AJAX and PHP

Question

Client-side, an image is created (canvas.toDataURL) from the contents of a div:

        ...                
                    var img = new Image();
                    var dataUrl;
                    img.onload = function() {
                        //alert($('#top-content').width());
                        context.canvas.width = $('#divID').find('svg').width();
                        context.canvas.height = $('#divID').find('svg').height();
                        var width2heightratio = context.canvas.width / context.canvas.height;
                        //return;
                        context.drawImage(img, 0, 0);
                        // freeing up the memory as image is drawn to canvas
                        DOMURL.revokeObjectURL(url);

                        if (isIEBrowser()) { // Check of IE browser
                            var svg = $('#divID').highcharts().container.innerHTML;
                            canvg(canvasIE, svg);
                            dataUrl = canvasIE.toDataURL();
                        }
                        else{
                            dataUrl = canvas.toDataURL('image/png');
                        }
                        var dataString = 'img=' + dataUrl;
                        $.ajax({
                            url: "resources/assets/php/reports_generate_pdf.php",
                            type: "POST",
                            dataType:'json',
                            data: dataString,
                            cache: false,
                            success: function(data){

                                alert('success');

                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                $('#MsgDiv').html('XMLHttpRequest: ' + XMLHttpRequest + '<br>textStatus: ' + textStatus + '<br>errorThrown: ' + errorThrown);
                            }
                        })
                    };
                    img.src = url;

            function isIEBrowser(){
                var ieBrowser;
                var ua = window.navigator.userAgent;
                var msie = ua.indexOf("MSIE ");

                if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // Internet Explorer
                {
                    ieBrowser = true;
                }
                else  //Other browser
                {
                    console.log('Other Browser');
                    ieBrowser = false;
                }

                return ieBrowser;
            };
    ...

PHP:

<?php

$img= $_POST['img']; //data 'data:image/png;base64,~;
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$upload_dir='/public/images/';
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);

?>

I'm seeking to be able to save the image server-side in the /public/images/ directory. Any advice is appreciated.

Answer 1

$upload_dir is an absolute path here.

If your public folder is in the same folder as script's then it should be $upload_dir='public/images/';