jquery用相机拍照，上传到服务器答案

【问题标题】：Jquery take picture with camera, upload to serverjquery用相机拍照，上传到服务器
【发布时间】：2015-08-23 02:22:43
【问题描述】：

我有一个脚本允许我选择一个图像，作为 Blob 上传，然后尝试将其上传到服务器上的文件夹

<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);
?>

如果图像已经存在，我已经测试并且能够对屏幕进行快照。但是当图像被选择并显示在屏幕上后尝试快照屏幕时，图像文件出现在文件夹中，但 png 文件是空白的。

创建的图像是一个 blob，并在 img src 中提供了 'blob:http'。这是尝试在页面加载状态下上传图片的问题吗，即：它没有看到带有'blob：http'的图片url？

有谁知道 FileReader.js 是否可以完成这项工作？

编辑：这是图片上传后的样子：

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

【问题讨论】：

可能重复，检查一下：stackoverflow.com/questions/13198131/…
之前读过那篇文章，这次有所不同。上传图像时，它会创建一个 blob，然后无法上传。
是否可以打印 $image 中的值以查看编码后 base64 格式是否正确？
已经更新了我上面的问题。

标签： jquery ios html2canvas

【解决方案1】：

我回答了我自己的问题。我需要使用 FileReader.js 让它正常工作。这是最终的脚本，它似乎允许 iOS 下的 iPad 拍照并上传到服务器：

<!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>

【讨论】：