有没有调整位图图像大小的方法？

Question

我的文件浏览器有问题。

当它到达任何目录时：获取文件夹列表到列表映射，并使用 onBindCustomView 为每个列表项设置图标。 如果该文件格式是图像，它会显示图像预览而不是显示图像图标。

但问题是，一个或少于 10 个图像文件是可以的。但是当图像文件数达到 50 以上时，就会非常滞后。

我认为这个延迟问题是由图像预览引起的。因为它没有调整大小，所以我添加了代码以将图像预览的大小从任意 x 任意调整为 100x100。

但是还有一个问题。

bitmap.createBitmap(bitmap, 0, 0, 100, 100)

此剪切图像并使其变小。这只会调整图像的大小。所以结果是图像的一小部分。

有没有办法调整图像大小并保持图像看起来原始？

Answer 1

您可以使用画布：
在你看来。

<script>
$('#files')
    .bind('change', function(ev) {
        message_loading("none");
        ev.preventDefault();
        ev.stopPropagation();
        uploadFiles(this);
        message_loading("display");
    })
</script>

在你的脚本中

function uploadFiles(target) {
   var content = target.files;
   var img = reduceImgSize(content[0], content[0]["name"]);
}
function reduceImgSize(f, name){
    var reader = new FileReader();
    reader.onload = function (readerEvent) {
        var image = new Image();
        image.onload = function (imageEvent) {
            var canvas = document.createElement('canvas'),
                max_size = image.width/1.1, 
                width = image.width,
                height = image.height;
            if (width > height) {
                if (width > max_size) {
                    height *= max_size / width;
                    width = max_size;
                }
            } else {
                if (height > max_size) {
                    width *= max_size / height;
                    height = max_size;
                }
            }

            canvas.width = width; // write your width
            canvas.height = height; // write your height
            canvas.getContext('2d').drawImage(image, 0, 0, width, height);
            var dataUrl = canvas.toDataURL('image/jpeg');
            var resizedImage = dataURLToBlob(dataUrl);
            var imageFile = new File([resizedImage], name, {type : "image/jpeg"});
            return imageFile;
        }
        image.src = readerEvent.target.result;
    }
    reader.readAsDataURL(f);
}

希望对你有帮助