canvas下载

function downLoad(url){
  console.log(url)
  const oA = document.createElement("a");
  oA.download = '';// 设置下载的文件名，默认是'下载'
  oA.href = url;
  document.body.appendChild(oA);
  oA.click();
  oA.remove(); // 下载之后把创建的元素删除
}
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
canvas.style.border = "1px solid";

downLoad(canvas.toDataURL('image/png'))

toDataUrl

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL

 

踩坑：由于部分qq浏览器下载时有问题，采用canvas转blob后再进行下载

function canvasToBlob(canvas: HTMLCanvasElement, type?: string | undefined, quality?: number):Promise<Blob> {
  return new Promise((resolve, reject) => {
    try{
      canvas.toBlob((blob) => {
        if(blob){
          resolve(blob)
        } else {
          reject(blob)
        }
      }, type, quality)
    }catch(e) {
      reject(e)
    }
  })
}

function downLoad(url){
  console.log(url)
  const oA = document.createElement("a");
  oA.download = '';// 设置下载的文件名，默认是'下载'
  oA.href =url;
  document.body.appendChild(oA);
  oA.click();
  oA.remove(); // 下载之后把创建的元素删除
}

const canvas = document.createElement('canvas'); 
canvas.width = width; 
canvas.height =height; 
canvas.style.border = "1px solid";


const blob = await this.canvasToBlob(canvas,'image/png',1);


downLoad(URL.createObjectURL(blob));