【前端】html2canvas生成图片空白排查data:；（js vue react uniapp）

10月前作者：旺仔西瓜牛奶= 分类：Toy博客阅读(58) 违法举报

这篇具有很好参考价值的文章主要介绍了【前端】html2canvas生成图片空白排查data:；（js vue react uniapp）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

【前端】html2canvas生成图片空白排查data:;

因为要做一个分享图，就用到了html2canvas，一开始是好好的，今天随便测了下，发现图片显示不出来了。打印了下，生成的图片链接变成了data:; 。后面一步一步地排查，发现是页面内容太多了，删减一点内容就能显示出来。然后我又去认真看了下html2canvas的各个参数，发现可以通过调整scale来改善。总结如下：

图片跨域

可以先检查下所选dom中的图片是否跨域，如果跨域了，可增加设置useCORS:true。如图：
html2canvas生成图片空白,前端,javascript,vue.js,reactjs 文章来源地址https://www.toymoban.com/news/detail-769290.html

内容过多
可以检查下所选dom内容是否过多，超出一定范围了会导致base64图片编码生成失败。为了保险起见，可以将html2canvas的scale设置低一点。

到了这里，关于【前端】html2canvas生成图片空白排查data:；（js vue react uniapp）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

【vue-qrcode + html2canvas】前端二维码生成与下载

其实一开始搜的时候，很多还都是推荐的 vue-qrcode ，于是就先用这个，但是发现想要在二维码中间放一个自定义的image的时候，这个库有点麻烦，需要自己将 image 图片盖在二维码上面（官方教程也是如此）。好吧，一开始我也这么干了，但是盖完之后，我需要下载这个有居中

2024年04月17日
浏览(48)
html2canvas截图生产海报图片

图片地址后添加?time=${new Date().valueOf()}，不然会报图片跨域报错原因：这是因为你img是在缓存数据中读取的并没有访问远程这个图片的时候没有携带请求头。确保你的图片服务器支持CORS访问，也就是会返回Access-Control-Allow-Origin等响应头；

2024年02月02日
浏览(51)
小程序采用html2canvas实现html转canvas保存图片

mpaas小程序中采用html2canvas实现html转canvas保存图片使用uniapp将代码打包一份h5部署到服务器 h5要保存的图片组件页面report.vue 安装 npm install --save html2canvas 或 yarn add html2canvas 引入import html2canvas from ‘html2canvas’; ts 小程序中采用webview跳转到h5页面

2024年02月11日
浏览(46)
html2canvas 下载图片，scale、dpi处理图像模糊

1、安装html2canvas 依赖 2、引入html2canvas.js 3、html 4、方法，scale和dpi 解决模糊 html2canvas.js是从git上下载的: https://github.com/eKoopmans/html2canvas/tree/develop/dist 单纯下载图片方法 === 参考： 1、解决html2canvas截图模糊的问题 2、html2canvas生成图片模糊不清楚？两种解决方法 3、html2canvas在

2024年02月17日
浏览(51)
html2canvas生成图片地址Base64格式转成blob在转成file(二进制)可正常发送(保姆教程,复制粘贴可用)

开始: 最终结果: 1. html2canvas方法生成的图片地址已Base64编码形式放在img标签src中可直接展示生成的图片(注意页面标签获取位置 ,还有个 setTimeout 页面渲染需要

2024年02月13日
浏览(52)
html2canvas 截图空白或出现toDataURL‘ on ‘HTMLCanvasElement或img标签没截下来的所有解决办法

1.1以下的参数是必须要有的。 2.1这两个是解决这个报错的 3.1先设置上这个参数 3.2必须在img标签上加上这个参数 3.3最重要的一步就是必须把你的图片路径变成base64格式的，不管是网络图片还是本地图片都不管用必须是base64格式的，转成了base64格式会截图很慢，所以你截图的

2024年02月10日
浏览(58)
vue3中，使用html2canvas截图包含视频、图片、文字的区域

需求：将页面中指定区域进行截图，区域中包含了图片、文字、视频。第一步，先安装第二步，在页面引入：第三步，页面使用： 1）html部分： 2）js部分：刚开始我截出的图只有文字，插图和视频部分是空白的，并没有将页面的插图和视频截进去，最终发现是跨域导致的

2024年02月06日
浏览(51)
Vue使用html2canvas将DOM节点生成对应的PDF

要通过Vue使用html2canvas将DOM节点生成对应的PDF，您需要安装html2canvas和jspdf这两个库。html2canvas用于将DOM节点转换为Canvas，而jspdf用于将Canvas转换为PDF。以下是一个简单的示例代码，展示了如何使用html2canvas和jspdf生成PDF文件：首先，安装html2canvas和jspdf依赖：然后，在Vue组件中

2024年02月11日
浏览(58)
使用nginx+HTML2canvas将任意html网页转为png图片自定义张数

本文简述如何使用nginx+html2canvas将任意网页html转为png图片如果是本地网页，直接进行nginx反向代理就行如果不是本地网页，需要简单利用工具转为本地网页导入导入，不能使用在线的库，只能下载到本地才能导入，因为会有同源限制，否则会报跨域错误。下载导入由于在

2024年01月17日
浏览(57)
纯前端--原生js将html页面变成pdf文件（html2canvas+jsPDF）

1、将文档放在本地，用原生js进行引用和使用。 ① 新建一个名为 html2canvas.min.js 的文件，并且将线上的内容进行复制。 ② 引入 js 文件： 2、使用 npm 进行安装使用：待续。。。 github 中文网站 CDN Jspdf.es.js：ES 2015 模块格式。 Jspdf.umd.js：UMD模块格式，用于 AMD 或脚本标签加载

2024年02月08日
浏览(60)