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

Posted 2021-04-01

我的文件浏览器出了问题。

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

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

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

但还有另一个问题。

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

这样切割图像并使其变小。这只会调整图像大小。结果是图像的一小部分。

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

答案

你可以使用canvas： 在你看来。

<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);
}

我希望它有所帮助