使用 codeigniter 上传画布图像答案

【问题标题】：Upload canvas image using codeigniter使用 codeigniter 上传画布图像
【发布时间】：2018-01-23 05:38:17
【问题描述】：

我尝试使用 codeigniter 上传画布图像，我有这个 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();
}

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

【问题讨论】：

真正的问题是什么？ stackoverflow.com/help/how-to-ask
当我尝试上传时，结果是“您没有选择要上传的文件。”
您是否尝试在控制器中调试 $imgdata 变量？你确定它不是 null 吗？
为什么不只用file_put_contents($filepath, base64_decode($img));来上传图片呢？我已经在我的一项类似任务中使用了它并且它有效。

标签： php jquery codeigniter

【解决方案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);

【讨论】：