JavaScript调整图像大小[减小大小]并上传。

Question

是否可以使用Javascript或Flash调整图像大小？

我的要求：

用户上传一张大小为10MB的图像，我想使用Javascript或Flash在客户端重新调整图像大小，在调整图像大小后，需要将其上传到服务器。

如果可能的话，我可以节省带宽。

我正在使用uploadify上传图像，并在服务器端使用Codeigniter。

还有其他方法可以实现这个功能吗？

注意：参考一些库对此非常有帮助。

谢谢。

- Red

Answer 1

是的，在Flash Player 10及更高版本中可以实现。

这是一篇旧的博客文章，介绍了当Flash Player 10和FileReference.load()函数还很新时的情况，时间是在2008年，它没有涵盖所有必需的步骤，但它是一个开始：

http://www.mikechambers.com/blog/2008/08/20/reading-and-writing-local-files-in-flash-player-10/

你可能还需要了解如何在ActionScript中调整位图大小，如何使用as3corelib将位图编码为JPEG或PNG，并将结果上传到服务器。 编辑: http://www.plupload.com似乎支持调整大小。 还有http://resize-before-upload.com/。

- Lars Blåsjö

---

几乎所有的答案都很好，但是PlupLoad做得很好，我不想重复造轮子。 - Red

Answer 2

是的，使用HTML5 canvas API可以使用JavaScript调整图像大小。不过，您需要在调整大小后将其保存到其他地方。

• 您需要检查的第一个API是drawImage。
• 第二个API是toDataURL。

根据您想要做什么，您可以选择：

• 使用此 客户端脚本 要求用户保存较小的图像。
• 使用服务器端语言自己存储它，将 Base64编码图像 转换为实际的图像文件，并将其保存在服务器上。请参见 示例1。

示例1：基于PHP5的解决方案：

<?php
    define('UPLOAD_DIR', 'images/');
    $img = $_POST['img'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($file, $data);
    print $success ? $file : 'Unable to save the file.';
?>

更新 #2：

如下方评论所述，此方法需要支持文件API的现代浏览器才能正常工作。使用Flash方法来同时支持现代和非HTML5浏览器。

- Pierre

---

HTML5这个术语很新，因此它似乎无法与旧版浏览器兼容。这真是令人痛苦。我需要它能够在IE6、7、8、9、FF3、Opera 9或10和Chrome中正常工作。 - Red

我猜支持File API（http://caniuse.com/#search=File%20API）也是必要的，才能将图像从本地文件系统传送到画布上，对吗？ - Lars Blåsjö

我不这么认为；为什么不使用<input type="file">上传图像，并使用PHP将其写入页面？然后，您就可以将img标签定位并绘制到画布中。 - Pierre

我认为整个想法，问题的主题，是为了在客户端减小图像的大小，这样你就不必将（大）原始文件上传到服务器。使用PHP将其上传并写回页面有点违背了初衷，不是吗？ - Lars Blåsjö

你在回答中到底想表达什么？我怎么能在客户端使用PHP？ - Red

IE6？！那只考虑IE10+怎么样？ - themihai

Answer 3

如果您使用JSON上传，请使用以下代码。

function UploadPhoto(img) {

    var uri = "http://domain/App/AppService.svc/GetImg/New";
    var imgElem = document.getElementById(img);
    var imgData = JSON.stringify(getBase64Image(imgElem));

    alert(imgData);
    $.ajax({
        url: uri,
        contentType: 'application/json',
        dataType: 'json',
        type: 'POST',
        data: imgData,
        error: function () {
            alert('failed');
        },
        success: function () {
            alert('Sucess');
        }
    });


}
function getBase64Image(imgElem) {
    var width = 100;
    var height = 150;

    // imgElem must be on the same server otherwise a cross-origin error will be thrown "SECURITY_ERR: DOM Exception 18"
    var canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElem, 0, 0, width, height);
    ctx.scale(width, height)
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

- thamkrish