必须同源(访问的网站域名与服务器域名一致)才能下载

downs() {
var alink = document.createElement("a");
alink.href = this.shop.shoppic_url;
alink.download = "pic"; //图片名
alink.click();
}

解决图片不同源下载问题

downloadIamge(imgsrc, name) {//下载图片地址和图片名
var image = new Image();
// 解决跨域 Canvas 污染问题
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"); //得到图片的base64编码数据 var a = document.createElement("a"); // 生成一个a元素
var event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
},
downs(){
this.downloadIamge(this.pic.url, 'pic')
}

  

---------------------
作者:bamboozjy
来源:CSDN
原文:https://blog.csdn.net/bamboozjy/article/details/81631487
版权声明:本文为博主原创文章,转载请附上博文链接!

vue 图片下载到本地,图片保存到本地的更多相关文章

  1. 图片下载&&非同源图片下载&&同源下载&&网页点击下载图片

    非同源图片下载(html添加canvas标签) 方法1: downloadImgByBase64(url){ console.log() // 创建隐藏的可下载链接   // let  blob = ...

  2. 如何将S/4HANA系统存储的图片文件用Java程序保存到本地

    我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api. DATA ls_appl ...

  3. Canvas保存图片保存到本地

    使用Canvas绘图,将图片保存到本地方法 一.使用HTML5 a标签的download属性,将图片保存到本地,不需要链接服务器 关于download属性:HTML5 <a>标签downl ...

  4. 前端js保存页面为图片下载到本地

    前端js保存页面为图片下载到本地 手机端点击下载按钮将页面保存成图片到本地 前端js保存页面为图片下载到本地的坑 html2canvas 识别 svg 解决方案 方案 html2canvas.js:可 ...

  5. 下载远程(第三方服务器)文件、图片,保存到本地(服务器)的方法、保存抓取远程文件、图片 将图片的二进制字节字符串在HTML页面以图片形式输出 asp.net 文件 操作方法

    下载远程(第三方服务器)文件.图片,保存到本地(服务器)的方法.保存抓取远程文件.图片   将一台服务器的文件.图片,保存(下载)到另外一台服务器进行保存的方法: 1 #region 图片下载 2 3 ...

  6. java后台中处理图片辅助类汇总(上传图片到服务器,从服务器下载图片保存到本地,缩放图片,copy图片,往图片添加水印图片或者文字,生成二维码,删除图片等)

    最近工作中处理小程序宝箱活动,需要java画海报,所以把这块都快百度遍了,记录一下处理的方法,百度博客上面也有不少坑! 获取本地图片路径: String bgPath = Thread.current ...

  7. 使用URLConnection下载文件或图片并保存到本地

    有时候需要从网络上面下载图片到本地进行保存,代码如下: package com.jointsky.jointframe.test; import java.io.FileOutputStream; i ...

  8. php将远程图片下载保存到本地

    /* *功能:php完美实现下载远程图片保存到本地 *参数:文件url,保存文件目录,保存文件名称,使用的下载方式 *当保存文件名称为空时则使用远程文件原来的名称 */ function getIma ...

  9. JAVA 通过url下载图片保存到本地

    //java 通过url下载图片保存到本地 public static void download(String urlString, int i) throws Exception { // 构造U ...

  10. js 下载图片与下载文件的方式一样;保存至本地 ASP.NET 方式

    <asp:Button ID="btnDownLoad" runat="server" style="display: none" T ...

随机推荐

  1. 1.PHP与Web页面的交互

    一.概览: PHP是一种专门用于Web开发的服务器端脚本语言.从这个描述可以知道,PHP要打交道的对象主要有服务器(Server),和基于Web的HTML(超文本标识语言).使用PHP处理Web应用时 ...

  2. Res-Family: From ResNet to SE-ResNeXt

    Res-Family: From ResNet to SE-ResNeXt 姚伟峰 http://www.cnblogs.com/Matrix_Yao/ Res-Family: From ResNet ...

  3. java表达式中运算符优先级

    运算符优先级:运算符*和/(以及%)的优先级高于+和-(优先级越高,越早运算) 在逻辑运算符中,!拥有最高优先级,之后是&&,接下来是||. 一般来说,相同优先级的运算符的运算顺序是从 ...

  4. C#使用Owin技术部署轻量级webApi服务

    写在前面: 除了使用IIS可以启用WebApi之外,微软还提供了Owin技术,免除了IIS繁琐的部署配置,只需要运行编写好的程序,即可启用webApi服务,是不是很爽呢? 对于Owin技术的详细介绍这 ...

  5. ucos中消息队列的应用(二)

    继续说任务间的通信. 本次的任务是在ISR中发送一个消息给任务,ucos的代码中的是非常之简洁和容易理解啊.创建,释放,等待,非常好理解,不再赘述. 说说我遇到的问题,数据帧接收完之后,向消息队列发送 ...

  6. Educational Codeforces Round 43 (Rated for Div. 2)

    Educational Codeforces Round 43 (Rated for Div. 2) https://codeforces.com/contest/976 A #include< ...

  7. xmltodict 模块

    pip install xmltodict xmltodict.parse() 方法可以将xml数据转为python中的dict字典数据 xmltodict.unparse() 将字典转换为xml数据 ...

  8. UNIX 系统下退出 git commit 编辑器

    如果是 Emacs 编辑器,输入 Ctrl X + Ctrl S(保存),再输入Ctrl X + Ctrl C(退出) 如果是VIM编辑器,输入 ESC + :wq UNIX 系统默认打开的是 Ema ...

  9. 13. Redis监控运维云平台CacheCloud

    13. Redis监控运维云平台CacheCloud13.1 CacheCloud是什么13.1.1 现有问题13.1.2 CacheCloud基本功能13.2 快速部署13.2.1 CacheClo ...

  10. Rendering Problems Couldn't resolve resource @dimen/y20

    (转)文章转自 songzi1228 的 https://blog.csdn.net/songzi1228/article/details/80255058  本人亲自试用,妥妥的解决了我的问题. R ...