使用Ajax上传DOM图像 - 将图像转换为文件？

Question

我需要进行图片上传。在上传图片之前，我会从文件输入中获取它，使用canvas调整大小，然后将结果保存为DOM中的图像元素。

我该如何将我的Image对象转换为文件对象，以便可以使用ajax上传它？

编辑：

这是我所做的：

$.fitIn = function( size, bbox ) {

    var r = size.w / size.h;

    if( r > bbox.w / bbox.h ) {
        var newW = bbox.w,
            newH = newW / r;

    } else {
        var newH = bbox.h,
            newW = newH * r;
    }

    return { w: newW, h: newH };
};

$.resizeImage = function( image, newW, newH, outputFormat ) {

    if( null == outputFormat ) {
        var temp = image.src.split( '.' );
        outputFormat = temp[temp.length - 1];
    }

    var canvas = document.createElement( 'canvas' );
    canvas.width = newW;
    canvas.height = newH;

    var context = canvas.getContext( '2d' );
    context.drawImage( image, 0, 0, newW, newH );

    var newImage = document.createElement( 'img' );
    newImage.src = canvas.toDataURL( 'image/' + outputFormat );

    return newImage;
};

$.createThumb = function( image ) {

    var newSize = $.fitIn(
        { w: image.width, h: image.height },
        { w: THUMB_W, h: THUMB_H }
    );

    return $.resizeImage( image, newSize.w, newSize.h, THUMB_FORMAT );
};

然后：

var originalImage = document.getElementById('testImage');
var newImage = lwf.resizeImage(originalImage, 480, 270);

（$不是jQuery）

感谢您的帮助 :)

- Virus721

---

展示一下你做了什么？ - Rohit Choudhary

已经编辑了我的帖子并附上了代码 :) - Virus721

Answer 1

您可以使用canvas.toDataURL()将其转换为一个base64编码字符串，将其发送到服务器，解码并将其保存为文件。

- lucassp

---

谢谢你的回答。将图像保存为字符串是明确的方法吗？ - Virus721

这是通过AJAX获取画布图像并将其发送到服务器的唯一方法。在服务器上，您只需要解码并保存它。 - lucassp

canvas.toDataURL() 将会返回一个以 "data:image/png;base64,ABC123..." 开头的字符串。例如在 PHP 中，如果你使用正则表达式或 strtok 等提取 "ABC123..." 部分，你只需要执行 file_put_contents("$path.png", base64_decode("ABC123..."));，那么这张图片就是一个普通的 png 文件。 - kendsnyder

好的，谢谢！我找到了这个教程，它讲述了你刚才说的内容（http://simeonvisser.hubpages.com/hub/HTML5-Tutorial-How-To-Use-Canvas-toDataURL），我会去看一下。 - Virus721