render an image binary data into a img or canvas tag

Question

I have a route which I use to request images, something like this:

/api/image

it returns the body the file data, something like:

����JFIF��C��C��� ��    
�����+�}Yϭ�F39M>���������>���;��ˋ��uXʽ�w�ڤx\-[2g��k�S���H���m
[�V?[_W����#��v��}6�[��F�F�%����n�...

what I'm trying to do is something like this:

then i did this:

code:

var canvas = $('canvas');
var blob = new Blob([file], {type: 'image/png'});
var url = URL.createObjectURL(blob);
var img = new Image;
var ctx = canvas.getContext('2d');

$(img).on('load',function(event) {
   ctx.drawImage(img, 0, 0);
   URL.revokeObjectURL(url);
}).each(function(){
     if(this.complete) { $(this).load() }
});
img.src = url;

I also appended the file directly to the image source attribute like:

img.src = 'data:image/png;base64,' + file

but it didn't work

What I get is that the resource is not found and it throws a 404 error:

> GET blob:http://localhost:3000/2a86de11-b565-4578-8ec1-2c20cbdae739 404 (Not Found)

I'm a bit confused, what am I doing wrong?

edit: i just did this:

var blob = new Blob([file], {type: 'image/png'});
var reader = new FileReader();

reader.onload = function (e) {
  suggestion.img.attr('src', e.target.result);
};
reader.readAsDataURL(blob);

but it doesnt show the image either

enhzflep · Accepted Answer

Well, the top data you've shown is binary and as such, just prepending the dataURL stuff wont work. You'll need to either do something different with the binary data or send back actual base64 encoded data instead.

Here's a compound example. It shows:

reading of a file on disk
displaying it
uploading it
creating an altered copy with GD unless it's an svg
sending it back to the browser as binary data
catching it
transforming it into a blob and then a dataURL
before finally setting the src attribute of an image with it.
base64 encoding it, adding the dataURL stuff and outputtting it.
retrieving a off-site or cross-protocol image and drawing on a canvas without tainting it.

base64.php

buffer($data);
        Header("Content-Type: $mimeType");                  // use the currently detected mime-type
        echo $data;
        die;
    }

    if (isset($_FILES['upload']) == true)
    {
        $alterResult = true;

        // GD wont load svgs :(
        if (strcmp(trim($_FILES['upload']['type']),"image/svg+xml") == 0)
            $alterResult = false;

        // expecting a form element with the type of 'file' and the name of 'upload' - accepting 1 file max
        $data = file_get_contents( $_FILES['upload']['tmp_name'] );

        // draw copy of image, invert the colours, guassian blur 5 times, draw inverted,bluury image beside unaltered copy
        if ($alterResult == true)
        {
            $mImage = imagecreatefromstring ($data);
            $output = imagecreatetruecolor(imagesx($mImage) * 2, imagesy($mImage));
            imagesavealpha ( $mImage , true);
            imagesavealpha ( $output , true);
            imagecopy($output, $mImage, 0, 0, 0, 0, imagesx($mImage) - 1, imagesy($mImage) - 1);
            imagefilter($mImage,IMG_FILTER_NEGATE);
            imagefilter($mImage,IMG_FILTER_GAUSSIAN_BLUR);
            imagefilter($mImage,IMG_FILTER_GAUSSIAN_BLUR);
            imagefilter($mImage,IMG_FILTER_GAUSSIAN_BLUR);
            imagefilter($mImage,IMG_FILTER_GAUSSIAN_BLUR);
            imagefilter($mImage,IMG_FILTER_GAUSSIAN_BLUR);
            imagecopy($output, $mImage, imagesx($mImage), 0, 0, 0, imagesx($mImage) - 1, imagesy($mImage) - 1);
            Header("Content-Type: image/png");
            imagepng($output);
            imagedestroy($mImage);
            imagedestroy($output);
            die;
        }
        // it's an svg, so just return byte-for-byte what we received
        else
        {
            $finfo = new finfo(FILEINFO_MIME);
            $mimeType = $finfo->buffer($data);
            $mimeType = preg_replace("/text\/plain/", "image/svg+xml", $mimeType);  // svgs are wrongly reported as text files
            Header("Content-Type: $mimeType");                  // use the currently detected mime-type
            echo $data;
            die;
        }
    }
?>






    
    

    
    

    
        
    
    
        

        Before upload
    
    
        

        After upload/mod/download

render an image binary data into a img or canvas tag

Answers (2)

Related Questions