Jquery take picture with camera, upload to server

Question

I have a script which allows me to choose an image, upload as a Blob, then attempts to upload it to a folder on the server

<script src="assets/js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="assets/js/html2canvas.js"></script>
<script type="text/javascript" src="assets/js/jquery.plugin.html2canvas.js"></script>

<a onclick="capture();">Take shot</a>
<div id="target" style="position: relative; width: 300px; height: 300px;">
<input type="file" capture="camera" accept="image/*" id="takePictureField">
<img id="yourimage" style="position: relative; width: 300px; height: 300px;">
</div>

<script type="text/javascript">
    var desiredWidth;

    $(document).ready(function() {
        $("#takePictureField").on("change",gotPic);
        desiredWidth = window.innerWidth;

        if(!("url" in window) && ("webkitURL" in window)) {
            window.URL = window.URL;   
        }

    });

    function gotPic(event) {
        if(event.target.files.length == 1 && 
           event.target.files[0].type.indexOf("image/") == 0) {
            $("#yourimage").attr("src",URL.createObjectURL(event.target.files[0]));
        }
    }

    function capture() {
        $('#target').html2canvas({
            onrendered: function (canvas) {
                var img = canvas.toDataURL("image/png");
                var output = encodeURIComponent(img);
                var cur_path = 'uploads';

                var Parameters = "image=" + output + "&filedir=" + cur_path;
                $.ajax({
                    type: "POST",
                    url: "savePNG.php",
                    data: Parameters,
                    success : function(data)
                    {
                        console.log("screenshot done");
                    }
                }).done(function() {
                    //$('body').html(data);
                });
            }
        });
    }
</script>

php

<?php
$image = $_POST['image'];
$filedir = $_POST['filedir'];
$name = time();
$image = str_replace('data:image/png;base64,', '', $image);
$decoded = base64_decode($image);
file_put_contents("uploads/" . $name . ".png", $decoded, LOCK_EX);
?>

I have tested and am able to snapshot the screen if the image is already there. But when trying to snapshot the screen after the image has been chosen and is on screen, the image file appears in the folder, but the png file is blank.

The image created is a blob, and comes up with 'blob:http' in the img src. Is this an issue with trying to upload the image in the page loaded state, ie: it doesnt see the image url with 'blob:http'?

Does anyone know if FileReader.js will do the job?

EDIT: This is what the image looks like after image upload:

<img id="yourimage" style="position: relative; width: 300px; height: 300px;" src="blob:http%3A//website.com/def20622-14dd-4db8-8749-bb4a85d4f62d">

Possible duplicated, check this out: http://stackoverflow.com/questions/13198131/how-to-save-a-html5-canvas-as-image-on-a-server/13198699#13198699 — fray88, Aug 21 '15 at 10:14
Have read that post before and this is different. When uploading an image it creates a blob which then cannot be uploaded. — Ian Fraser, Aug 21 '15 at 10:19
Anychance you can print the value in $image to see if the base64 is well formed after the encode? — fray88, Aug 21 '15 at 10:54

score 1 · Answer 1 · answered Aug 22 '15 at 18:22

I answered my own question. I needed to use FileReader.js to get this to work properly. Here is the final script which appears to allow an iPad under iOS to take a photo and upload to server:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>
<body>
<style>#fileDisplayArea img { width: 300px; height: 300px; }</style>
<div id="page-wrapper">
    <a onclick="capture();">Take shot</a>
    <h1>Image File Reader</h1>
    <div>
        Select an image file: 
        <input type="file" id="fileInput">
    </div>
    <div id="fileDisplayArea" style="width: 300px; height: 300px; background: aqua;"></div>
</div>
<script type="text/javascript" src="assets/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="assets/js/html2canvas.js"></script>
<script type="text/javascript" src="assets/js/jquery.plugin.html2canvas.js"></script>
<script type="text/javascript" src="assets/js/filereader.js"></script>
<script>
window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
      // Put the rest of the demo code here.

        var file = fileInput.files[0];
        var imageType = /image.*/;

        if (file.type.match(imageType)) {
          var reader = new FileReader();

          reader.onload = function(e) {
            fileDisplayArea.innerHTML = "";

            // Create a new image.
            var img = new Image();
            // Set the img src property using the data URL.
            img.src = reader.result;

            // Add the image to the page.
            fileDisplayArea.appendChild(img);
          }

          reader.readAsDataURL(file); 
          console.log(file);
        } else {
          fileDisplayArea.innerHTML = "File not supported!";
        }

    });
}
function capture() {
    $('#fileDisplayArea').html2canvas({
        onrendered: function (canvas) {
            var img = canvas.toDataURL("image/png");
            var output = encodeURIComponent(img);
            var cur_path = 'uploads';

            var Parameters = "image=" + output + "&filedir=" + cur_path;
            $.ajax({
                type: "POST",
                url: "savePNG.php",
                data: Parameters,
                success : function(data)
                {
                    console.log("screenshot done");
                }
            }).done(function() {
                //$('body').html(data);
            });
        }
    });
}
</script>
</body>
</html>

Jquery take picture with camera, upload to server

1 Answers1