上传前HTML 5预先调整大小的图像

Question

这是面条刮痕。请记住，我们有HTML 5本地存储和xhr v2等等。我在想，是否有人能找到一个有用的例子，甚至给我一个“是”或“否”来回答这个问题：是否可以使用新的本地存储器(或其他什么)预先调整图像的大小，以便不知道图像大小的用户可以将他们的10 MB图像拖到我的网站上，它可以使用新的本地存储来调整图像的大小，然后将其上传到更小的大小。我很清楚你可以用Flash，Java Applet，Active X.问题是，您是否可以使用Javascript+HTML 5。期待着对这个问题的回应。就目前而言。

Answer 1

// from an input element

var filesToUpload = input.files;

var file = filesToUpload[0];

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

var reader = new FileReader();  

reader.onload = function(e) {img.src = e.target.result}

reader.readAsDataURL(file);

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0);

var MAX_WIDTH = 800;

var MAX_HEIGHT = 600;

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

//Post dataurl to the server with AJAX

Answer 2

以上更正：

<img src="" id="image"><input id="input" type="file" onchange="handleFiles()"><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 canvas = $("<canvas>", {"id":"testing"})[0];
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        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>