Using Raw Image Data from Ajax Request for Data Uri

Sending URI data via AJAX POST

I found an alternative to transfer the data.

Using this solution for converting base64 code to blob

function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  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
  });
}

I change the code to this:

formData = new FormData();
var blob = dataURItoBlob('data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfO..');

formData.append('imagedata', blob, 'temp.png');

var request = new XMLHttpRequest();
request.open("POST", "test.php?reportid=1");
request.send(formData); 

And then on the PHP page i receive data via $_FILES[];

$file = $_FILES['imagedata'];
$filetype = $file['type'];
$blob = file_get_contents($file['tmp_name']);

After that, can I insert it into the MySQL database.

Well, thanks anyway for the replies and suggestions :)

Use raw data from ajax request as background image

Have you also considered base64? For example, Display PNG image as response to jQuery AJAX request

On PHP:

<?php
    $img = file_get_contents('someimage.png');
    $imb64 = base64_encode($img);  
    header('Content-Type: image/png');
    echo $imb64;
    exit;
?> 

On Javascript:

    $.ajax({
        type: "POST",
        url:'myimage.php',
        contentType: "image/png",
        data: {},
        success: function(data){
            $('#myimage').css('background-image', 'url(' + 'data:image/png;base64,' + data+ ')');

        }
    });

Of course you need to change the above, its just a simple example.? Not tested as wrote/modified it to base basics

Of course you dont need to use jquery, this is just to shorten the example.. You should be able to use your xhr

Resources:

https://en.wikipedia.org/wiki/Data_URI_scheme

https://css-tricks.com/data-uris/

This method can be very handy, allows you to control hot-linking and show place holders for missing files along with the ability to control cache with a e-tag...

----------Im feeling nice-------------

    function cacheByModified($file) {
        if ($GLOBALS['VTIS']['cache']!==false) {
            $ts = filemtime($file);
            $gmt_mtime = gmdate('r', $ts);
            header('ETag: "'.md5($ts.$file).'"');
            header('Last-Modified: '.$gmt_mtime);
            header('Cache-Control: public');
            // IF HAS HEADERS
            if(isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) || isset($_SERVER['HTTP_IF_NONE_MATCH'])) {
                if ($_SERVER['HTTP_IF_MODIFIED_SINCE'] == $gmt_mtime || str_replace('"', '', stripslashes($_SERVER['HTTP_IF_NONE_MATCH'])) == md5($ts.$file)) {
                    header('HTTP/1.1 304 Not Modified');
                    if (extension_loaded("zlib") && (ini_get("output_handler") != "ob_gzhandler")) {
                        ini_set("zlib.output_compression", 1);
                    }   
                    exit;
                }
            }
        }
    }

    // Cacher.. send normal headers, check if found.. if are.. return 304 and exit.
    cacheByModified("filename.ext or some other unique id here per file..");

    // Enable gzip before sending the file
    if (extension_loaded("zlib") && (ini_get("output_handler") != "ob_gzhandler")) {
        ini_set("zlib.output_compression", 1);
    }

    // Obtain the file itself
    $img = file_get_contents('someimage.png');
    $imb64 = base64_encode($img);  

    // Send main header and output
    header('Content-Type: image/png']);
    echo $imb64;
    exit;

The above / attached code is a quick extract of my cache function, i've not tested it out side of the project as only doing this quick.. But should work if i am not mistaken.

Get Image/PNG with an AJAX Request

I have found this answer, and it works perfectly :

 var xhr = new XMLHttpRequest();
        xhr.open( "GET", site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/, true );

        // Ask for the result as an ArrayBuffer.
        xhr.responseType = "arraybuffer";

        xhr.onload = function( e ) {
          // Obtain a blob: URL for the image data.
          var arrayBufferView = new Uint8Array( this.response );
          var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
          var urlCreator = window.URL || window.webkitURL;
          var imageUrl = urlCreator.createObjectURL( blob );
          map.src = imageUrl;
          map.flag=false;
        };

        xhr.send();

Credits : Jan_Miksovsky http://jsfiddle.net/jan_miksovsky/yy7zs/

EDIT : with AngularJS $http :

 $http.get(site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/" + $scope.viewmodel.cmap, {responseType: "arraybuffer"}).
            success(function(data) {

              var arrayBufferView = new Uint8Array( data );
              var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
              var urlCreator = window.URL || window.webkitURL;
              var imageUrl = urlCreator.createObjectURL( blob );
              map.src = imageUrl;
              map.flag=false;
            }).
            error(function(data, status) {
              console.log( $scope.info = "Request failed with status: " + status);
            });

---

Related Topics