下面是使用canvas压缩图片并转换为base64格式输出文件流的完整攻略:
步骤一:html文件部分
首先,我们需要在html文件中添加一个input元素,用于选择要上传的图片。代码如下:
<label for="image_upload">选择图片:</label>
<input type="file" accept="image/*" id="image_upload">
其中,type属性为file说明该元素是用于上传文件的。accept属性为image/*,表示只能上传图片类型的文件。
步骤二:JavaScript代码部分
接下来,我们需要编写JavaScript代码,使用canvas压缩图片并将其转换为base64格式的输出文件流。
步骤2.1:获取上传文件
首先,我们需要获取用户上传的图片文件。代码如下:
var input = document.getElementById('image_upload');
var file = input.files[0];
步骤2.2:使用canvas压缩图片并转换为base64格式的输出文件流
接下来,我们需要创建一个Image对象,并将待上传的图片文件赋值给该对象的src属性。然后,我们需要监听Image对象的load事件,将图片绘制到canvas上。最后,我们使用canvas的toDataURL方法将图片转换为base64格式的输出文件流。代码如下:
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = URL.createObjectURL(file);
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var quality = 0.8; // 压缩比例,可调整
var base64_data = canvas.toDataURL('image/jpeg', quality);
console.log(base64_data);
};
上述代码中,canvas的宽度和高度分别设置为Image对象的宽度和高度。然后,我们使用drawImage方法将Image对象绘制到canvas上。toDataURL方法有两个参数。第一个参数是图片的MIME类型,也就是要输出的文件格式。第二个参数是图片的质量,取值范围是0到1。值越大,图片质量越高,但文件大小也越大。
至此,我们就完成了使用canvas压缩图片并转换为base64格式的输出文件流。
步骤2.3:完整代码示例
下面是使用canvas压缩图片并转换为base64格式输出文件流的完整代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas压缩图片并转换为base64格式输出文件流</title>
</head>
<body>
<label for="image_upload">选择图片:</label>
<input type="file" accept="image/*" id="image_upload">
<script>
var input = document.getElementById('image_upload');
var file = input.files[0];
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = URL.createObjectURL(file);
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var quality = 0.8; // 压缩比例,可调整
var base64_data = canvas.toDataURL('image/jpeg', quality);
console.log(base64_data);
};
</script>
</body>
</html>
下面再介绍一个压缩多张图片的示例
代码片段如下
var compressImages = function(images, max_width, max_height, compress_ratio, callback) {
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
var compressed_images = []
var completed_count = 0
for (var i = 0; i < images.length; i++) {
var img = images[i]
var new_img = new Image()
new_img.onload = (function(img, new_img, i) {
return function () {
canvas.width = Math.min(new_img.width, max_width)
canvas.height = Math.min(new_img.height, max_height)
var w = canvas.width, h = canvas.height
var ratio
if (new_img.width > max_width || new_img.height > max_height) {
ratio = Math.min(max_width/new_img.width, max_height/new_img.height)
w = new_img.width * ratio
h = new_img.height * ratio
}
ctx.clearRect(0, 0, w, h)
ctx.drawImage(new_img, 0, 0, w, h)
var base64_data = canvas.toDataURL('image/jpeg', compress_ratio)
compressed_images[i] = base64_data
completed_count++
if (completed_count == images.length) {
callback(compressed_images)
}
}
})(img, new_img, i)
new_img.src = URL.createObjectURL(img)
}
}
这里我们封装了一个compressImages函数,该函数接受四个参数,分别是上传的图片数组、最大宽度、最大高度、压缩比例以及压缩完成后的回调函数。具体的压缩过程与之前的示例类似,不再赘述。最后,我们将压缩结果放入compressed_images数组中,并在所有图片压缩完成后回调传入的回调函数。
示例代码
var input = document.getElementById('image_upload');
input.addEventListener('change', function() {
var files = input.files
var images = []
for (var i = 0; i < files.length; i++) {
var file = files[i]
if (file.type.indexOf('image') !== -1) {
images.push(file)
}
}
compressImages(images, 800, 800, 0.8, function(compressed_images) {
console.log(compressed_images)
})
})
在示例代码中,我们通过addEventListener监听文件上传事件,获取用户上传的图片文件。我们使用上述封装的compressImages函数压缩图片,并将压缩结果输出到控制台。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:canvas压缩图片转换成base64格式输出文件流 - Python技术站