javascript 调整图像大小[缩小尺寸]并上传

Question

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

我的要求：

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

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

我在服务器端使用 uploadify 上传图像和 Codeigniter。

还有其他方法可以做到这一点吗？

注意：参考一些库确实很有帮助。

谢谢。

Answer 1

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

这是一篇旧博客文章，是在 2008 年 Flash Player 10 和 FileReference.load() 函数刚刚推出时发布的，它没有涵盖所需的所有步骤，但它是一个开始：

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

你可能也会需要研究如何在 ActionScript 中调整位图大小，如何将位图编码为 JPEG 或 PNG（使用 as3corelib）以及如何将结果上传到服务器。

编辑：http://www.plupload.com 似乎支持调整大小。还有 http://resize-before-upload.com/

Answer 2

是的，可以使用 HTML5 canvas API 在 javascript 中调整图像大小。但是，调整大小后您需要将其保存在某个地方。

• 您需要检查的第一个 API 是 drawImage。
• 第二个是 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 浏览器。

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,/, "");
}