vue解决html2canvas图片跨域问题

最新推荐文章于 2024-04-25 10:41:05 发布
最新推荐文章于 2024-04-25 10:41:05 发布
阅读量1.7k 收藏 5
点赞数 2
分类专栏： vue js html
原文链接：https://www.jianshu.com/p/1fdac4b952d5
版权
vue 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
js
10 篇文章 0 订阅
订阅专栏
html
4 篇文章 0 订阅
订阅专栏

首先先确认一下如果把浏览器disable cache 勾上还会不会存有跨域问题

如果勾选上还存在的话就到阿里云配置跨域处理，如果勾选上不存在的话 解决方案如下浏览器缓存

在img标签上加是 crossorigin="anonymous"，然后在图片地址后面带上一个随机字符串，为了防止浏览器缓存

<img :src="data.imageUrl + '?' + randomString(6)" crossorigin="anonymous">

 

html2canvas配置加上 allowTaint:false, useCORS:true

html2canvas配置


 

祗想安靜地。
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解锁canvas导出图片跨域的N种姿势小结
09-22
主要介绍了解锁canvas导出图片跨域的N种姿势小结的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
html2canvas、图片跨域、模糊失真、base64、偏移等问题
I大俊
12-06 5335
html2canvas、图片跨域、模糊失真、base64、偏移等问题
vue后台系统使用html2canvas截图功能的时候图片跨域不显示
最新发布
qq_36738092的博客
04-25 236
【代码】vue后台系统使用html2canvas截图功能的时候图片跨域不显示。
修改html2canvas源码,解决图片跨域问题
JokerSoulClub的博客
01-12 3748
url图片显示并不会跨域, 只有要通过xhr获取其blob对象才会提示跨域 这就是为何通过 html2canvas(dom,{ allowTaint: true //允许污染画布 }).then(canvas=>{ document.body.appendChild(canvas); }) 以上的canvas是可以显示出来的,但仅仅是可以显示,如果dom中存在跨域url的图片,那么生成的canvas是被污染的,无法执行canvas.toDataURL(); html2canvas(dom,{
html2canvas 处理跨域图片的解决方案
热门推荐
梦里、訴說著對你的博客
05-12 1万+
html2canvas 处理跨域图片的解决方案 最近接了个开发需求，要在前端实现将页面上的部分 DOM 内容生成为一张图片的功能。调研后发现了 html2canvas 库，使用它可以非常简便的实现上述功能，它的基本原理是将要生成为图片的 DOM 进行解析，然后将其在 canvas 上进行重绘，最后使用 canvas 的 toDataURL 方法导出为图片。但在使用 html2canvas 的过程中遇到了一个图片资源跨域的问题，复现如下。 当在页面中使用 标签或者 CSS 背景引入同源的图片时， <
html2canvas js文件 和java如何设置代理解决跨域问题
06-28
html2canvas js 框架 和 java设置代理解决图片跨域访问时不能生成图片的问题。 zip包含：设置代理使用跨域图片.docx，canvas2image.js，canvg.js，html2canvas.js，html2canvas.min.js，html2canvas.svg.min.js共6个文件
vue中完美解决html2canvas图片跨域问题
weixin_33885253的博客
11-27 1万+
html2canvas在截图的过程中，如果遇到html中有跨域地址的图片，比如图片存在了别人的云上，截图的时候将不会显示图片，解决方案如下： Js部分 import html2canvas from 'html2canvas' data () { return { imageUrl: 'http://xxx.example.com', // 跨域地址 screenshotImage: ...
html2canvas图片跨域问题
qq_38902230的博客
04-28 5375
针对html2canvas图片跨域问题处理 根据html2canvas文档说明，图片跨域只需配置 useCORS：true即可解决跨域问题： 但是，经过百般尝试，加了这个还是不行，就衍生出很多转成base64来绘制图片，一旦图片大，网络慢，极容易出现图片丢失问题。最终还是找到以下方案解决，直接上代码： <div class='saveImg'> <img :src="bgurl" alt="" crossorigin="anonymous"/> </div> htm
vue解决html2canvas图片 oss跨域问题（适用于跨域）
yangziqi098的博客
04-19 898
1、试过所有百度和谷歌的结果，都是不好用 2、由于本人主攻后端，前端偏弱 3、后台写图片url转base64 拼装好img前缀，前端直接拿base64填充。结果就好了 总结：如果路被堵住了，那么就换一条路。最终肯定能到目的地 ...
vue中解决html2canvas图片跨域问题
jarisMA的博客
08-29 4867
vue中解决html2canvas图片跨域问题 html2canvas在截图的过程中，如果遇到html中有跨域地址的图片，即图片地址非本地，截图的时候将不会显示图片 解决方法： html <div ref="imageDom"> <!-- 支持跨域的地址 --> <img :src="imgUrl+'?'+new Date().getTime()"...
快速解决Canvas.toDataURL 图片跨域的问题
09-02
出现Canvas.toDataURL 图片跨域问题怎么解决呢？下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法。一起跟随小编过来看看吧
Vue动态加载图片在跨域时无法显示的问题及解决方法
11-21
问题：VUE开发时因为要访问后端的接口所以要配置请求转发，如果直接转发全部请求，那么VUE动态绑定的src也会转发到后端，因为图片在前端，所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内，直接编辑...
Three碎片化图片切换动画
06-01
Three基于canvas制作两张图片撕碎切换，图片碎片化特效进行切换，相当震撼。另外，在图片切换过程中，你也可以通过鼠标拖动来查看切换时的具体细节效果。如果将它制作成一个效果独特酷炫的相册或者焦点图插件，相信...
GIFGroover:Gif解码器，用于在canvas元素中显示动画gif
05-13
GIF格罗弗 GIFGroover有什么作用？ 它加载解码并播放gif。 GIFGroover可以用来做什么。 使用GIFGroover将GIF加载为一系列图像（帧... 它无法加载跨域gif。 要从另一个域加载gif，它必须带有CORS标头。 有演示吗？ GI
html2canvas图片跨域_html2canvas截图微信头像
weixin_42522669的博客
12-01 491
方案一：html代码，利用img标签的crossorigin属性微信头像，指向微信的头像地址，跨域请求资源，资源可以显示，但是html2canvas会有跨域的问题，主要利用是 crossorigin="anonymous"，使html2canvas可以截取到该标签如果是自己的服务器上的图片，要提供给其他域名下的页面，crossorigin="annoymous"可能导致错误，这个时候把自己的服务器...
Div通过html2canvas.js生成一张图片(可跨域)
Anticlimax
01-17 2059
第一次开发图片合成时的解决方案: html <div id="capture" style="padding: 10px; background: #f5da55"> <h4 style="color: #000; ">Hello world!</h4> </div> js: html2canvas(document.queryS...
使用 html2canvas 将 HTML 节点转为图片并解决跨域图片
zhiweiding的博客
11-21 8912
使用 html2canvas 将 HTML 节点转为图片并解决跨域图片
vue 解决跨域 canvas 污染问题
09-22
在使用Vue解决Vue中跨域Canvas污染问题时，可以通过以下几个步骤实现。 首先，在服务器端设置响应头信息允许跨域访问，可以在后端接口的响应头中添加如下代码： ``` response.setHeader('Access-Control-Allow-Origin', '*'); response.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); response.setHeader('Access-Control-Allow-Headers', 'Content-Type'); ``` 然后，在Vue项目中的`vue.config.js`文件中配置代理，将跨域请求转发到指定的服务器地址。可以在`vue.config.js`文件中添加如下配置： ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://服务器地址', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 此处的`/api`是需要请求的接口路径，`http://服务器地址`是真实的接口服务器地址。 最后，在Vue组件中引入Canvas元素并设置相关属性，可以在组件中的`mounted`生命周期钩子中进行设置，如下所示： ``` mounted() { let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); // 设置Canvas属性和绘制逻辑 } ``` 这样就可以在Vue项目中解决跨域Canvas污染的问题。通过在服务器端添加跨域请求头信息，配置代理转发请求，并在Vue组件中引入Canvas元素进行绘制，就可以实现解决跨域Canvas污染的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值