Question

我一直在尝试设置一个应用，以允许用户在上传之前捕获照片并在画布上预览。到目前为止，我已经能够捕获图像并放置到画布上（android chrome），但是当谈到使用safari的ios时，我没有这样的运气（试过Ipad，5C）

这是我已经设法拼凑的脚本，感谢stackoverflow社区的帮助（非常感谢）

我遇到的问题是，当我选择所选的图像时，它应该显示在我的iframe中（就像在chrome中一样）当我尝试safari时，它会在选择后显示没有图像

这是我的应用程序的示例链接 SampleAPP HTML

<img src="" id="image">
<input id="input" type="file" onchange="handleFiles()">

JAVASCRIPT

<script>

function handleFiles()
{
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];

// Create an image
var img = document.createElement("img");
// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e)
{
    img.src = e.target.result;

    var canvas = document.createElement("canvas");


    var MAX_WIDTH = 400;
    var MAX_HEIGHT = 300;
    var width = img.width;
    var height = img.height;

    if (width > height) {
      if (width > MAX_WIDTH) {
        height *= MAX_WIDTH / width;
        width = MAX_WIDTH;
      }
    } else {
      if (height > MAX_HEIGHT) {
        width *= MAX_HEIGHT / height;
        height = MAX_HEIGHT;
      }
    }
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);

    var dataurl = canvas.toDataURL("image/png");
    document.getElementById('image').src = dataurl;     
}
// Load files into file reader
reader.readAsDataURL(file);


// Post the data
/*
var fd = new FormData();
fd.append("name", "some_filename.jpg");
fd.append("image", dataurl);
fd.append("info", "lah_de_dah");
*/
}
</script>

Answer 1

您可以使用<canvas>删除并将<img> src的{{1}} e.target.result data URI对象设置为File FileReader() } load事件。

您可以定义变量width，在if #image事件时使用load条件设置新的src以检查#image {{ 1}} property，如果value大于.naturalWidth，则将width设置为#image.width变量。

＆＃13;

width

＆＃13;

上传-IOS之前的图像预览

1 个答案: