save image from image tag using POST service call using jquery

Question

Am trying to save image from image tag

i have tried like file upload method

but it not working ,

 var request = new XMLHttpRequest();
        var imageUrl = info.ImageUri + '/Upload?imagePath=' + imagePath + '&imageName=' + imagename + '&imageSize=' + imagesize;
        var imageFileUri;
        request.open('POST', imageUrl);
        request.send(imgFile.files[0]);
        request.onreadystatechange = function () {
            if (request.readyState == 4) {
                if (request.status == 200) {

is there any way to save image which is already displaying in the image tag?

Do you mean you want to using the AJAX to upload the image file and also the image info? — Felix Fong, Oct 09 '16 at 05:00
what is your html code?data of your image is base64 encodeing? — ashkufaraz, Oct 09 '16 at 05:10

score 2 · Answer 1 · answered Oct 09 '16 at 05:28

You can get the base64 string from the image.

html:

<img src="http://some/image/source" id="myImage"/>
<canvas id="myCanvas" style="display:none;"/>

js:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("myImage");
ctx.drawImage(img, 10, 10);
var imgString = c.toDataURL();
$.ajax({
    type: "POST",
    dataType: "JSON",
    data: {
       imageString: imgString
    }
    url: "/route/to/store/my/image",
    success: function (data) {
        alert('success');
    }
});

and in server side make an image from base64 string and store it with a file name. :)

while converting base64 string to image it shows error, i working according to this link http://stackoverflow.com/questions/30565687/how-to-convert-base64-string-to-image-binary-file-and-save-onto-server — Suganth G, Oct 09 '16 at 06:56

score 0 · Answer 2 · answered Oct 09 '16 at 05:56

this code is part of jquery ui plugin that i wrote time ago. requires jquery,

var self=this;
    if(!self._chMaxSize(self)){
        dialogMsg("Max file is " + self.maxMb + "Mb", "Error", null);
        return;
    }
    var msg="";

    $.each(self.savingFiles, function(index, file) {
            msg+="<br>Sending... " + file.name + " ";
            var fd = new FormData();
              fd.append("file", file);
              fd.append("idRef", idRef);


              $.ajax({
                      xhr: function() {
                        var xhr = new window.XMLHttpRequest();

                        xhr.upload.addEventListener("progress", function(evt) {
                          if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            percentComplete = parseInt(percentComplete * 100);
                            $("#msg").html(msg +percentComplete + "%");
                          }
                        }, false);

                        return xhr;
                    },
                    type: 'POST',
                    url: 'fileUpload.htm',
                    data: fd,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success:  function (data) {
                        msg+="<br> "+ data.result.msg;
                        $("#msg").html(msg);
                        $("#msg").addClass("ui-state-highlight");
                    }, error: function(data){
                        $("#msg").html("Transfer File Error.");
                        $("#msg").addClass("ui-state-error");
                    }
              });


     });

save image from image tag using POST service call using jquery

2 Answers2