如何使用codeigniter（由javascript代码捕获的图像）将捕获的图像保存在文件夹中？

Question

大家好，我已经编写了代码来在单击按钮时捕获 div 标签的图像，javascript 代码将捕获该图像，但我想使用 codeigniter 保存捕获的图像，但我们不能使用默认的 codeigniter 上传方法，因为只能上传适用于创建一个对象的输入类型文件，但在这里通过 javascript 获取捕获的图像，所以我想将该图像上传到文件夹中，所以请告诉我如何使用 codeigniter 来做到这一点。下面我提到了我的代码。

Html code....
<div id="target" style="border: 1px solid #CCC;padding: 5px;margin: 5px;">
    <div>
        <p>PHP is a server-side scripting language designed primarily for web development.</p>
    </div>
</div>
 <form method="POST" enctype="multipart/form-data" id="form1">
        <input type="hidden" name="img_value" id="img_value" value="" />
    </form>
<input type="submit" value="Screenshot" onclick="capture();" />

javascript代码捕获图像并调用ajax保存图像

<script type="text/javascript">
        function capture() {
            $('#target').html2canvas({
                onrendered: function (canvas) {
                    //Set hidden field's value to image data
                    $('#img_value').val(canvas.toDataURL("image/png"));
                    //Submit the form1
                    var hid_img=$("#img_value").val();
                    $.ajax({
                        url: "<?= base_url('controller/save_img') ?>",
                        type: "POST",
                        data: {
                            hid_img: hid_img,
                        },
                        success: function (response) {

                            $(".show_img").html(response);

                        }
                    });
                }
            });
        }
    </script>

codeigniter 的控制器方法中的代码用于将图像保存在文件夹中...

public function save_img() {

$data = $this->input->post($hid_img);
    $file = md5(uniqid()) . '.png';

    // remove "data:image/png;base64,"
    $uri =  substr($data,strpos($data,",")+1);

    // save to file in uploads folder of codeigniter
    file_put_contents('./uploads'.$file, base64_decode($uri));

}
to store image in table
$res=$this->db->insert('demo',array('img'=>base_url('uploads/').$file));
    $detail = $this->db->select('*')->from('demo')->where('id', $this->db->insert_id())->get()->row();
    echo '<img src="'.base_url('uploads/').$detail->message.'" style="width:500px;"/>';

Answer 1

正如您正确阐明的那样，上传库仅适用于 file 输入，而不适用于 base64 流。所以你不能使用它。

使用您的方法，您的代码中有一些错误需要解决：

1. $this->input->post($hid_img) 应该是 $this->input->post('hid_img')
2. ./uploads 应该有一个结束斜线：'./uploads/'.$file

Answer 2

使用此示例。它运作良好。首先，如果您检查上传库。

 $config = array(
        'upload_path' => "./uploads/",
        'allowed_types' => "gif|jpg|png|jpeg|pdf",
        'overwrite' => TRUE,
        'max_size' => "2048000", // Can be set to particular file size , here it is 2 MB(2048 Kb)
        'max_height' => "768",
        'max_width' => "1024"
        );
        $this->load->library('upload', $config);


        if(!$this->upload->do_upload('taskcat_img'))  
        {  
            echo $this->upload->display_errors();  
        }  
        else  
        {                   
            $data = $this->upload->data();  
            $imgval = array('success' => 'success' ,'data_image' => $data["file_name"]);  
            echo json_encode($imgval );
}