今天就跟大家聊聊有关怎么使用canvas压缩图片，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
首先要先获取到图片文件
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); } });这个时候就取到了图片文件，就不得不了解一下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 | 读取中 |
继续上面的操作，在拿到图片之后，需要将文件进行处理转化，此时
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) } } }) 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))的比例 var dp = window.devicePixelRatio || 1 var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1 var ratio = this.dp / this.backingStoreRatio var oldWidth = canvas.width var oldHeight = canvas.height canvas.width = oldWidth * ratio canvas.height = oldHeight * ratio canvas.style.width = oldWidth + 'px' canvas.style.height = oldHeight + 'px' ctx.scale(ratio, ratio) var headerImg = new Image() var bgImg = new Image() headerImg.src = target bgImg.src = '../bg.png' headerImg.onload = (e) => { // 图片的宽高比 var rate = headerImg.width / headerImg.height console.log(rate) bgImg.onload = (e) => { ctx.drawImage(headerImg, 10, 30, 50, (50 / rate)) // 背景图片 ctx.drawImage(bgImg, 0, 0, 150, 150) ctx.fillText('厉害啊', 80, 70) var resultImg = new Image() resultImg.src = canvas.toDataURL('image/png', 1) resultImg.style.width = '100%' var cardImg=document.getElementById("cardImg"); cardImg.setAttribute("src", resultImg.src) } }看完上述内容，你们对怎么使用canvas压缩图片有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网行业资讯频道，感谢大家的支持。
