canvas的使用

1：使用canvas转换在线图片为base64

 //将在线图片转化为base64的图片
    getBase64Image (img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d"); //获取绘图上下文环境
      ctx.drawImage(img, 0, 0, img.width, img.height); //在canvas中画图
      var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 获取到图片的格式
      var dataURL = canvas.toDataURL("image/" + ext); //可选其他值 image/jpeg
      return dataURL;
    },
    main (src, cb) {
      let _this = this
      var image = new Image();
      image.src = src; // 处理缓存
      image.setAttribute('crossOrigin', 'anonymous');
      // image.crossOrigin = "*";                 // 支持跨域图片
      image.onload = function () {
        var base64 = _this.getBase64Image(image);
      }
    },

2、使用canvas让当前页成为一张图片

• 1：安装html2canvas
• 2：在当前使用的页面中引入
• 3: 在当前页获取所有所需信息后进行图片的绘制

<div  id="personal">
<div id="perBox"></div>
</div>



import html2canvas from 'html2canvas'
   //htmlTocanvas
    createImage () {
      const dom = document.getElementById('perBox')
      const Canvas = document.createElement('canvas')
      const width = document.body.offsetWidth // 可见屏幕的宽
      const height = document.body.offsetHeight // 可见屏幕的高
      const scale = 1 // 设备的devicePixelRatio
      // 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题
      Canvas.width = width * scale
      Canvas.height = height * scale
      Canvas.getContext('2d').scale(scale, scale)
      html2canvas(dom, {
        canvas: Canvas,
        scale,
        useCORS: true,
        logging: true,
        width: width + 'px',
        hegiht: height + 'px'
      }).then(canvas => {
        const context = canvas.getContext('2d')
        // 关闭抗锯齿形
        context.mozImageSmoothingEnabled = false
        context.webkitImageSmoothingEnabled = false
        context.msImageSmoothingEnabled = false
        context.imageSmoothingEnabled = false
        // canvas转化为图片
        const img = this.canvas2Image(canvas, canvas.width, canvas.height)
        let personalDom = document.getElementById('personal')
        personalDom.appendChild(img)
        img.style.cssText =
          'width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;'
      })
    },
    //canvasToimage
    canvas2Image (canvas, width, height) {
      const retCanvas = document.createElement('canvas')
      const retCtx = retCanvas.getContext('2d')
      retCanvas.width = width
      retCanvas.height = height
      retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height)
      const img = document.createElement('img')
      img.src = retCanvas.toDataURL('image/jpeg') // 可以根据需要更改格式
      return img
    },