有没有调整位图图像大小的方法?
Is there a method to resize bitmap image?
我的文件浏览器有问题。
当它到达任何目录时:获取文件夹列表到列表映射,并使用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);
}
希望对你有帮助
我的文件浏览器有问题。
当它到达任何目录时:获取文件夹列表到列表映射,并使用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);
}
希望对你有帮助