Question

我有一个脚本，允许我选择图像，上传为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'的图像网址？

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

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

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

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

Jquery用相机拍照，上传到服务器

1 个答案: