javascript使用链接跨域下载图片


Posted in Javascript onNovember 01, 2019

前言

图片是最常见的静态资源文件,可以从本地、外链获取图片,或者使用base64码展示。而canvas的toDataUrl() API可以将图片转base64码,然后模拟点击事件即可下载图片。

外链下载

在本地或者网站下载外链url图片时涉及到跨域,跨域会暴露自己的隐私,浏览器对跨域请求进行了限制,故需要设置crossOrigin为anonymous来允许跨域,浏览器会为这张图片的请求头附带Origin信息,告诉静态资源服务器,请在响应头中附带Access-Control-Allow-Methods、Access-Control-Allow-Origin,以便浏览器放行。

代码示例如下

eventEmitter.js

/*
 * 事件触发器
 * @Author: wujiang
 * @Date: 2018-11-11 22:50:43
 * @Last Modified by: wujiang
 * @Last Modified time: 2018-11-11 23:39:40
 */
const EventEmitter = require('events')
class MyEmitter extends EventEmitter {}

const myEmitter = new MyEmitter()

export default myEmitter

backend.js

import eventEmitter from './common/eventEmitter'
// 图片下载对象
let downloadedImg = null
// 待下载文件名
let fileName = null

// 监听是否获取图片地址
eventEmitter.addListener('getHref', href => {
 imatateDownloadByA(href, fileName)
})

/**
 * base64下载图片(可跨域)
 * @param {*} img
 * @param {String} filename 文件名
 */
function downloadImg (imgUrl, filename) {
 fileName = filename
 startDownloadImg(imgUrl, getImgDataUrl)
}

/**
 * 开始下载图片之前
 * @param {String} imgUrl
 * @param {Function} callback
 */
function startDownloadImg (imgUrl, callback) {
 let imageURL = imgUrl
 downloadedImg = new Image()
 downloadedImg.crossOrigin = 'Anonymous'
 downloadedImg.src = imageURL
 downloadedImg.addEventListener('load', callback, false)
}

/**
 * 获取图片下载base64字符串
 * @param {DOMimg} domimg
 */
function getImgDataUrl () {
 const canvas = document.createElement('canvas')
 const context = canvas.getContext('2d')
 const width = downloadedImg.width || downloadedImg.naturalWidth
 const height = downloadedImg.height || downloadedImg.naturalHeight
 const imgSrc = downloadedImg.src
 let type = imgSrc.substring(imgSrc.lastIndexOf('.') + 1)
 let dtype = type === 'jpg' ? 'jpeg' : 'png'
 canvas.width = width
 canvas.height = height
 context.drawImage(downloadedImg, 0, 0)
 eventEmitter.emit('getHref', canvas.toDataURL(`image/${dtype}`))
}

/**
 * 通过a标签模拟下载
 * @param {String} href
 * @param {String} filename
 */
function imatateDownloadByA (href, filename) {
 const a = document.createElement('a')
 a.download = filename
 a.style.display = 'none'
 a.href = href
 document.body.appendChild(a)
 a.click()
 a.remove()
 window.URL.revokeObjectURL(href)
}

downloadImg('https://img.alicdn.com/imgextra/i2/54199406/O1CN012JLzreAxzn1xhNP_!!54199406.jpg', '测试')

注意

若有跨域的错误提示出现,则需后台服务器进行跨域设置。

javascript使用链接跨域下载图片

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
微信jssdk用法汇总
Jul 16 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
JavaScript探测CSS动画是否已经完成的方法
Aug 30 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
用原生js做单页应用
Jan 17 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 #Javascript
浅谈Three.js截图并下载的大坑
Nov 01 #Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 #Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 #Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 #Javascript
js new Date()实例测试
Oct 31 #Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 #Javascript
You might like
把PHP安装为Apache DSO
2006/10/09 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
php for 循环使用的简单实例
2016/06/02 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
Move.js入门
2017/02/08 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
Vue和React组件之间的传值方式详解
2019/01/31 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
学习python的几条建议分享
2013/02/10 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
如何让Java程序执行效率更高
2014/06/25 面试题
What is view? why do we have view?
2012/06/22 面试题
计算机毕业生求职信
2014/06/10 职场文书
六五普法宣传标语
2014/10/06 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
师德师风培训感言
2015/08/03 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
Python+Appium自动化测试的实战
2021/06/30 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js