javascript - 使用 javascript 上传之前调整图像大小

Question

嗨，我有多个图像 uploader ，可以使用 javascript 进行预览..

但问题是我无法在加载图像时调整图像大小..

这是我的代码:

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
        continue;
    }

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function (theFile) {
        return function (e) {
            // Render thumbnail.
            var span = document.createElement('span');
            //That's what i tried
            e.target.result.height=770;
            e.target.result.width=336;
            span.innerHTML = ['<img class="thumb" src="', e.target.result,
                '" title="', escape(theFile.name), '"/>'].join('');
            document.getElementById('list').insertBefore(span, null);
        };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
}
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

如果有人可以帮助我，请。

Answer 1

您可以尝试使用 HTML5 Canvas 调整大小。请参阅https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/举个例子。