JavaScript点击按钮下载图片，涉及同源下载和跨域下载

以下内容适用于同源下载图片：

参考：https://blog.csdn.net/Thea12138/article/details/82801375

<button class="download" onclick=" download('url')"><i class="layui-icon layui-icon-download-circle"></i></button>

function download(src) {var $a = document.createElement('a');$a.setAttribute("href", src);$a.setAttribute("download", "");var evObj = document.createEvent('MouseEvents');evObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);$a.dispatchEvent(evObj);
}

对于跨域的图片，使用上述方法只会打开一个新窗口显示要下载的图片，不会打开下载窗口，下载方法如下：

参考：https://segmentfault.com/q/1010000017159631

https://blog.csdn.net/visionke/article/details/84583105

    function ddd(){        var src = 'http://pic.c-ctrip.com/VacationH5Pic/mice/wechat/ewm01.png';var canvas = document.createElement('canvas');var img = document.createElement('img');img.onload = function(e) {canvas.width = img.width;canvas.height = img.height;var context = canvas.getContext('2d');context.drawImage(img, 0, 0, img.width, img.height);         canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);canvas.toBlob((blob)=>{let link = document.createElement('a');link.href = window.URL.createObjectURL(blob);link.download = 'aaa'; link.click();  }, "image/jpeg");           }img.setAttribute("crossOrigin",'Anonymous');img.src = src;}

JavaScript点击按钮下载图片，涉及同源下载和跨域下载相关推荐

JS下载图片到本地，解决跨域问题
说下需求,点击按钮,实现下载图片到本地的功能,后台返回的url是阿里oss存储图片的地址,一开始只能预览图片,再后来受同源策略影响,依旧不能实现,但是在生成的图片后拼接?time=当前时间戳就可以实现 ...
JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html> <h ...
js实现点击按钮切换图片功能_☆*往事随風*☆的博客
文章目录前言一.DOM是什么? 二.对象的HTML DOM 树三.图片切换练习 1.要求 2.实现思路 3.示例代码 1.html示例代码如下: 2.css示例代码如下: 2.js示例代码如下: ...
Viewer.js点击按钮放大图片用法
1.Viewer.js点击按钮放大图片用法 <div onclick="getHideBig('hide_img_weight1')" id="btn_img_we ...
Android 点击按钮切换图片
Android 点击按钮切换图片效果如图: 点击后: 主要代码: //切换图片 but1.setBackgroundResource(R.drawable.qq1); 全部代码: public cl ...
ImageButton点击按钮改变图片
一.ImageButton点击按钮改变图片 **************************ImageButton点击按钮改变图片有两种写法*************************** ...
vue中点击按钮切换图片
vue中点击按钮切换图片直接附上代码,亲测有效  <template><div><div class="">< ...
java下载图片到本地，例如从网上下载图片，下载淘宝图片，下载百度图片等
java下载图片到本地,例如从网上下载图片,下载淘宝图片,下载百度图片. 直接上代码如下: public static void download(String url,String saveFile ...
ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
同源策略和跨域请求解决方案
一.一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: ...

JavaScript点击按钮下载图片，涉及同源下载和跨域下载

JavaScript点击按钮下载图片，涉及同源下载和跨域下载相关推荐

最新文章

热门文章