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 相关文章推荐
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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游戏编程25个脚本代码
2011/02/08 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP实现文件上传与下载
2020/08/28 PHP
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js简易namespace管理器 实例代码
2013/06/21 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
2017/02/20 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Python文件和目录操作详解
2015/02/08 Python
Python import用法以及与from...import的区别
2015/05/28 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python可视化text()函数使用详解
2020/02/11 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
外贸业务员的岗位职责
2013/11/23 职场文书
《老王》教学反思
2014/02/23 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL