html2canvas使用以及three.js截图下载图片无法显示

2024-07-11 19:23| 来源: 网络整理| 查看: 265

在项目中生成截图是常用的功能需求，一般会选择插件完成，例如：html2canvas

html2canvas应用获取截图

container 元素， ops配置项

import html2canvas from "html2canvas"; let ops={ allowTaint: true, ///允许跨域图片 useCORS: true, //是否尝试使用CORS从服务器加载图像 width: container.offsetWidth, //为了解决安卓手机截图后出现白边的问题 height: container.offsetHeight //为了解决安卓手机截图后出现白边的问题 } html2canvas(container, ops ).then(canvas => { const canvasData = canvas.toDataURL("image/jpeg"); fileDownload(canvasData, 'photo.png'); })

three场景

在生成three.js成截图时 3D场景总是黑色，如下解决办法

方法一：只是为了截图设置preserveDrawingBuffer为true，会导致性能下降。

this.renderer = new THREE.WebGLRenderer({ antialias: true, //是否执行抗锯齿。默认为false. alpha: true, preserveDrawingBuffer:true //是否保留缓直到手动清除或被覆盖,解决截图是黑色 });

方法二：

获取截图的时候调用renderer.render()，再执行下载截图

html2canvas配置项：

如果你希望排除某些元素进行渲染，你可以给这些元素添加 data-html2canvas-ignore 属性，html2canvas 会它们从渲染中排除。

属性名默认值描述allowTaintfalse是否允许不同源的图片污染画布backgroudColor#ffffff画布背景颜色，如果 DOM 中没有指定，则默认为白色。设置 null 则为透明canvasnull现有的 canvas 元素，用作绘图的基础foreignObjectRenderingfalse如果浏览器支持 ForeignObject rendering，是否使用它imageTimeout15000加载图片超时（毫秒）。设置 0 关闭超时ignoreElements(element) => false布尔函数，用于从渲染中删除匹配元素。loggingtrue启用日志记录以进行调试onclonenull在克隆文档流进行渲染时调用的回调函数，可用于修改将在不影响原始源文档流的情况下呈现的内容proxynullUrl 到代理，用于加载跨域图片资源。如果留空，则不会加载跨域图片。removeContainertrue是否清理克隆的 DOM 元素，html2canvas 暂时创建。scalewindow.devicePixelRatio用于渲染的比例，默认为浏览器设备像素比率。useCORSfalse是否尝试使用 CORS 从服务器加载图片widthElement widthcanvas 画布宽度heightElement heightcanvas 画布高度xElement x-offset裁剪画布 x 坐标yElement y-offset裁剪画布 y 坐标scrollXElement scrollX渲染元素时使用的 X 滚动位置（比如元素使用 position: fixed）scrollYElement scrollY渲染元素时使用的 Y 滚动位置（比如元素使用 position: fixed）windowWidthWindow.innerWidth渲染 Element 时要使用的窗口宽度，这可能会影响媒体查询等内容windowHeightWindow.innerHeight渲染 Element 时要使用的窗口高度，这可能会影响媒体查询等内容

【本文地址】

公司简介

联系我们