ajax base64 CI获取参数后处理的一个小问题

paivisual

做了一个项，现在碰见一个问题就是在处理头象时要上传图片，上传图片后要进行裁剪，裁剪后的小图预览是BASE64的方式存在，现在想把这个在服务器上生成图片，生成图片就是把这个BASE64数据进行传递，传递过程中要用到AJAX,但是就是得不到数据。

裁剪完成后，得到一个DATAURL，这个要能过AJAX传递到 /uploadimg/index，
        clipFinish: function(dataURL) {
                 // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
            data=encodeURIComponent(dataURL);
            $.ajax({
           url: '/uploadimg/index/',
           data: {'str':data},
           type: 'post',
           dataType: 'JSON',
        })
        alert(dataURL);

uploadimg/index 如下：
<?php

if (! defined ( 'BASEPATH' ))
        exit ( 'No direct script access allowed' );
class Uploadimg extends CI_Controller {
        function __construct() {
                parent::__construct ();
        }
        public function index() {
                if ($this->session->userdata ( 'manage_role' ) == '') {
                        header ( "Content-Type:text/html;charset=utf-8" );
                        echo '<script>alert("请登录 ！");';
                        echo 'window.location.href="' . site_url ( 'index' ) . '";</script>';
                        exit ();
                }
                if ($this->session->userdata ( 'manage_role' ) != '10') {
                        header ( "Content-Type:text/html;charset=utf-8" );
                        echo '<script>alert("您没有此操作权限 ！");';
                        echo 'window.location.href="' . site_url ( 'index' ) . '";</script>';
                        exit ();
                }
               
            $php_path = dirname(__FILE__) . '/';
                 $php_url = dirname($_SERVER['PHP_SELF']) . '/';
                //文件保存目录路径
                 $save_path = $php_path . '/../../public/attached';
                
                echo $php_path."<br>";
                echo $php_url."<br>";
                 echo $save_path."<br>";
                  
        $base64_image_contentx = $_POST["str"];;
            $base64_image_content = htmlspecialchars($base64_image_contentx);
        base64_image_content($base64_image_content,$save_path);
               header ( "Content-Type:text/html;charset=utf-8" );
                        echo '<script>alert('base64_imaghe_content');';
                        echo 'window.location.href="#";</script>';
                        exit ();
        }
}
function base64_image_content($base64_image_content,$path){
    //匹配出图片的格式
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
        $type = $result[2];
        $new_file = $path."/".date('Ymd',time())."/";
        if(!file_exists($new_file)){
            //检查是否有该文件夹，如果没有就创建，并给予最高权限
            mkdir($new_file, 0700);
        }
        $new_file = $new_file.time().".{$type}";
        if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
            return '/'.$new_file;
        }else{
            return false;
        }
    }else{
        return false;
    }
}         

?>

请高手指点一下，如何做？
或有其它方法也可以介绍一下。谢了

Hex

你是说你的 $_POST['str'] 里拿不到 base64 的内容？是空字符串还是什么？ajax post 用浏览器调试器看过吗？先确定浏览器端是不是真的 post 了内容，再看 php 有没有拿到值。

paivisual

<script type="text/javascript">
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var clipArea = new bjj.PhotoClip("#clipArea", {
        size: [300, 400],// 截取框的宽和高组成的数组。默认值为[260,260]
        outputSize: [428, 321], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
        outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
        file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
        view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
    photo: "#view",
        ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
        loadStart: function() {
                // 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
                $('.cover-wrap').fadeIn();
                console.log("照片读取中");
        },
        loadComplete: function() {
                 // 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
                console.log("照片读取完成");
        },
        //loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
        clipFinish: function(dataURL) {
                 // 裁剪完成的回调函数。this指向图片对象，会将裁剪出的图像数据DataURL作为参数传入
            data=encodeURIComponent(dataURL);
            $.ajax({
           url: '<?php echo site_url('uploadimg/index/');?>',
           data: {'str':data},
           type: 'post',
           dataType: 'JSON',
        })
        alert(dataURL);
                $('.cover-wrap').fadeOut();
            $('#view').css('background-size','100% 100%');
        }
});
//clipArea.destroy();
</script>

这个执行正常，POST过去的dataURL  得不到！@

basstk

前天刚好也是类似问题,我的做法是将处理后的图片转为blob格式再处理.不知对你有帮助没有.

paivisual

楼上能不能给个链接！

basstk

BASE64 转 blob 后,传递 这个Blob就可以了,网上搜索一大堆

Hex

paivisual 发表于 2018-6-6 16:36
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var clipArea ...

我就是说让你看一下调试器或者抓包看一下，你到底有没有把 base64 传到服务器？截图我看一下。

paivisual

谢谢楼上，我把dataType: 'JSON', 改成了TEXT，就可以了@