donglong1465 2017-09-30 07:53
浏览 140

通过AJAX和PHP传递画布图像dataURL进行解码并保存在服务器端

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.

  • 写回答

1条回答

  • duanduji2986 2017-09-30 08:03
    关注

    $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/';

    评论

报告相同问题?

悬赏问题

  • ¥50 树莓派安卓APK系统签名
  • ¥15 maple软件,用solve求反函数出现rootof,怎么办?
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗