做自媒体的网站有哪些,上海门户网站怎么登录,郑州建设信息网信用评价系统,网站空间一定要买吗JS-页面截图下载为pdf 关于如何下载为 pdf 在上面的这篇文章中有写#xff0c;大家可以看下#xff0c;下载图片代码在最下面 这时我们发现 three 部分是空白的如下#xff1a; 这就多少有点尴尬了#xff0c;这时我们习惯性的看下后台报错 是不是发现了惊喜#xff0c;…JS-页面截图下载为pdf 关于如何下载为 pdf 在上面的这篇文章中有写大家可以看下下载图片代码在最下面 这时我们发现 three 部分是空白的如下 这就多少有点尴尬了这时我们习惯性的看下后台报错 是不是发现了惊喜html2canvas其实已经给我报错了而且还很贴心的给出了解决方案我们先上代码
renderer new THREE.WebGLRenderer({ antialias: true, // 启用抗锯齿功能preserveDrawingBuffer: true
});其实就是给 WebGLRenderer 多传了一个参数那这个是什么意思呢 官方解释是否保留缓冲区直到手动清除或重写。默认值为false。 preserveDrawingBuffer 是一个WebGL渲染器选项用于确定是否在多个渲染循环中保留drawing buffer。如果设置为true则drawing buffer在多个渲染循环中会被保持这可以提高性能但可能会占用更多的内存。 请注意这个选项在WebGL渲染器的默认行为中并不常用因为通常WebGL会在每次渲染后自动清除drawing buffer。设置preserveDrawingBuffer为true可能会导致性能问题或内存问题特别是如果你在渲染循环中不断请求帧缓存的像素数据。 下载为图片:
const downloadPDF () {const element: any document.querySelector(.app);// const { scrollHeight, scrollWidth, offsetHeight, height } element;const opts {scale: 3, // 缩放比例提高生成图片清晰度useCORS: true, // 允许加载跨域的图片allowTaint: false, // 允许图片跨域和 useCORS 二者不可共同使用tainttest: true, // 检测每张图片都已经加载完成logging: true, // 日志开关发布的时候记得改成 falseheight: element.offsetHeight};html2canvas(element, opts).then((canvas) {const link document.createElement(a);// 通过超链接herf属性设置要保存到文件中的数据link.href canvas.toDataURL(image/png);link.download aaa.png; // 下载文件名link.click(); // js代码触发超链接元素a的鼠标点击事件开始下载文件到本地});
};请大家注意如果 three 中有用到 CSS2DRenderer 或者 CSS3DRenderer这个也要加
labelRenderer new CSS2DRenderer({preserveDrawingBuffer: true
});
