JavaScript with Image：创建缩略图

当图片很大，直接把图片从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