javascript调整图像大小[减小大小]并上传答案

【问题标题】：javascript resize image [reduce size] and uploadjavascript调整图像大小[减小大小]并上传
【发布时间】：2012-01-10 13:57:45
【问题描述】：

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

我的要求：

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

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

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

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

注意：参考一些库真的很有帮助。

谢谢。

【问题讨论】：

标签： javascript flash image resize client-server

【解决方案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/

【讨论】：

几乎所有答案都很好，但PlupLoad 做得很好，我不想重新发明轮子。

【解决方案2】：

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

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

根据您想做什么，您可以：

让用户使用此client side script 保存较小的图像。
使用服务器端语言自行存储，将Base64 Encoded Image 转换为实际图像文件，并将其保存在您的服务器上。查看示例 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：

如下面的 cmets 所述，此方法需要 modern browser that supports File APIs 才能工作。请改用 flash method 来支持现代和非 html5 浏览器。

【讨论】：

HTML5 这个词是新的，所以看起来它不适用于旧浏览器。它很痛苦。我需要它与 IE6、7、8、9、FF3、OPERA 9 或 10 和 Chrome 一起使用.
我猜还需要对 File API (caniuse.com/#search=File%20API) 的支持，以便将图像从本地文件系统获取到画布上，对吧？
我不这么认为；为什么不使用上传图像并使用 PHP 将其写入页面？然后，您将能够定位 img 标签并将其绘制到画布中。
我认为整个想法（问题的主题）是减小图像客户端的大小，因此您不必将（大）原始文件上传到服务器。使用 PHP 将其上传并写回页面有点违背目的，不是吗？
实际上你在回答什么？我如何在客户端使用 PHP ？？

【解决方案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,/, "");
}

【讨论】：