继续上面的操作，在拿到图片之后，需要将文件进行处理转化，此时
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e) {
console.log(reader)
} 现在取到了图片也进行了转化，现在可以进行压缩了。
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) {
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e) {
// console.log(this.result)
var pre=document.getElementById("pre");
pre.setAttribute("src", this.result)
canvasDataURL(this.result, 100, 0.5)
}
}
})
/* [canvasDataURL 通过canvas进行压缩]* @params path 图片的base64的格式
* @params targetWidth 压缩后图片的宽度
* @params quality 图片质量 quality值越小，所绘制出的图像越模糊
*/
function canvasDataURL(path, targetWidth, quality) {
var img = new Image();
img.src = path
img.onload = function () {
// var that = this
// console.log(that)
// 默认按比例压缩
var w = this.width
var h = this.height
scale = w / h;
w = targetWidth
h = targetWidth / scale
var quality = quality; // 默认图片质量为0.7
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
ctx.drawImage(this, 0, 0, w, h);
// quality值越小，所绘制出的图像越模糊
var base64 = canvas.toDataURL('image/jpeg', quality);
var result=document.getElementById("result");
result.setAttribute("src", base64)
}
}很简单，这样就可以得到压缩后的图片了，从以上的代码可得知，原理在于canvas中的toDataURL方法可指定图片压缩后的格式及压缩质量，把canvas信息压缩并转为base64编码来实现压缩。
使用canvas制作卡片
场景：把刚刚压缩之后的图片与另一张图片相结合，可长按进行保存。
function drawCanvas (target) {
var canvas = document.querySelector('#myCanvas')
var ctx = canvas.getContext('2d')
// 是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例
