截长图的问题

过程

为了截长图，可把我气死了，不是上面白，就是下面一片空白，有的时候只截图了当前窗口的，有的时候甚至给你提醒

Error loading image

岂可休！！！
在历尽一晚上查找之后(对，能力不行，时间来凑！)
我终于找到了解决方法

解决的思路

这一段是我在查找资料的时候复制粘贴过来的，这对我很有帮助，但很遗憾，当时专注解决问题去了，忘记询问以及保存原帖，如原作者认为抄袭，我马上删

1、截图产生空白是因为容器高度设置的问题，设置windowHeight的高度等于页面包含滚动条的高度即可获取滚动条中的内容。这一条就可以解决空白的问题。
2、设置width、height属性的原因是，我们在页面中截图显示的区域宽度和高度是固定的，就是当前屏幕的可见区域。
3、设置x、y坐标的原因是由于页面在有滚动条的时候，需要指定截图的起始位置。本项目中x轴方向不存在滚动条，所以设置为零；y方向有滚动条，所以需要获取一下当前方向的滚动坐标。
4、一般网页中会有图片，图片中有链接地址时，设置useCORS属性可保证图片的加载。

接下来，代码时间

代码中的 #capture 是要截图的区域的ID
其他部分你甚至可以直接复制粘贴

// 导出图片dowmHtml2Canvas() {//    html2canvas(document.querySelector("#capture"), {//     height: document.querySelector("#capture").scrollHeight,//canvas高//     width: document.querySelector("#capture").scrollWidth//canvas宽//   }).then(canvas => {//    var imgUri = canvas.toDataURL("image/jpeg", 1)//    console.log(imgUri)//  })html2canvas(document.querySelector("#capture"), {useCORS: true,width: document.querySelector("#capture").scrollWidth,height: document.querySelector("#capture").scrollHeight,windowWidth: document.querySelector("#capture").scrollWidth,windowHeight: document.querySelector("#capture").scrollHeight,x: 0,y: window.pageYOffset}).then(canvas => {//  var imgUri = canvas.toDataURL("image/jpeg", 1)//  console.log(imgUri)let canvasImg = canvas.toDataURL("image/png");downLoadFile("simple", canvasImg)})function downLoadFile(fileName, canvasImg) {//创建一个a标签var a = document.createElement('a')//指定下载文件名称a.href = canvasImg;a.download = fileName//a 标签 需要点击触发。所以强制给他分派一个点击事件//创建一个鼠标事件let event = document.createEvent("MouseEvents")// 初始化鼠标事件event.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)// 指定元素对象触发事件a.dispatchEvent(event)}}

记得引入 Html2Canvas

html2canvas 截长图并导出图片相关推荐

android webview 图片居中,Android WebView实现截长图功能
本文实例为大家分享了Android实现截长图功能的具体代码,供大家参考,具体内容如下先看看手机自带的长截屏功能: 机型: vivo x9 plus 大胆推测实现逻辑: 1:需要一个可以滚动的Vie ...
5个方法教你苹果手机怎么截长图！
案例:iPhone怎么滚动截取图片? [求助!想要分享长图给朋友,但是我不知道苹果手机怎样才可以滚动截图?希望大家能分享一些方法!] 在使用苹果手机时,我们常常需要截取一些网页或者聊天记录的长图,但是 ...
截屏、录屏、截长图快捷键汇总
文章目录 windows自带 qq自带截长图 snipaste 小知识: 相关链接工作生活中,我们经常要用到截图功能.如果不想安装截图工具,你可以用以下方式: windows自带最快速,但是 ...
Android实现截屏和截长图功能的几种方法
一般情况下各种型号的手机都会有自带的截屏功能,也会有诸如"开关机键+音量键"的截屏快捷键,只要手机是亮屏状态,都会将手机屏幕的可视区域(包含状态栏)全部截取下来. 如果开发中想要调 ...
【Tools】macOS 截图工具推荐xnip（滚动截图截长图、步骤截图）
20181113截图工具先用了腾讯的snip,滚动截图我在chrome和别的软件下测试下没成功.而且需要修改辅助功能. xnip实现的原理似乎是鼠标滚动时软件自己拼接图片. 此外,xnip的步骤截屏非 ...
Android 实现截屏和截长图功能的几种方法
欢迎大家关注我的公众号:**牛角尖尖上起舞** 一般情况下各种型号的手机都会有自带的截屏功能,也会有诸如"开关机键+音量键"的截屏快捷键,只要手机是亮屏状态,都会将手机屏幕的可视区 ...
谷歌浏览器怎么长截图怎么截_chrome长截图如何操作_chrome怎么滚动截长图-win7之家...
在使用chrome浏览器搜索网页的时候,常常会遇到一些篇幅较大的文章,这时有些用户可能不想要通过收藏网址将其保存下来的时候就可以通过截取长图的方式保存自己想要的部分,那么chrome怎么滚动截长图呢? ...
ffmpeg截取jpg图_知道你会截图，但你会截长图吗
知道你会截图,但你会截长图吗?有时候我们工作生活中需要截取保存的一些内容比较长,需要截取长图,但是我们常用的截图方式一般都只能截取当前屏幕内的内容,无法截取下面没有显示的地方.怎么办呢? 在浏览器里, ...
microsoft edge怎么截长图_苹果手机怎么截长图？（2020年最新版）
苹果手机怎么截长图?苹果手机没有自带截长图功能?想要截长图不知道怎么操作?我相信大部分人是不知道用苹果手机怎么截长图的,作为一个搞机多年的小编,今天就教一下大家苹果手机怎么截长图. 很多人都羡慕安卓手 ...

html2canvas 截长图并导出图片

截长图的问题

过程

解决的思路

接下来，代码时间

html2canvas 截长图并导出图片相关推荐

最新文章

热门文章