Can't save full canvas image to server

Question

I am having a problem saving a canvas image to my server. I have tried multiple things and the only thing that seems to work right now is using one suggestion I found looking around which was to fill a hidden text field in a form and submit it to my php page that can take the post and convert it and save it on the server. While this does work, it is only posting 1/8th of the image.

When I check the toDataURL() contents it is the same amount of data that is passed on to the PHP page so I'm not sure where the image is getting chopped up and the image size only ends up about 380kb.

Here is what I have:

Javascript:

var canvas = document.getElementById("myCanvas");
var image = canvas.toDataURL();
document.getElementById("savecarddata").value = image;

PHP

$upload_dir = 'mydirectory'; 
$img = $_POST['savecarddata'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir.rand().".png";
$success = file_put_contents($file, $data);

This does save the image but only the top of it. I've tried ajax but I can't seem to get it to work right so this was the next best solution for me. I would love any help!

Thanks in advance!

I did find that if I reduce the image size I can get the whole image to save but the resolution is awful and text isn't readable. — user3817119, Mar 09 '16 at 00:00
This might help: http://stackoverflow.com/a/13198699/1599191 — Graham Walters, Mar 09 '16 at 13:13

exceptional exception · Answer 1 · 2016-03-10T12:36:35.350

1

This is how I did it:

Using ajax

 var canvas = document.getElementById("myCanvas");
    var canvasData = canvas.toDataURL('image/png');
    var ajax = new XMLHttpRequest();            
    var postdata='saveimage.php';
    ajax.open('POST', postdata, false);
    ajax.setRequestHeader('Content-Type', 'application/upload');
    ajax.send(canvasData);

then in saveimage.php

if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
$imgdata = $GLOBALS['HTTP_RAW_POST_DATA'];

    $filteredData=substr($imgdata, strpos($imgdata, ",")+1);// Remove the headers (data:,) part.
    $data = base64_decode($filteredData);//decode data
    $im = imagecreatefromstring($data); //create image
    if ($im !== false) { 
        imagesavealpha($im, true);
        imagepng($im, "result.png",9); 
    }
    else {
        echo 'An error occurred.';
    }

    }

you can also pass arguments as GET variables in the ajax

var postdata="saveimage.php?imagename=" + document.getElementById("someFeild").value;

edited Mar 10 '16 at 12:36

answered Mar 09 '16 at 13:43

exceptional exception

527
7
26

For some reason no matter how much I try ajax I can't seem to get the code right. I appreciate the suggestion. I'm not sure if I am just not setting the path correctly or what. I have a saveimage.php file with that code and the appropiate tags and the javascript placed on my webpage. I am trying to get the path correct to either the saveimage file and the upload folder. I think that might be the problem. I will have to toy around with that. Can I put the full URL in those spots to lead directly to where I want the script to go? – user3817119 Mar 09 '16 at 22:06
I've edited my answer. My apologies, this was largely copied from my site's code in which I use a library built on the canvas element. The `toDataURL('image/png')` method requires a canvas object (which I had previously as `layer`). – exceptional exception Mar 10 '16 at 12:40

score 0 · Answer 2 · answered Mar 09 '16 at 13:05

0

I don't know if it's relevant but check how you set the canvas width and height. You should set them inside the canvas tag.

<canvas width='yourValue' height='yourValue'></canvas>

answered Mar 09 '16 at 13:05

Devernay Stéphane

151
1
7

I know that the canvas is set very large but that's primarily because if I do it smaller (ie 300x420), while I do save the whole image, it is blurry so I have been enlarging it and scaling it down using the div (.25) that it is in to make it look the right size. Unfortunately this doesn't allow me to save the image that large (1200X 1680) – user3817119 Mar 09 '16 at 21:56

Can't save full canvas image to server

2 Answers2