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));