canvas压缩图片以及卡片制作的方法示例

在做一些活动页的时候，经常会有一些需要上传图片的需求，并且还需要将图片以及生成的文字以及贴图生成一张卡可以供用户可以长按保存。这个需求之前完成过一次，最近又遇上了，使用的都是canvas来实现的。干脆整理出一篇博客出来。如果有更好的实现方法，欢迎提出一起探讨。

使用canvas压缩图片

在html中使用写入input标签，type为file时候，可以调出手机的相册可供选择照片，也可以支持摄像头进行拍照功能。在这个场景下，就可能出现图片的体积会更大，可能会超出后端所支持的最大范围，从而导致上传失败。

<input id="file" type="file">

1.首先要先获取到图片文件

var eleFile = document.querySelector('#file'); var reader = new FileReader() eleFile.addEventListener('change', function (event) { file = event.target.files[0]; console.log(file) // 选择的文件是图片 if (file.type.indexOf("image") == 0) { reader.readAsDataURL(file); } });

2.这个时候就取到了图片文件，就不得不了解一下js中FileReader对象的使用了

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容

方法：

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。 readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。 readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）

FileReader处理事件简介

事件	描述
onabort	中断时触发
onerror	onabort
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中