html2canvas生成图片显示不全

╰半橙微兮° 2022-12-22 09:44 281阅读 0赞

## 原因 ##

**html2canvas只能给屏幕可视范围之内的元素生成图片**

## 办法 ##

1.  滚动节点，使要生成图片的元素进入可视区（笨办法，不推荐）
2.  克隆节点并添加到body，使用克隆节点生成图片

downloadForJS() { 
          // 使用html2canvas 转换html为canvas
          // 获取节点高度，后面为克隆节点设置高度。
          var height = document.querySelector('#canvs').offsetHeight
          // 克隆节点，默认为false，不复制方法属性，为true是全部复制。
          var cloneDom = document.querySelector('#canvs').cloneNode(true);
          // 设置克隆节点的style属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
          cloneDom.style.height = height+"px";
          cloneDom.style.zIndex = '-1';
          // 将克隆节点动态追加到body后面。
          document.querySelector('body').append(cloneDom)
          // 插件生成base64img图片。
          html2canvas(cloneDom).then(function(canvas) { 
            var imgUri = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') // 获取生成的图片的url
            var saveLink = document.createElement('a')
            saveLink.href = imgUri
            saveLink.download = 'downLoad.png'
            saveLink.click()
          })
          // 移除复制的节点
          document.querySelector('body').removeChild(cloneDom)
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关 html 背景图片不显示_HTML

1.HTML是超文本标记语言。 2.HTML不需要翻译，直接由浏览器执行。 3.HTML文件是一个文本文件 4.HTML文件必须使用HTML或HTM为文件名后缀 5.H

- 日理万妓/ 2023年01月10日 13:08/ 0 赞/ 189 阅读

相关 html2canvas生成图片显示不全

原因 html2canvas只能给屏幕可视范围之内的元素生成图片办法 1. 滚动节点，使要生成图片的元素进入可视区（笨办法，不推荐） 2. 克隆节点并添加到

╰半橙微兮°/ 2022年12月22日 09:44/ 0 赞/ 282 阅读

相关使用html2canvas制作图片

@{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html>

阳光穿透心脏的1/2处/ 2022年11月22日 10:28/ 0 赞/ 165 阅读

相关 html生成高清图片大小,html2canvas 生成高清图片

html2canvas.js 要改2处代码第1处代码 line 603window.html2canvas = function(nodeList, options) \{

超、凢脫俗/ 2022年10月06日 07:50/ 0 赞/ 213 阅读

相关 html2canvas将html内容生成canvas图片实现方式

所实现功能：图片、文字合成一张图，并在H5中下载所生成图片。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

约定不等于承诺〃/ 2022年08月31日 15:24/ 0 赞/ 485 阅读

相关 html元素转canvas并一键生成png图片(支持img图片元素)html2canvas、canvas2image

在做项目的时候遇到一个需要把页面上的一些元素一键转成图片并且可以下载，在这里就做一个简单的介绍，希望可以帮到大家！！需要引入html2canvas.js、canvas2i

╰半夏微凉°/ 2022年06月01日 14:09/ 0 赞/ 197 阅读

相关 html2canvas保存图片时，显示网络错误

报错情况，类似下图的情况（图片是其它博客找的）： ![在这里插入图片描述][20190727132027678.png] 需求是为报表生成图片，也真是html转canv

电玩女神/ 2021年11月22日 02:42/ 0 赞/ 506 阅读

相关页面生成图片-html2canvas

页面生成图片-html2canvas 引入js 示例编写html，指定根标签id：table 生成图片base64

客官°小女子只卖身不卖艺/ 2021年10月06日 03:08/ 0 赞/ 424 阅读

相关关于使用html2canvas截取网页，图片不能显示（图片跨域）的问题

最近有一个需要引导用户保存图片分享朋友圈的需求，后面发现使用html2canvas可以进行网页截图。现在聊一聊关于所截的内容中，图片不能正常显示的问题，找了资料说是图片跨域

灰太狼/ 2021年09月16日 00:54/ 0 赞/ 1404 阅读

相关 html2canvas 将html代码转为图片

转换代码到图片使用html2canvas，这是一个非常著名的从浏览器网页截图的开源库，使用很方便，功能也很强大。使用 html2canvas html2c

以你之姓@/ 2021年09月14日 02:06/ 0 赞/ 446 阅读