我正在使用PhoneGap编写一款跨平台的移动应用,并且我有一个文件上传输入框用于上传单个图像。
问题在于,大多数上传的图片都是使用手机拍摄的,大小约为4MB。
我想将这些图像显著缩小,因为我根本不需要它们的高质量。
此外,我需要将它们转换为base64格式,而不是真实的图像文件。(我已经使用FileReader获取了图像文件)
有什么想法可以实现这一点吗?也许使用canvas或其他工具?
更新:以下是我目前的进展:
function shrink() {
var self = this;
var reader = new FileReader(); // init a file reader
var file = $('#file-input').prop('files')[0]; // get file from input
reader.onloadend = function() {
// shrink image
var image = document.createElement('img');
image.src = reader.result;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, 300, 300);
var shrinked = canvas.toDataURL('image/jpeg');
console.log(shrinked);
};
reader.readAsDataURL(file); // convert file to base64*/
}
但我得到的只是一张黑色图片。谢谢。