html2canvas跨域踩坑日常
这两天接到公司的指令做海报图分享 然后尝试使用html2canvas+uview+uniapp进行编写
踩坑如下
- html2canvas跨域问题
我司使用的是oss云存储,起初发生跨域以为是本地原因导致,便没在意
第二天部署到测试服务器上时依旧发生跨域 便开始注意起来
排查如下:
- 检查oss云存储是否设置跨域(已设置)
- 检查html2canvas是否设置useCORS为true(已设置)
在检查后发现都没有问题便陷入了沉思当中,从上午一直到下午也没有解决,无奈只能尝试图片转base64试下,但是在uniapp下没有找到太合适的转换方法,大多是生成画布转base64… 所以决定后端编写接口来进行转base64,转换后再使用html2canvas生成
画布生成代码如下
// html2canvas生成画布代码let container = document.getElementById('shareModal')html2canvas(container, {scale: 2,backgroundColor: '#fff',useCORS: true,}).then(canvas => {this.canvasUrl = canvas.toDataURL("image/png");uni.showToast({icon: 'success',title: '生成图片成功,长按图片可进行保存哦'})})
- 转换倒是成功了,当我尝试给avatar替换为base64时奇怪的事情又发生了,生成后还是没有头像,查看数据已经赋值进去了 然后调试了一下页面
发现使用的uniapp image组件 会默认设置一个background-image属性,当我替换avatar的值为base64后,该background-image属性没有发生变化
解决方案:采用拿到数据后先赋值给临时变量,临时变量的avatar值改变后再赋值给data
完整代码如下
this.$u.api.getUserInfo({}).then(res => {if (res.code != 1) {this.$u.toast('获取用户信息失败')} let userinfo = res.dataif (userinfo.avatar){if (!userinfo.avatar.indexOf('data:image') >= 0){this.getBase64(userinfo.avatar).then(data => {// TODO: 注意 此处需要将\r\n换行替换为空,不然无法显示userinfo.avatar = data.data.replace(/[\r\n]/g, '')that.userinfo = userinfo})}}
});
效果图如下
总结:
所遇到的两种问题只琢磨出了解决方案
并没有查明原因,有知道的大佬请告知!
html2canvas跨域踩坑日常相关推荐
- vue3下的uniapp跨域踩坑
uniapp vue3 H5跨域踩坑 开发移动端H5的时候由于后端接口没有做跨域处理,因此需要做下服务器代理,于是百度搜索了uniapp下h5的跨域配置 在manifest下的h5配置proxy,大概 ...
- uc浏览器请求被拦截报跨域踩坑记录
记录下开发时uc浏览器请求被拦截时遇到的问题 请求在uc浏览器出现跨域问题 app使用uniapp开发,使用plus.runtime.launchApplication来打开并跳转指定页面,并在Xco ...
- 【vue axios 跨域】cookie、origin等一步步递进的跨域踩坑 已解决
前后端对接必出bug,最近连续对接了两个项目,对解决跨域有点感觉了,跟大家分享一下经验,都是血的教训- 两个项目都是Springboot+Vue(axios网络请求).本人主要负责前端,所以前端会分享 ...
- socket.io跨域踩坑
一.koa结合socket.io 后端代码: // 引入依赖 const koa = require("koa"); // 初始化koa const app = new koa() ...
- iframe子页面ajax报错,iframe跨域踩坑
前言 工做中,有些系统是利用的iframe.有一次忽然遇到了一个使人费解的跨域报错,没有发请求,却报了"Error:Blocked a frame with origin...from ac ...
- Elasticserch 5.6到Elasticsearch7.11跨版本升级踩坑记录
Elasticserch 5.6到Elasticsearch7.11跨版本升级踩坑记录 1.背景 公司老的业务使用的是Elasticsearch5.6版本,使用的客户端是TransportClient ...
- 踩坑日常_MinGW-w64安装教程及踩坑记录
踩坑日常_MinGW-w64安装教程及踩坑记录 Linux系统下的gcc(GNU C Compiler)是GNU推出的功能强大.性能优越的多平台编译器.Gcc编译器能将C.C++语言源程序.汇程式化序 ...
- vue2.0下axios实现跨域踩的坑
按踩坑顺序叙述.本人对http了解太少,所以坑踩得较多. 1.开始进行跨域时,知道vue2.0官方推荐axios进行ajax请求,大致看一下https://www.npmjs.com/package/ ...
- Ajax请求,跨域小坑
今天在上班的时候,被坐在旁边项目经理叫过去问了一个Ajax请求跨域的问题,一开始没理解清楚也还有对这个没有理解的透,后面被打击的要死. 当时的需求是需要测试一个已发布的api接口,需要在本地写测试程序 ...
最新文章
- 任命新CFO 百度迎来首位女性高管
- CCommandLineInfo类
- 【 MATLAB 】Contour plot of matrix(矩阵的等高线图)
- Spring Cloud实战小贴士:Zuul的饥饿加载(eager-load)使用
- 2013年上半年全国计算机技术与软件专业技术资格(水平)考试工作安排
- bhjqahjshjhjgqwsoixcyuwyub
- 如何绘制caffe网络训练曲线
- nginx 499 502 413 404 处理
- srsLTE源码学习:逻辑信道多路复用与MAC CE分解pdu_queue.h,pdu_queue.cc
- PAT1018. 锤子剪刀布
- 什么是redis缓存穿透, 缓存雪崩, 缓存击穿
- java接收jsonarray_java-如何通过JSONArray获取API的数据
- HDU1465_递推_错排
- jogbuild-common.xml:17: Cannot find /home/tsit/tio-software/jogamp/gluegen/make/gluegen-cpptasks.xml
- 《统计学》第八版贾俊平第十四章指数知识点总结及课后习题答案
- 计算机网络图论,网络图论
- android drawtext文字大小,Android 使用View绘制文字(DrawText)技术总结
- (机器学习)C均值算法(K-Means)之误差平方和推导
- c51为啥要宏定义时钟_C51 程序中 #define 宏定义语句末尾一定要使用分号才能正确编译通过。_学小易找答案...
- 深度学习之TensorFlow(一)
热门文章
- 【常见问题】Waki_谢老师B站的HCNP/HCIP课程第27集的华为eNSP路由器配置问题——百兆口不能添加IP地址
- 软件构件 API 在不同版本间的兼容性——读FSE 2012 best paper有感
- Hadoop Streaming 实战: 多路输出
- 案例:计算最高分、最低分、平均分、方差、标准差。
- 国内突然爆发暴力蠕虫病毒!已有大量用户中招:所有文件被删
- 陕科大计算机专业好转吗,陕西人眼里的陕科大怎么样?211为什么没给陕科大?...
- python爬虫——使用requests库和xpath爬取猎聘网职位详情
- 表单验证 手机号输入框
- 经典Robocode例子代码- -SnippetBot
- 天邑ty1208z海思3798刷版本_天邑TY1208Z_S905_M2_1G8G_EMMC_双片内存 长虹代工线刷固件...