Upload canvas image using codeigniter

user_8336729 0
Viewed 766

I try to upload a canvas image using codeigniter, I have this Ajax code

$.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 () { },
});

and here is the code for saving the post data

$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();
}

please help me to fix or find other way to upload the canvas image.

codeigniter php jquery
1 Answers

See if this works for you?

<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);
user_93369470
Related