canvas截图中图片空白（跨域导致）

最近项目中遇到一个“保存至相册”的功能，由于是老功能重构，此部分没有改动，但是最近频繁出现问题：保存至相册时里面地图显示空白。

刚开始的时候也是一头雾水，正好好的功能咋出问题了，而且还是非必现问题。

后来上网查资料，发现可能跟图片url跨域相关，在本地跑工程前端设置了跨域代理，所以只能部署到服务器上看是什么问题，结果一查还真是图片跨域导致。

具体原理我就不赘述了，主要问题出在canvas .toDataURL()这行代码上。当时参考了一个大佬文章写的非常好，忘记收藏现在找不着了，呜呜

那么总结来说两种方案:

1、后端返回的图片url与当前工程部署在同一服务器避免跨域问题。

2、后端直接将base64格式的图片返回给前端。前端拿base64格式展示。

以上都是避免产生跨域问题，解决这个问题非常好的手端。

但是，我们的后端有点忙，不愿意配合情况下，下下策来了，前端自己将图片转base64：

//图片转base64
const getBase64Pic = function(src, callback, outputFormat) {var xhr = new XMLHttpRequest();xhr.open('GET', src, true);xhr.responseType = 'arraybuffer';xhr.onload = function(e) {if (xhr.status == 200) {var uInt8Array = new Uint8Array(xhr.response);var i = uInt8Array.length;var binaryString = new Array(i);while (i--) {binaryString[i] = String.fromCharCode(uInt8Array[i]);}var data = binaryString.join('');var base64 = window.btoa(data);var dataUrl = "data:" + (outputFormat || "image/png") + ";base64," + base64;callback.call(this, dataUrl);}};xhr.send();
}

调用时：

 getBase64Pic(this.queryObj.mapFilePath,function(base64Img){if(base64Img){that.mapImg=base64Img;console.log("获取base64小区地图成功");}else{this.$toast("小区地图获取失败");}})

但是不建议前端转base64，图片较大的时候会用时比较长，用户体验不好。

还有这个问题还跟缓存有关系，但是我还没整太明白。

canvas截图中图片空白（跨域导致）相关推荐

html图片左侧留白,HTML+CSS入门如何解决图片跨域导致的截图空白
本篇教程介绍了HTML+CSS入门如何解决图片跨域导致的截图空白,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1. 后端支持:图片要是cdn上的地址,并且允许图片跨域 ...
mui后端开发php,PHP解决mui中ajax的跨域问题
什么是跨域访问在A网站中,我们希望使用Ajax来获得B网站中的特定内容.如果A网站与B网站不在同一个域中,那么就出现了跨域访问问题.你可以理解为两个域名之间不能跨过域名来发送请求或者请求数据,否则就 ...
Android中WebView的跨域漏洞分析和应用被克隆问题情景还原(免Root获取应用沙盒数据)...
一.前言去年年底支付宝的被克隆漏洞被爆出,无独有偶就是腾讯干的,其实真正了解这个事件之后会发现,感觉是针对支付宝.因为这个漏洞找出肯定花费了很大劲,主要是因为支付宝的特殊业务需要开启了WebView ...
font-face引用字体跨域导致font awesome图标无法正常显示
前段时间上线一个项目,将css,js等静态资源做了cdn部署,结果发现我的font awesome图标通通不能正常显示.后来查了资料发现是由于font-face引用字体跨域导致的. 我的主域名www. ...
开发中解决Access-Control-Allow-Origin跨域问题的Chrome神器插件,安装及使用
开发中解决Access-Control-Allow-Origin跨域问题的Chrome神器插件,安装及使用参考文章: (1)开发中解决Access-Control-Allow-Origin跨域问题的 ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
【全栈项目上线（vue+node+mongodb）】06.nodejs服务上线（生产环境前后分离的vue项目中怎么解决跨域问题）...
以下操作使用下面项目为案例 https://github.com/itguide/vnshop ## 启动node服务克隆好项目后记得把依赖包安装好 npm i 使用 node 启动node服务 c ...
vue php axios 跨域,在vue项目中,使用axios跨域处理
下面我就为大家分享一篇在vue项目中,使用axios跨域处理,具有很好的参考价值,希望对大家有所帮助. 跨域,一个很是让人尴尬的问题,有些人可以在后台中设置请求头,但是很多前端并不具备后台的知识,并无 ...
关于vue-cli3中配置请求跨域的问题
关于vue-cli3中配置请求跨域的问题根据Vue CLI3官方文档, 需要在vue.config.js文件中配置devServer.proxy选项来解决跨域问题. 1.关于vue.config.j ...

canvas截图中图片空白（跨域导致）

canvas截图中图片空白（跨域导致）相关推荐

最新文章

热门文章

canvas截图中图片空白（跨域 导致）

canvas截图中图片空白（跨域 导致）相关推荐

最新文章

热门文章

canvas截图中图片空白（跨域导致）

canvas截图中图片空白（跨域导致）相关推荐