编程知识 cdmana.com

Téléchargement d'images frontales

En général, nous pouvons télécharger des fichiers en utilisantaÉtiquettedownloadPropriétés,Mais cette propriété n'est valable que pour la même source,DétailsMDNDocumentation,Si l'image n'est pas téléchargée de la même façon,Le navigateur ouvre un nouveautabImage de la page,Pour être compatible avec les deux cas ci - dessus,Peut être utiliséJSRéalisation méthodologique:

// Obtenir des photosDataURL
const 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)
}
// Exécuter le téléchargement
// url - Adresse de l'image(Obligatoire)
// name - Nom de l'image(Facultatif, Si elle n'est pas transmise ,UtiliserurlNom du fichier)
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
}

版权声明
本文为[Patwu16]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/11/20211125171540535l.html

Scroll to Top