用户
 找回密码
 入住 CI 中国社区
搜索
查看: 129|回复: 7
收起左侧

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

[复制链接]
发表于 2018-6-6 16:09:01 | 显示全部楼层 |阅读模式
做了一个项,现在碰见一个问题就是在处理头象时要上传图片,上传图片后要进行裁剪,裁剪后的小图预览是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;
    }
}         

?>

请高手指点一下,如何做?
或有其它方法也可以介绍一下。谢了
发表于 2018-6-6 16:17:47 | 显示全部楼层
你是说你的 $_POST['str'] 里拿不到 base64 的内容?是空字符串还是什么?ajax post 用浏览器调试器看过吗?先确定浏览器端是不是真的 post 了内容,再看 php 有没有拿到值。
 楼主| 发表于 2018-6-6 16:36:13 | 显示全部楼层
<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  得不到!@
发表于 2018-6-6 16:53:24 | 显示全部楼层
本帖最后由 basstk 于 2018-6-6 16:55 编辑

前天刚好也是类似问题,我的做法是将处理后的图片转为blob格式再处理.不知对你有帮助没有.
 楼主| 发表于 2018-6-6 16:57:11 | 显示全部楼层
楼上能不能给个链接!
发表于 2018-6-6 17:06:49 | 显示全部楼层
BASE64 转 blob 后,传递 这个Blob就可以了,网上搜索一大堆
发表于 2018-6-6 17:19:37 | 显示全部楼层
paivisual 发表于 2018-6-6 16:36
//document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
var clipArea ...

我就是说让你看一下调试器或者抓包看一下,你到底有没有把 base64 传到服务器?截图我看一下。
 楼主| 发表于 2018-6-8 07:38:25 | 显示全部楼层
谢谢楼上,我把dataType: 'JSON', 改成了TEXT,就可以了@

本版积分规则