Save image from html5 canvas

Question

$("#fileinput").change(function (e) {
     var ctx = document.getElementById('canvas').getContext('2d');
     var img = new Image();
     img.src = URL.createObjectURL(e.target.files[0]);
     img.onload = function () {
          ctx.drawImage(img, 0, 0, img.width, img.height,
             0, 0, canvas.width, canvas.height);}
     });

So far it is working good. Now I'm trying send the image to server as form data via ajax-

var fd = new FormData();
var canvasData = canvas.toDataURL("image/png");
//I tried
var canvasData = canvas.getImageData();
//Gives Uncaught TypeError: canvas.getImageData is not a function(…)
fd.append("InsidePhoto", canvasData);

But it sends nothing. Ajax code has been tested and works fine. I think I can not get the image from canvas. Any idea?

image are not sent by forms. Insert the base64 src in a `input type='hidden' value` and save it. — Alexis, Nov 14 '16 at 12:57
Don't you need canvas.getImageData(x,y,w,h); for the image-data ? https://developer.mozilla.org/de/docs/Web/API/CanvasRenderingContext2D/getImageData — user1511417, Nov 14 '16 at 13:01
Please check this link:-http://weworkweplay.com/play/saving-html5-canvas-as-image/ — Razia sultana, Nov 14 '16 at 13:05
What is the variable `canvas`, in that context? `canvas.toDataURL("image/png");` should work, but you need to make sure you're not using a jQuery object (You can convert it by adding a `[0]` after the jQuery object e.g. `var canvas = $("#canvas")[0]`) — DBS, Nov 14 '16 at 14:39
Don't send a dataURI, send a blob directly : http://stackoverflow.com/questions/34711715/phpjs-how-to-do-fileuploads-in-html-form-as-content-type-multipart-via-js/34713226#34713226 — Kaiido, Nov 14 '16 at 23:25

score 0 · Answer 1 · answered Nov 14 '16 at 14:29

Here's a worked example. Hard to tell quite where your problem lies with the code you've omitted. In the second snippet for instance, we can't tell if canvas is valid.

php code: (postExample.php)

<?php
    //postExample.php
    printf("<img src='%s'/>", $_POST['InsidePhoto']);
?>

html code

<!doctype html>
<html>
<head>
<script>
"use strict";
function newEl(tag){return document.createElement(tag)}
function byId(id){return document.getElementById(id)}

function ajaxPostFormData(url, formData, onSuccess, onError)
{
    var ajax = new XMLHttpRequest();
    ajax.onload = function(){onSuccess(this);}
    ajax.onerror = function(){onError(this);}
    ajax.open("POST",url,true);
    ajax.send(formData);
}


window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
    byId('imgInput').addEventListener('change', onFileInputChanged, false);
}
function onFileInputChanged(evt)
{
    var can = byId('preview'), ctx = can.getContext('2d');
    var img = new Image();
    img.onload = function()
                {
                    can.width = img.width;
                    can.height = img.height;
                    ctx.drawImage(img,0,0);

                    var fd = new FormData();
                    var canvasData = can.toDataURL("image/png");
                    fd.append("InsidePhoto", canvasData);
                    ajaxPostFormData('postExample.php', fd, onSuccess, onError)
                }

    var dataSrc = URL.createObjectURL(this.files[0]);
    img.src = dataSrc;

    function onSuccess(ajax)
    {
        console.log(ajax.response);
        var div = newEl('div');
        div.innerHTML = ajax.response;
        document.body.appendChild( div.childNodes[0] );
    }
    function onError(ajax)
    {
        console.log(ajax.response);
    }
}
</script>
<style>
</style>
</head>
<body>
    <input type='file' id='imgInput'/>
    <canvas id='preview'></canvas>
</body>
</html>

score 0 · Answer 2 · answered Nov 14 '16 at 14:33

You need to use CanvasRenderingContext2D's getImageData(x, y, width, height) function to get the canvas' image data not the canvas element's.

The first 2 values are the starting positions, set these to 0 to start from the top-left edge.

The second 2 values are the width and height of the area, so set these to canvas.width and canvas.height respectively.

Save image from html5 canvas

2 Answers2

php code: (postExample.php)

html code