vue下载图片到本地

在Vue中下载图片到本地可以使用以下代码：

methods: {
  downloadImage(imgUrl) {
    var image = new Image();
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function() {
      var canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      var context = canvas.getContext("2d");
      context.drawImage(image, 0, 0, image.width, image.height);
      var url = canvas.toDataURL("image/png");
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = "image";
      a.href = url;
      a.dispatchEvent(event);
    };
    image.src = imgUrl;
  }
}

在需要下载图片的地方调用`downloadImage`方法，并传入图片的URL作为参数即可。这段代码会创建一个`Image`对象，设置`crossOrigin`属性为`anonymous`以解决跨域问题。然后在`onload`事件中创建一个`canvas`元素，将图片绘制到`canvas`上，最后将`canvas`转换为图片URL，并创建一个`<a>`元素模拟点击下载图片。
#### 引用[.reference_title]
- *1* [vue实现点击下载图片到本地](https://blog.csdn.net/XZZ2222/article/details/87272125)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [在vue中设置图片下载到本地](https://blog.csdn.net/weixin_44424820/article/details/131155583)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]