Vue: Existe um endereço de imagem, e a função de clicar na imagem para baixar é realizada

No projeto, o back-end retornou o endereço da imagem, e a imagem precisa ser salva localmente na seção anterior;

Solução:

Primeiro, use o endereço da imagem e o nome da imagem para gerar um objeto blob e, em seguida, use a tag para fazer o download

Um método está escrito aqui, basta passar o link da imagem e o nome da imagem

 //根据url和名称生成blob
    downloadPic(url, name) {
      let image = new Image();
      image.setAttribute("crossOrigin", "anonymous");
      image.src = url;
      image.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob);
          let Link = document.createElement("a");
          Link.download = name;
          Link.href = href;
          Link.click();
          Link.remove();
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
    },