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 相关文章推荐
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
js实现纯前端压缩图片
Nov 16 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
Python中元组,列表,字典的区别
2017/05/21 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
一百多行python代码实现抢票助手
2018/09/25 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
春风行动实施方案
2014/03/28 职场文书
竞聘书格式及范文
2014/03/31 职场文书
小学班主任寄语大全
2014/04/04 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
优秀员工演讲稿
2014/05/19 职场文书
党员干部一句话承诺
2014/05/30 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
个人收入证明模板
2014/09/18 职场文书
置业顾问岗位职责
2015/02/09 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python