html2canvas生成图片显示不全

╰半橙微兮° 2022-12-22 09:44 331阅读 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 条评论，331人围观）

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

相关阅读

相关 html2canvas、canvas2image将HTML网页生成图片

[html2canvas][] [canvas2image][] [参考这个文章][Link 1] [canvas教程][canvas] [html2canvas]

Love The Way You Lie/ 2023年01月18日 12:22/ 0 赞/ 9 阅读

相关 html 背景图片不显示_HTML

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

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

相关 html2canvas生成图片显示不全

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

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

相关使用html2canvas制作图片

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关页面生成图片-html2canvas

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

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

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

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

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