#关于如何实现压缩
查阅MDN找到的是这个API：
HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。
// callback处理blob主要，type图片类型，encoderOptions图片压缩比例 0-1
canvas.toBlob(callback, type, encoderOptions);
复制代码
#效果图
#实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
padding: 20px 0;
}
#fileSelect{
margin-top: 10px;
padding: 10px 5px;
border: 1px solid chartreuse;
border-radius: 5px;
background: green;
color: white;
text-decoration: none;
}
#fileSelect:hover{
opacity: 0.8;
}
</span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
</head>
<body>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none"
onchange="handleFiles(event,this.files)">
<a href="#" id="fileSelect">点击上传</a>
</body>
<script>
window.onload = function () {
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click(); // input文件上传
}
e.preventDefault();
}, false);
}
function handleFiles(e, files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image//;
if (!imageType.test(file.type)) {
continue;
}
console.log(file);
<span class="hljs-keyword">const</span> width = <span class="hljs-number">500</span>;
<span class="hljs-keyword">const</span> height = <span class="hljs-number">300</span>;
<span class="hljs-keyword">const</span> fileName = file.name;
<span class="hljs-keyword">const</span> reader = <span class="hljs-keyword">new</span> FileReader();
reader.readAsDataURL(file);
reader.onload = <span class="hljs-function"><span class="hljs-params">event</span> =></span> {
<span class="hljs-keyword">const</span> img = <span class="hljs-keyword">new</span> Image();
img.src = reader.result;
img.onload = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
<span class="hljs-keyword">const</span> elem = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'canvas'</span>);
elem.width = width;
elem.height = height;
<span class="hljs-keyword">const</span> ctx = elem.getContext(<span class="hljs-string">'2d'</span>);
<span class="hljs-comment">// canvas大小设置</span>
ctx.drawImage(img, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, width, height);
<span class="hljs-comment">// 植入内容</span>
<span class="hljs-built_in">document</span>.body.append(elem);
<span class="hljs-comment">//--------- 如果不需要资源上传，只需显示，下面代码可以不要了------</span>
ctx.canvas.toBlob(<span class="hljs-function">(<span class="hljs-params">blob</span>) =></span> {
<span class="hljs-keyword">const</span> file = <span class="hljs-keyword">new</span> File([blob], fileName, {
<span class="hljs-attr">type</span>: <span class="hljs-string">'image/jpeg'</span>,
<span class="hljs-attr">lastModified</span>: <span class="hljs-built_in">Date</span>.now()
});
<span class="hljs-built_in">console</span>.log(file); <span class="hljs-comment">// file为压缩后的图片</span>
}, <span class="hljs-string">'image/jpeg'</span>, <span class="hljs-number">10e-9</span>);
<span class="hljs-comment">// ----------------------</span>
},
reader.onerror = <span class="hljs-function"><span class="hljs-params">error</span> =></span> <span class="hljs-built_in">console</span>.log(error);
};
}
}
</script>
</html>
复制代码
#流程
1.new FileReader()
首先需要的是利用这个API来读取文件，实例化之后采用 readAsDataURL 的方式来读取图片的资源路径,这里的兼容性不错，囊阔了几乎所有浏览器版本和平台。
复制代码reader.readAsDataURL(file); //这样读取图片，上述例子可以多选操作，所以循环了下
复制代码2.reader.onload的回调中创建图片
// 创建图片内容
const img = new Image();
// 将图片地址绑定到base64,这里遇到一个问题采用event.target.result取不到当前，reader下面有result属性可用
img.src = reader.result;
复制代码
3.创建画布，绘制图片内容
// 创建canvas画布
const elem = document.createElement('canvas');
// 设置画布大小
elem.width = width;
elem.height = height;
//获取🖌️
const ctx = elem.getContext('2d')
// 绘制
ctx.drawImage(img, 0, 0, width, height); // drawImage这里查看MDN文档即可
// 植入页面
document.body.append(elem);
复制代码
4.划重点压缩，将canvas压缩大小转为image对象
ctx.canvas.toBlob((blob) => {
const file = new File([blob], fileName, {
type: 'image/jpeg', // 这里的格式可以是jpg，png，gif，png等，都试了下，压缩大小不变
lastModified: Date.now()
});
console.log(file);
}, 'image/jpeg', 10e-9); // 这里的10e-9很小了 极限0-1 0是最大压缩比率， 1这里有点玄学变大了 超过1 或者小于0 大小大概压缩了6成左右
复制代码#补充
这里看到一个兼容性的问题,主要考虑的Sarari IOS上，谁叫客户用呢？
// MDN给除了兼容代码，大体是是在Object原型添加了toBlob函数实现，粘贴添加就好
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
value: function (callback, type, quality) {
var dataURL = this.toDataURL(type, quality).split(',')[1];
setTimeout(function() {
<span class="hljs-keyword">var</span> binStr = atob( dataURL ),
len = binStr.length,
arr = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Uint8Array</span>(len);
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < len; i++ ) {
arr[i] = binStr.charCodeAt(i);
}
callback( <span class="hljs-keyword">new</span> Blob( [arr], {<span class="hljs-attr">type</span>: type || <span class="hljs-string">'image/jpeg'</span>} ) );
});
}
});
}
复制代码
