通过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个回答



$ upload_dir </ code>这里是绝对路径。</ p>

如果你的 public </ code>文件夹与脚本位于同一文件夹中,然后它应该是 $ upload_dir ='public / images /'</ code>; </ p>
</ div>

展开原文

原文

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

duanbo1659
duanbo1659 你能查看创建文件的内容吗? 它是空的还是包含任何数据? 您可以使用文本编辑器打开它以查看其内容。
大约 3 年之前 回复
douhuang1973
douhuang1973 谢谢! 现在它正在节省; 但试图打开时它没有加载...
大约 3 年之前 回复
duanjuebin2519
duanjuebin2519 尝试$ upload_dir ='.. / .. / .. / public / images /'。目标是让您的PHP脚本知道公共/图像的确切位置。 默认情况下,它使用脚本的文件夹resources / assets / php作为起始位置。
大约 3 年之前 回复
doude5860
doude5860 您的设置中是公共资源根文件夹吗?
大约 3 年之前 回复
doudang1890
doudang1890 没有; public /是一个单独的(与resources /相同的级别)目录
大约 3 年之前 回复
doucuo8618
doucuo8618 您是否将文件保存到resources / assets / php / public / images中?
大约 3 年之前 回复
dscbxou1900343
dscbxou1900343 更新; 仍然遇到相同的问题(不保存图像)
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐