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 相关文章推荐
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
ES6中定义类和对象的方法示例
Jul 31 Javascript
JavaScript中的Proxy对象
Nov 27 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
终于听上了直流胆调频
2021/03/02 无线电
php IP及IP段进行访问限制的代码
2008/12/17 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
php上传图片客户端和服务器端实现方法
2015/03/30 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
微信小程序和H5页面间相互跳转代码实例
2019/09/19 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
详解Python中的Cookie模块使用
2015/07/06 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python图片的横坐标汉字实例
2019/12/04 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
最好的商品表达自己:Cafepress
2019/09/04 全球购物
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
Final类有什么特点
2012/04/25 面试题
党员年终民主评议的自我评价
2013/11/05 职场文书
计算机系本科生求职信
2014/05/31 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
历史博物馆观后感
2015/06/05 职场文书
培训感想范文
2015/08/07 职场文书