JS下载图片到本地，解决跨域问题

说下需求，点击按钮，实现下载图片到本地的功能，后台返回的url是阿里oss存储图片的地址，一开始只能预览图片，再后来受同源策略影响，依旧不能实现，但是在生成的图片后拼接?time=当前时间戳就可以实现

代码如下：

function downloadImage(imgsrc, name) {//下载图片地址和图片名var image = new Image();// 解决跨域 Canvas 污染问题,image.setAttribute("crossorigin", "anonymous");image.onload = function() {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;var context = canvas.getContext("2d");context.drawImage(image, 0, 0, image.width, image.height);var url = canvas.toDataURL("image/png"); //将图片格式转为base64var a = document.createElement("a"); // 生成一个a元素var event = new MouseEvent("click"); // 创建一个单击事件a.download = name || "myPhoto"; // 设置图片名称a.href = url; // 将生成的URL设置为a.href属性a.dispatchEvent(event); // 触发a的单击事件};image.src = imgsrc + '?time=' + Date.now();  //注意，这里是灵魂，否则依旧会产生跨域问题}

JS下载图片到本地，解决跨域问题相关推荐

js下载文件修改文件名（跨域）
pdf下载,由于a标签直接给download不生效,小编试了以下方法可以解决跨域的修改文件名. <a ref="signUrl" href="javascript: ...
vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作
const webpack = require('webpack') module.exports = { configureWebpack: { plugins: [ new webpack.Pro ...
node.js express配置响应头解决跨域问题
// app.js中 var app = express(); /** 自定义中间件 */ var allowCrossDomain = function (req, res, next) {// 所 ...
js webpack 解决跨域问题_webpack-dev-server 作代理解决跨域，让你的本地开发飞起来...
最近在接到一个需求是做一个可视化的监控系统,mock数据来开发的话实在不太方便,况且数据量之大.查了一下资料,可以用webpack-dev-server作为代理,直接请求线上,哈哈哈,是不是很方便. ...
Node.js 模块化的操作，简单明了的代码帮助你明白后端的实现和前端之前的交互，及解决跨域等问题
Node.JS 模块化 1.require 导入模块const http=require('http')2.exports 导出模块db={name:'jine',age:22} module.e ...
【javaWeb微服务架构项目——乐优商城day03】——（搭建后台管理前端，Vuetify框架，使用域名访问本地项目，实现商品分类查询，cors解决跨域，品牌的查询）
乐优商城day03 0.学习目标 1.搭建后台管理前端 1.1.导入已有资源 1.2.安装依赖 1.3.运行一下看看 1.4.目录结构 1.5.调用关系 2.Vuetify框架 2.1.为什么要学习U ...
Vue3.0中WangEditor本地上传图片（解决跨域问题，后端返回问题）
官方文档:http://www.wangeditor.com/ 编辑器自带上传网络链接图片本地上传图片需要自己设置效果: 注意事项: 1.自定义上传方法来上传图片,使用FromData对象来传参,但 ...
【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
nuxt.js 本地开发跨域问题（Access-Control-Allow-Origin）及其解决方案
问题描述现在 web 开发都是前后端分离的年代,前后端分离的好处我就不啰嗦了,进入问题 ==>>> 使用 nuxt.js 本地开发 Vue 项目时,ajax 请求时可能会遇到跨域问 ...

JS下载图片到本地，解决跨域问题

JS下载图片到本地，解决跨域问题相关推荐

最新文章

热门文章