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

图片转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');
    // 解决图片转base64透明部分填充成黑色问题
    context.fillStyle = "#fff";
    context.fillRect(0, 0, canvas.width, canvas.height);
    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"
/>

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

//调用html2canvas方法需先下载，版本 ^1.4.1
npm install html2canvas

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