当图片很大,直接把图片从Server下载到浏览器上看是一种很不明智的做法,浪费了服务器的资源,网络带宽和客户端的资源。所以,通常Server和Client之间会传输缩略图,只有当Client请求某张图片的大图时,Server才会把原图发送过来。这样带来的另外一个好处是,Server可以一次性传输多张缩略图。
追本溯源,Server端的图片也是由Client端Upload上去的,那么是由Server创建缩略图还是Client来创建缩略图并上传,其实有很多讨论,这里我不做展开。基于.NET Core 1.0尚未支持Image的前提下,由Client端来创建缩略图是当下不得不采用的方法。
用JavaScript创建图片的缩略图有很多种,这里只简单描述我研究过的几种。
- EXIF信息中包含了缩略图
图片格式有很多,但是严谨意义的EXIF信息会包含缩略图,尤其是用RAW格式为主打的专业图片。这些RAW图片转换为JPG时,默认也会有EXIF的缩略图。
function getThumbnail(file) {
if (file.type === "image/jpeg") {
var reader = new FileReader();
reader.onload = function (e) {
var array = new Uint8Array(e.target.result), start, end;
for (var i = 2; i < array.length; i++) {
if (array[i] === 0xFF) {
if (!start) {
if (array[i + 1] === 0xD8) {
start = i;
}
} else {
if (array[i + 1] === 0xD9) {
end = i;
break;
}
}
}
}
if (start && end) {
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(new Blob([array.subarray(start, end)], {type:"image/jpeg"}));
var imgf = new Image();
imgf.src = imageUrl;
document.body.appendChild(imgf);
}
};
reader.readAsArrayBuffer(file.slice(0, 50000));
}
}
- 通过FileReader API来绘制缩略图
HTML代码:
<input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(targetUrl)" />
JS代码如下:
window.uploadPhotos = function(url){
console.log("Upload to URL " + url)
// Read in file
var file = event.target.files[0];
// Ensure it's an image
if(file.type.match(/image.*/)) {
console.log('An image has been loaded');
// Load the image
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
// Resize the image
var canvas = document.createElement('canvas'),
max_size = 544,
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;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
var dataUrl = canvas.toDataURL('image/jpeg');
var resizedImage = dataURLToBlob(dataUrl);
$.event.trigger({
type: "imageResized",
blob: resizedImage,
url: url
});
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
}
};
/* Utility function to convert a canvas to a BLOB */
var dataURLToBlob = function(dataURL) {
console.log("DataURLToBlob")
var BASE64_MARKER = ';base64,';
if (dataURL.indexOf(BASE64_MARKER) == -1) {
var parts = dataURL.split(',');
var contentType = parts[0].split(':')[1];
var raw = parts[1];
return new Blob([raw], {type: contentType});
}
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
/* End Utility function to convert a canvas to a BLOB */
/* Handle image resized events */
$(document).on("imageResized", function (event) {
console.log("imageResized")
var data = new FormData();
if (event.blob && event.url) {
data.append('file', event.blob);
$.ajax({
url: event.url,
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
console.log("Uploaded")
}
});
}
});
是为之记。
Alva Chien
2016.8.2