使用CodeIgniter上传画布图像

Question

我尝试使用 Codeigniter 上传 canvas 图像，这是我的 Ajax 代码：

$.ajax({
   url: '/gifs/savepreview',
   type: 'POST',
   beforeSend: function (xhr) {
       xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
   },
   data: 'imgdata=' + canvas.toDataURL('image/gif'),
   success: function () { },
   error: function () { },
});

这里是保存帖子数据的代码：

$imgdata = $this->security->xss_clean($this->input->post('imgdata'));

$temp_file_path = tempnam(sys_get_temp_dir(), 'tempimage'); 
$img = str_replace('data:image/png;base64,', '', $imgdata);
$img = str_replace('[removed]', '', $img);
$img = str_replace(' ', '+', $img);
file_put_contents($temp_file_path, base64_decode($img));
$image_info = getimagesize($temp_file_path); 
$_FILES['userfile'] = array(
    'name' => uniqid().'.'. str_replace("image/", '', $image_info['mime']),
    'type'  => $image_info['mime'],
    'tmp_name' => $temp_file_path,
    'error' => UPLOAD_ERR_OK,
    'size'  => filesize($temp_file_path),
);

$config['upload_path'] = 'assets/uploads/';
$config['remove_spaces'] = TRUE;
$config['allowed_types'] = "*";
$config['max_size'] = "2048000";
$config['overwrite'] = TRUE;
$config['file_name'] = "canvas-image";
$this->load->library('upload', $config);
$this->upload->initialize($config);
if ($this->upload->do_upload('userfile')){
    return "success";
}else{;
    echo $this->upload->display_errors();
}

请帮我修复或寻找其他方法上传画布图像。

- jaycel clarkoutsourcing

---

实际问题是什么？https://stackoverflow.com/help/how-to-ask - wally

当我尝试上传时，结果显示“您没有选择要上传的文件”。 - jaycel clarkoutsourcing

你尝试过在控制器中调试$imgdata变量吗？你确定它不是空的吗？ - Mr.Gandhi

为什么不只使用 file_put_contents($filepath, base64_decode($img)); 来上传图片呢？我在类似的任务中使用过这个方法，它很有效。 - Jignesh Bhavani

Answer 1

看看这个对你有没有用？

<canvas id="cnvs"></canvas>
<button id="upld"></button>
$(document).on('click', '#upld', function () {
    var form_data = new FormData();
    var file;
    file = $('#cnvs')[0].toDataURL('image/png');
    file = file.replace(/^data:image\/(png|jpg|jpeg);base64,/, '');
    form_data.append('photo', file);
    $.ajax({
        url: 'mycontroller/myfunc',
        type: 'POST',
        dataType: 'JSON',
        data: form_data,
        processData: false,
        contentType: false,
        async: false,
        cache: false,
        beforeSend: function () {
             ...
        },
        success: function (data) {
             ...      
        },
        error: function (xhr, ajaxOptions, thrownError) {
             ...
        }
    });
});

PHP

$imgData = base64_decode($this->input->post('photo', TRUE));

/* calculate the approximate file size */
$fileSize = (int) (strlen(trim($imgData, '=')));

if ($fileSize > /* any value */) {
    /* show error message for big files */
}

$path = 'assets/uploads/file.png'; /* my path and file name with extension */
if (file_exists($path)) {
    unlink($path);
}
/* create image */
file_put_contents($path, $imgData);

- POPI