Save Canvas using Codeigniter

Question

I created HTML5 Canvas Drawing App using this video tutorial series.Now I want to save it as an image in database using codeigniter.Also I want to allow user to enter name for that image before saving it in database.I'm new to codeigniter.Can anyone help me with this.Here what I have done so far

html code .......................

<div class="col-lg-3">
      <div id="toolbar">    
          <div id="rad">
              Radius <span id="radval">10</span>
                  <div id="decrad" class="radcontrol">-</div>
                  <div id="incrad" class="radcontrol">+</div>
                  <div id="colors"></div>
                  <div id="save">Save</div>
          </div>
      </div>
          <canvas id="canvas"></canvas>
</div>

javascript code for saving .....................................

var saveButton=document.getElementById('save');
    saveButton.addEventListener('click',saveImage);
    function saveImage(){
        var data=canvas.toDataURL();
        var request=new XMLHttpRequest();

        request.onreadystatechange=function(){
            if(request.readyState==4&& request.status==200){
               var response= request.responseText;
                console.log(response);
            }
        }

        request.open('POST','http://localhost/cafdc/MainController/save',true);
        request.setRequestHeader('Content-type','application/x-www-form-urlencoded');
        request.send('img='+data);
    }

Answer 1

CodeIgniter has some built in library for image manupilation like cropping,resizing etc.You have save image in name or it's path in database not image has to be saved in database it's not prefered and is bad pratice.

In order to work in CI you have to create controller like this

<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');

ini_set("display_errors",1);



    class Image_upload extends CI_Controller {

function __construct()
     {
          // Call the Model constructor
          parent::__construct();
          $this->load->helper(array('form', 'url'));
          $this->load->model('your_model');



     }


public  function index() {

        $this->load->view('header');
        $this->load->view('your_view');

    }// index function ends

function doupload() {

//set preferences
        $config['remove_spaces']=TRUE;
        $config['encrypt_name'] = TRUE; // for encrypting the name
        $config['upload_path'] = LARGEPATH;
        $config['allowed_types'] = 'jpg|png|gif';
        $config['max_size']    = '78000';

//load upload class library
        $this->load->library('upload', $config);

        //$this->upload->do_upload('filename') will upload selected file to destiny folder
        if (!$this->upload->do_upload('filename'))
        {
            // case - failure
            $upload_error = array('error' => $this->upload->display_errors());
            $this->load->view('some_view', $upload_error);
        }
        else
        {
            // case - success
        }

//model

    class Your_Model extends CI_Model {

        //table name
        private $file = 'files';   // files    

        function save_files_info($files) {
            //start db traction
}

And above your code will be view which is loaded in controller Further can give you reference

http://www.tutsmore.com/tutorials/codeigniter-image-upload-with-mysql/ start from here