使用vue 根据图片url下载阿里云跨域图片到浏览器 并且修改文件名

要下载阿里云跨域图片并修改文件名，可以使用以下步骤：

1. 在Vue组件中创建一个方法，用于处理下载图片的逻辑。方法的参数应该包含图片的URL和新文件名。

downloadImage(url, filename) {
  // 处理下载逻辑
}

2. 创建一个新的Image对象，将其src属性设置为要下载的图片URL。这样可以在后台预加载图片，以确保下载进度的实时更新。

let img = new Image();
img.src = url;

3. 为Image对象添加load事件监听器，以便在图片加载完成后执行下载逻辑。

img.onload = () => {
  // 执行下载逻辑
}

4. 在load事件处理程序中，使用canvas将图片绘制到画布上，并使用toBlob方法将画布转换为Blob对象。

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
canvas.toBlob((blob) => {
  // 执行下载逻辑
}, 'image/jpeg', 0.9);

5. 使用XMLHttpRequest对象将Blob对象发送到服务器，并将其保存为新文件。

let xhr = new XMLHttpRequest();
xhr.open('POST', '/server/saveImage.php', true);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.setRequestHeader('Content-Disposition', 'attachment; filename=' + filename);
xhr.send(blob);

完整代码示例：

downloadImage(url, filename) {
  let img = new Image();
  img.src = url;
  img.onload = () => {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    ctx.drawImage(img, 0, 0);
    canvas.toBlob((blob) => {
      let xhr = new XMLHttpRequest();
      xhr.open('POST', '/server/saveImage.php', true);
      xhr.setRequestHeader('Content-Type', 'application/octet-stream');
      xhr.setRequestHeader('Content-Disposition', 'attachment; filename=' + filename);
      xhr.send(blob);
    }, 'image/jpeg', 0.9);
  }
}

需要注意的是，在下载跨域图片时，需要在服务器端设置允许跨域访问。可以在服务器端设置Access-Control-Allow-Origin头，允许访问的域名列表。