Canvas合成图片

 

        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        const img = new Image() // 同个画布中可创建多个image图片
        img.crossOrigin = 'Anonymous' // 图片加载的过程中允许出现跨域

        // 先有src属性才会触发 onload函数
        img.src = imgUrl // 图片地址（包括base64 、bloburl）

        img.onload = function() {
          // 注意img.onload方法是异步的
          canvas.width = img.width  // canvas画布的图片大小可以自定义 这里默认跟图片大小相等
          canvas.height = img.height // 同上
          let size = img.width * 0.1 + 'px'
          ctx.font = `${size} Georgia`
          // 给文字添加颜色
          // ctx.fillStyle = 'red';
          // 添加渐变颜色的水印
          var gradient = ctx.createLinearGradient(0, 0, 200, 0)
          gradient.addColorStop(0, 'blue')
          gradient.addColorStop(1, 'red')
          ctx.fillStyle = gradient
          // 以左上角为坐标原点 开始绘制图像
          ctx.drawImage(img, 0, 0, img.width, img.height)
          ctx.fillText('文字', img.width * 0.05, img.height * 0.1) // 在图片上添加字体[第二、三个参数为位置信息]
          size = img.width * 0.08 + 'px' // 填充文字大小是在填充前设置的 每次可设置不同大小
          ctx.font = `${size} Georgia`
          ctx.fillText('文字', img.width * 0.05, img.height * 0.2) // 同上
          size = img.width * 0.05 + 'px'
          ctx.font = `${size} Georgia`
          ctx.fillText('文字', img.width * 0.05, img.height * 0.9, img.width * 0.9)
          // let resultBase64 = canvas.toDataURL('image/png', 0.8) // 压缩图片后返回的文件也是base64格式的
            // 压缩图片后返回blob对象
          canvas.toBlob( 
            function(blob) {
             console.log(blob) // 可上传服务器
            },
            'image/jpeg',
            0.8
          )
        }

合成多个图片

let canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;

let img1 = new Image(),
    img2 = new Image();
img1.src = './images/1.jpg';
img2.src = './images/2.jpg';

// 加载img1
let pm1 = new Promise((res,rej)=>{
  img1.onload = ()=>{
    res();
  }
});
// 加载img2
let pm2 = new Promise((res,rej)=>{
  img2.onload = ()=>{
    res();
  }
});

// 两张图片都加载完成后绘制于Canva中
let drawAllImg = Promise.all([pm1, pm2]).then((res)=>{
  ctx.drawImage(img2, 0, 0, 400, 533);
  ctx.drawImage(img1, 0, 0, 100, 100);
});

其中Promise对象中的all()方法是为了等两张图片全部加载完后在执行后续操作。由于我们现在创建的Canvas还未添加到DOM中，所以若是想要看现在的Canvas情况得先加上下面这句：

document.body.appendChild(canvas);

当然，实际若是只想要合成图片的话就没必要加上这句了，在离屏Canvas（即手动创建的Canvas但并未添加至DOM中）上绘制即可。 

将Canvas导出为图片

  let outputImg = new Image();
  outputImg.src = ctx.canvas.toDataURL();
  document.body.appendChild(outputImg);

将Canvas导出为在线链接

 let resultBase64 = canvas.toDataURL('image/png', 0.8) // 压缩图片后返回的文件也是base64格式的
            // 压缩图片后返回blob对象
 canvas.toBlob( function(blob) {
             console.log(blob) // 可上传服务器
          },
            'image/jpeg',
            0.8
          )