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

Question

我需要上传图片。在上传图像之前，我从文件输入中获取它，使用画布调整它的大小，然后将结果保存为 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)

感谢您的帮助:)

Answer 1

如果有的话，您可以使用 canvas.toDataURL() 来获取 base64 编码的字符串。将其发送到服务器，对其进行解码并保存为文件。