html2canvas 跨域图片不显示问题

最新推荐文章于 2024-03-15 17:00:39 发布
最新推荐文章于 2024-03-15 17:00:39 发布
阅读量5.9k 收藏
点赞数 1
分类专栏： web前端 文章标签： html2canvas 图片跨域
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012308481/article/details/89766463
版权
html2canvas 跨域图片不显示问题
  1. 看看人家的配置说明https://github.com/niklasvh/html2canvas/blob/master/docs/configuration.md
  2. 里面有几个属性 allowTaint,useCORS,设置为true
  3. proxy属性，按照我理解应该是去代理服务器获取对应的图片资源，不用管这个
  4. 注意跨域问题首先都是要服务器去解决的，在响应头加上跨域的相关设置，这个不多说了，百度一大堆

注：这个方法在iphone6或者其他少部分机型失效，最稳定的方法还是用nginx做代理

nihaoye000
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html2canvas-proxy:html2canvas的代理
05-24
html2canvas-proxy 代理。 当前可用的代理： 适用于Google Appengine的Python
qrcodejs2+html2canvas 生成二维码和海报
11-03
代码放到线上使用，本地生成海报图片显示不了，必须放到服务器运行。qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报qrcodejs2+html2canvas 生成二维码和海报
解决 html2canvas 网络图片渲染不到问题
最新发布
dashixiong47的博客
03-15 192
先把图片加载出来然后用canvas绘制 这样就能实现渲染网络图片了。
html2canvas最新版本git下载的
03-28
包含的有：html2canvas.js html2canvas.mini.js，版本号是v1.0.0-alpha.12,。简洁：著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 链接:http://caibaojian.com/html2canvas.html 来源:http://caibaojian.com html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。 它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。
html2canvas js文件 和java如何设置代理解决跨域问题
06-28
html2canvas js 框架 和 java设置代理解决图片跨域访问时不能生成图片的问题。 zip包含：设置代理使用跨域图片.docx，canvas2image.js，canvg.js，html2canvas.js，html2canvas.min.js，html2canvas.svg.min.js共6个文件
html2canvas
06-18
JavaScript HTML renderer The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page. How does it work? The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements. It does not require any rendering from the server, as the whole image is created on the clients browser. However, as it is heavily dependent on the browser, this library is not suitable to be used in nodejs. It doesn't magically circumvent any browser content policy restrictions either, so rendering cross-origin content will require a proxy to get the content to the same origin. The script is still in a very experimental state, so I don't recommend using it in a production environment nor start building applications with it yet, as there will be still major changes made. Browser compatibility The script should work fine on the following browsers: Firefox 3.5+ Google Chrome Opera 12+ IE9+ Safari 6+ As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported. Usage Note! These instructions are for using the current dev version of 0.5, for the latest release version (0.4.1), checkout the old readme. To render an element with html2canvas, simply call: html2canvas(element[, options]); The function returns a Promise containing the <canvas> element. Simply add a promise fullfillment handler to the promise using then: html2canvas(document.body).then(function(canvas) { document.body.appendChild(canvas); }); Building The library uses grunt for building. Alternatively, you can download the latest build from here. Clone git repository with submodules: $ git clone --recursive git://github.com/niklasvh/html2canvas.git Install Grunt and uglifyjs: $ npm install -g grunt-cli uglify-js Run the full build process (including lint, qunit and webdriver tests): $ grunt Skip lint and tests and simply build from source: $ grunt build Running tests The library has two sets of tests. The first set is a number of qunit tests that check that different values parsed by browsers are correctly converted in html2canvas. To run these tests with grunt you'll need phantomjs. The other set of tests run Firefox, Chrome and Internet Explorer with webdriver. The selenium standalone server (runs on Java) is required for these tests and can be downloaded from here. They capture an actual screenshot from the test pages and compare the image to the screenshot created by html2canvas and calculate the percentage differences. These tests generally aren't expected to provide 100% matches, but while commiting changes, these should generally not go decrease from the baseline values. Start by downloading the dependencies: $ npm install Run qunit tests: $ grunt test Examples For more information and examples, please visit the homepage or try the test console. Contributing If you wish to contribute to the project, please send the pull requests to the develop branch. Before submitting any changes, try and test that the changes work with all the support browsers. If some CSS property isn't supported or is incomplete, please create appropriate tests for it as well before submitting any code changes.
修改html2canvas源码,解决图片跨域问题
JokerSoulClub的博客
01-12 3642
url图片显示并不会跨域, 只有要通过xhr获取其blob对象才会提示跨域 这就是为何通过 html2canvas(dom,{ allowTaint: true //允许污染画布 }).then(canvas=>{ document.body.appendChild(canvas); }) 以上的canvas是可以显示出来的,但仅仅是可以显示,如果dom中存在跨域url的图片,那么生成的canvas是被污染的,无法执行canvas.toDataURL(); html2canvas(dom,{
html2canvas跨域问题的解决办法
胤字堂的博客
10-22 1万+
  最近有项目需要把web页面生成图片，有朋友介绍用html2canvas.js插件实现，用了下的确很好用，但是投到生产环境却遇到了问题，远程加载的图片(跟html不是一个域名，用的阿里的oss图片存储服务器)，出现跨域问题，提示No 'Access-Control-Allow-Origin' header is present on the requested resource.，意思就是...
vue使用html2canvas导出图片 网络图片跨域问题不显示解决方案
weixin_59685936的博客
08-29 722
vue使用html2canvas导出图片 网络图片跨域问题不显示解决方案
使用html2canvas插件截图图片不显示问题 与 JS图片转base64格式
BiangBaing的博客
09-23 2559
点击按钮保存二维码。使用了html2canvas插件配合canvas来进行保存- 保存的时候头像保存失败，本地可以。- 网络图片不能直接保存两个解决方案：1、html2canvas设置配置项2、先将图片转base64，再赋值给img标签的src属性两者都可以解决。
html2canvas使用教程
热门推荐
weixin_45917647的博客
08-09 1万+
html2canvas屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。
详解html2canvas截图不能截取圆角图片的解决方案
12-14
不支持跨域图片 不能在浏览器插件中使用 部分浏览器上不支持SVG图片 不支持Flash 不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问 http://deerface.sinaapp.com/ 试试 :slightly_smiling_...
快速解决Canvas.toDataURL 图片跨域的问题
01-19
如题，在将页面的图片地址进行本地输出时（Html2Canvas.js），因不同源存在跨域问题，会出现toDataURL访问权限问题： 【Redirect at origin ‘http://sub1.xx.com’ has been blocked from loading by Cross-Origin ...
详解使用canvas保存网页为pdf文件支持跨域
12-14
前言 之前上一篇随笔说了Canvas截图网页为图片，下来个新需求，把网页截图后保存为PDF...引入canvas的js文件，js文件获取地址官网主页：http://html2canvas.hertzen.com/ <script type="text/javascript" src="js/h
Vue动态加载图片在跨域时无法显示的问题及解决方法
11-21
问题：VUE开发时因为要访问后端的接口所以要配置请求转发，如果直接转发全部请求，那么VUE动态绑定的src也会转发到后端，因为图片在前端，所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内，直接编辑...
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
u012308481的博客
04-07 1万+
微信小程序scroll-view下拉刷新(附带下拉刷新效果) 背景 在微信小程序上如果使用了scroll-view ，是没办法通过页面上的onPulldownRefresh函数触发下拉刷新的（重点解决的问题） 如果小程序页面上有顶部栏导航栏之类的，在下拉刷新的时候会把顶部栏一起拖下 想自定义下拉刷新的效果 解决方法 核心思路：通过监听touchstart和touchend 事件来记录e.ch...
微信小程序scroll-view下拉刷新组件
u012308481的博客
10-18 4068
微信小程序scroll-view下拉刷新（附带下拉刷新效果） 在微信小程序上如果使用了scroll-view ，是没办法通过页面上的onPulldownRefresh函数触发下拉刷新的（重点解决的问题） 如果小程序页面上有顶部栏导航栏之类的，在下拉刷新的时候会把顶部栏一起拖下拉 想自定义下拉刷新的效果 解决方法 核心思路：通过监听touchstart和touchend 事件来记录e.changedTouc...
sendbeacon + nodejs 踩坑记录
u012308481的博客
04-24 2351
sendbeacon + nodejs 的坑 不想看原理的直接跳过看第5点 sendbeacon的兼容性 浏览器支持：Edge：14+，Firefox：31+，Chrome：39+，Opera：26+，IE：不支持。（网上找的） sendbeacon发送的是post请求，一般来说我们都是要发json数据的，特别提一点:json要字符串化 //1. url要有http或者https开头不能省 /...
html2canvas 跨域问题
12-29
在使用Vue和html2canvas进行截图时，可能会遇到跨域问题。这是由于浏览器的同源策略所导致的安全限制。当你尝试将html2canvas应用于跨域的图片时，浏览器会阻止截图操作。 解决这个问题的一种方法是使用代理服务器。你可以在你的服务器上设置一个代理，将请求发送到目标图片的服务器，并将响应返回给前端。这样，前端的请求就不会涉及跨域问题了。 以下是一个使用代理服务器解决跨域问题的示例代码： 1. 在你的Vue项目中创建一个代理配置文件 `vue.config.js`（如果已经存在，请忽略）。 ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://目标图片的服务器地址', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 2. 在你的Vue组件中使用代理服务器进行截图。 ```javascript import html2canvas from 'html2canvas'; export default { methods: { async captureScreenshot() { try { const canvas = await html2canvas(document.getElementById('target'), { useCORS: true, proxy: '/api' // 使用代理服务器 }); const image = canvas.toDataURL('image/png'); // 处理截图后的操作 } catch (error) { console.error('截图失败：', error); } } } } ``` 在上面的代码中，我们通过设置 `proxy` 选项为 `/api`，将请求发送到代理服务器。然后，代理服务器会将请求转发到目标图片的服务器，并将响应返回给前端。 需要注意的是，你需要将 `http://目标图片的服务器地址` 替换为实际的目标图片服务器地址。 希望以上解决方案能帮助到你！如果你还有其他问题，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值