在做一些活动页的时候，经常会有一些需要上传图片的需求，并且还需要将图片以及生成的文字以及贴图生成一张卡可以供用户可以长按保存。这个需求之前完成过一次，最近又遇上了，使用的都是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应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容

方法：

FileReader处理事件简介

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

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的信息转为base64编码来进行实现 。可以通过代码来进行实例的实践

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。