Question

我需要上传图片。在上传图像之前，我从文件输入中获取它，使用画布调整大小，并将结果保存为DOM中的图像元素。如何将我的Image对象转换为文件Object，以便我可以使用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编码的字符串。将其发送到服务器，对其进行解码并将其另存为文件。

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

1 个答案: