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

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. AS3获得当前文件的文件名

    //当前文件的完整路径var fileUrl:String = this.loaderInfo.url;//查找路径的最后一个"/"var flag:int = fileUrl.l ...

  2. sphinx-2.1.9的安装使用

    1.下载/编译安装 cd /usr/local/src wget http://sphinxsearch.com/files/sphinx-2.1.9-release.tar.gz tar -xf s ...

  3. jquery 事件的触发与绑定

    bind事件绑定: live事件绑定: hover事件绑定: one事件绑定 toggle事件绑定:

  4. Linux内核d_path函数应用的经验总结

    问题背景 一个内核模块中,需要通过d_path接口获取文件的路径,然后与目标文件白名单做匹配. 在生产环境中,获取的文件是存在的,但是与文件白名单中的文件总是匹配失败. 问题定位: 通过打印d_pat ...

  5. pyautogui 文档(二):鼠标控制

    0,0 X increases --> +---------------------------+ | | Y increases | | | | 1920 x 1080 screen | | ...

  6. Appium+python自动化获取toast消息的方法

    转载地址:https://www.cnblogs.com/shangren/p/8191879.html 1. 首先执行这个命令:npm install -g cnpm --registry=http ...

  7. LAB12 Transaction

    思路:就是把aotocommit()里面的东西改改就行了. 查询要求可用房间>=所需要的房间. SQL里面查数字时,不要加单引号.字符串才要. 查询里的set ONHAND=要改成自己的变量名s ...

  8. Saving custom fields in production order

    In additional data screen 1.PPCO0012->EXIT_SAPLCOKO1_001->ZXCO1U11 ​ ​ ci_aufk-zxxx = i_caufvd ...

  9. 解决了好几天的关于django xadmin后台增加链接并执行函数的问题

    由于xadmin后台封装的完整性,想要在后台做一些改动对于新手来说还是有点困难,目前解决的第一个问题: 在admin后台增加链接,使其改变上级签收状态 如图 点击签收按钮之后,改变其状态 代码展示: ...

  10. Centos7系统安装部署docker

    一.安装docker #创建docker相关的目录 mkdir -p /data/docker #安装docker运行必要工具 sudo yum install -y yum-utilsdevice- ...