怎么使用canvas压缩图片

今天就跟大家聊聊有关怎么使用canvas压缩图片，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了道外免费建站欢迎大家使用！

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	读取中

继续上面的操作，在拿到图片之后，需要将文件进行处理转化，此时

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))的比例
    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压缩图片有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。

文章名称：怎么使用canvas压缩图片
文章起源：http://6mz.cn/article/poejjg.html