图片转Base64、DOM元素转换成base64图片

 图片转Base64

function imageUrlToBase64(img, fn) {
  // 一定要设置为let，不然图片不显示
  let image = new Image();
  // 解决跨域问题
  image.setAttribute('crossOrigin', 'anonymous');
  let imageUrl = img;
  image.src = imageUrl;
  // image.onload为异步加载
  image.onload = () => {
    let canvas = document.createElement('canvas');
    canvas.width = image.width;
    canvas.height = image.height;
    let context = canvas.getContext('2d');
    context.drawImage(image, 0, 0, image.width, image.height);
    let quality = 0.8;
    // 这里的dataurl就是base64类型
    let dataURL = canvas.toDataURL('image/jpeg', quality);
    fn(dataURL);
  };
}

 合成图片

<img
     :src="tempimg"
      @load="loadImage"
      @error="errorLoad"
/>

图片加载完成的回调，完成后再去调用

loadImage () {
  // 将DOM元素转换成base64图片
  html2canvas(document.querySelector('.imgbox')).then(canvas => {
    this.dyLastImg = canvas.toDataURL('image/png')
  })
},