关于javascript:前端下载图片

通常咱们下载文件能够应用a标签的download属性，但此属性仅在同源无效，详情MDN文档，如果非同源下载图片时，浏览器会关上新的tab页展现图片，为了兼容下面两种状况，能够应用JS办法实现：

// 获取图片DataURLconst getImageDataURL = (image) => {  const canvas = document.createElement('canvas')  canvas.width = image.width  canvas.height = image.height  const ctx = canvas.getContext('2d')  ctx.drawImage(image, 0, 0, image.width, image.height)  const extension = image.src.substring(image.src.lastIndexOf('.') + 1).toLocaleLowerCase()  return canvas.toDataURL('image/' + extension)}// 执行下载// url - 图片地址(必填)// name - 图片名称（选填，如未传，应用url文件名）export const downloadImage = (url, name) => {  if (!url) {    return  }  const a = document.createElement('a');  const filename = name || url.substring(url.lastIndexOf('/') + 1).toLocaleLowerCase()  a.setAttribute('download', filename)  const image = document.createElement('img');  image.setAttribute('crossOrigin', 'Anonymous')  image.onload = () => {    a.href = getImageDataURL(image)    a.click()  }  image.src = url}