Openlayers 报错记录 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘:

于 2024-09-12 18:02:32 发布
阅读量250 收藏 2
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39198394/article/details/142182626
版权

cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/DrawMap/index.vue?vue&type=script&lang=js:133 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

原因是引用的图层得配置跨域问题。 这是浏览器对canvas 设置的导出安全策略。

Failed to execute 'toDataURL' on 'HTMLCanvasElement':

解决问题。 每个引用的图层添加一个

crossOrigin: 'anonymous',

即可、、、   不用谢、、

Liszter
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
错误提示Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
pengbostudio的博客
01-19 5736
导出功能直接写在了index.html中，对应https://openlayers.org/en/latest/examples/export-pdf.html 问题：错误提示Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. canvas绘制图片，由于浏览器的安全考...
OpenLayers 地图截图报错 Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvases may not be
installing的博客
02-27 350
OpenLayers 地图截图报错 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be xx
OpenLayers6（3）：Vue导出图片时报错“Uncaught DOMException: Failed to execute ‘toDataURL on ‘HTMLCanvasElement”
碰碰的博客
04-23 1983
1.版本 OpenLayers：6.4.3 2.导出时候遇到报错 3.原因分析 原因：openlayers中加载的图层中存在不允许跨域的图层； 解决：找到相应的图层，添加crossOrigin:'anonymous'，处理跨域问题； // 切片-图层 export function addlocalTileLayer(title, url, proj = 'EPSG:3857') { const tileLayer = new TileLayer({ ....
Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘
weixin_42547014的博客
01-25 2117
【背景】 Vue中使用openlayers，将地图导出为图片，原本使用openlayers官方提供的方法加载地图，但是地图加载太慢了，换成天地图后无法导出图片并报错 【问题原因】 使用天地图后，没有解决跨域问题，所以图片导出失败 【解决方式】 添加 crossOrigin:'anonymous'，处理跨域问题 let tiandiditu = new Tile({ source: new XYZ({ crossOrigin:'anonymous', url: '', }), }); .
openlayer导出图片报错Uncaught DOMException: Failed to execute ‘toDataURL‘ on ‘HTML
weixin_43371136的博客
02-05 445
官网导出图片 运用到实际项目中报错 报错信息 Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported. 原因是：canvas导出图片时，涉及到跨域的问题，而osm.js文件中crossOrigins设置为“anonymous” 解决办法，加上crossOrigin:‘anonymous’ let source = new TileIma
Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported
热门推荐
齐枫的博客
04-26 1万+
启用了 CORS 的图片 HTML 规范中图片有一个 crossorigin 属性，结合合适的 CORS 响应头，就可以实现在画布中使用跨域 元素的图像。 什么是“被污染”的 canvas? 尽管不通过 CORS 就可以在画布中使用图片，但是这会污染画布。一旦画布被污染，你就无法读取其数据。例如，你不能再使用画布的 toBlob(), toDataURL() 或 getImageData(...
解决Openlayers地图无法转图片的问题
qq_34451215的博客
12-19 453
错误信息如下：Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported简单粗暴的方式，只要是加载关于图片的都把跨域设置一下即可。
html2canvas导出地图跨域设置
qq_39330397的博客
06-13 504
printJS({ printable: dataURL, type: 'image', documentTitle: projectConfig.title }) //printJS打印。allowTaint属性是是否允许跨域图片污染画布，默认是false，如果设置为true,解决了导出报错问题，但是导出的图片是空白。所以还的从源头上解决跨域。openlayer在source下设置 crossOrigin: "anonymous",即可。
openlayers wms 和 canvas toDataURL的跨域问题
shengandshu的博客
06-05 1411
项目有个需求要把openlayers的地图转成base64用来导出，本来以为可以和echarts一样，用canvas的toDataURL就简单解决了，结果给我报了这个错误：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.原来是跨域了，而echarts生成的canva...
openlayers：OpenLayers
02-04
OpenLayers 是一个高性能，功能丰富的库，用于在Web上创建交互式地图。 它可以显示从任何网页上的任何来源加载的地图图块，矢量数据和标记。 OpenLayers的开发旨在进一步利用各种地理信息。 它是完全免费的开源...
ol-cesium：OpenLayers-Cesium集成
01-28
OpenLayers-Cesium集成库。 请使用您的地图和可视化它与一个地球。 查看。 ES6模块 从2.0版开始，该代码完全基于ES6模块和语法。 它需要OpenLayers5.x。 npm上提供了一个方便的ES6软件包olcs 。 特征 在2D和3D之间...
openlayers Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
08-25
openlayers中的"Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."错误是由于浏览器的安全策略导致的。当使用canvas绘制图片时，如果涉及到外域的图片资源，浏览器会...
Vue使用query传参Boolean类型，刷新之后转换为String问题
最新发布
q879936814的博客
09-12 179
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
vue使用自定义指令实现一键复制
Zing_ing的博客
09-09 546
/ 将需要复制的内容保存到元素上if (!console.log('无复制内容');return;// 创建一个 textarea 元素，用于选择和复制// 执行复制命令try {console.log('复制成功:', el.$value);console.log('复制失败');// 删除创建的 textarea 元素// 监听点击事件},// 当指令所在的元素被更新时触发},// 指令解绑时移除事件监听});
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 620
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
Vue CLI：初学者指南与深入理解
x15514104477的博客
09-10 892
本文为初学者提供了一个关于如何使用 Vue CLI 的指南，并帮助读者深入理解其核心概念。Vue CLI 是一个用于快速搭建 Vue.js 项目的命令行工具，适用于所有水平的开发者。
SprinBoot+Vue远程教育网站的设计与实现
赵广陆
09-10 1151
目录1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和答疑辅导，对于专业性数据证明一切！ 主要项目：javaweb、ssm、spring
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值