want to store the processed image into the server itself rather than downloading it to local system using fengyuanchen jquery cropper plugin

Question

I am using fengyuanchen jquery cropper plugin for image manipulation in one of my project. That plugin is intended to download the image to local system after image processing. Actually i want to store the processed image into the server itself rather than downloading it to local system. For that i need to get the URI data of the processed image in a textarea. What modification i had to do in the plugin code to generate the URI data instead of downloading?

There are three files in the project named index.php, cropper.js, and main.js

The download button code in index.php is as follows:

<div class="btn-group btn-group-crop docs-buttons" style="margin-top:10px;"> 
  <a class="btn btn-primary" data-method="getCroppedCanvas" id="download">Generate your Facebook Cover Photo</a> 
</div>

The corresponding jquery code snippet which generates the download data in main.js is as follows:

case 'getCroppedCanvas':
if (result) {
    // Bootstrap's Modal
    if (!$download.hasClass('disabled')) {
       $download.attr("href", result.toDataURL('image/jpeg'));  
    }
}

what modification in this code will generate the URI data?

Possible duplicate of [How to save a HTML5 Canvas as Image on a server](http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server) — gre_gor, Sep 08 '16 at 17:23

score 0 · Answer 1 · answered Sep 08 '16 at 18:00

0

This is the sample

dataURI converted into blob. send to it as blob file save it on server then download the image DataURI to BLOB

function dataURItoBlob(dataURI) {
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

answered Sep 08 '16 at 18:00

Karthikeyan Sekar

223
3
13

but where can i write this function? – Mahesh A R Sep 08 '16 at 18:35
what change i need to do in main.js and index.php? – Mahesh A R Sep 08 '16 at 18:37
this is a **client side** function. – Karthikeyan Sekar Sep 08 '16 at 18:38
if you want to upload the image or client side download the image – Karthikeyan Sekar Sep 08 '16 at 18:42
right now i can download the image to local system as per the fengyuanchen jquery cropper plugin. im not so familiar with jquery. most of the thread here describes about generating DATA URI using canvas.toDataURL("image/jpeg"); but in this plugin it is given as result.toDataURL("image/jpeg"); its confusing. you worked with this plugin? – Mahesh A R Sep 08 '16 at 18:45
this is the github repository of the plugin – Mahesh A R Sep 08 '16 at 18:46

want to store the processed image into the server itself rather than downloading it to local system using fengyuanchen jquery cropper plugin

1 Answers1