如何使用 data:URL 格式压缩上传的图片进行预览？

Question

我知道data:URL可以提供不大于2MB的图片，而且图片大小增加了33%。所以我需要在预览前压缩上传的图像。请告诉我 - 我该怎么做？

Answer 1

改用URL.createObjectURL，确保在不再需要图像时revokeObjectURL：

'use strict';

var fileInput = document.getElementById('file');
var preview = document.getElementById('preview');

fileInput.addEventListener('change', function () {
    if (this.files.length === 0) {
        return;
    }
  
    preview.src = URL.createObjectURL(this.files[0]);
});

<input id="file" type="file" accept="image/*" />
<img id="preview" style="display: block; margin: 1em 0; max-width: calc(100% - 2em);" />