html2canvas 空白

简介: html2canvas 空白

截取空白原因
百度、谷歌了n久,基本啥方法都试了一遍,还是一直截取空白

主要固原是因为页面有滚动条,然后把滚动条去掉就没有问题。

文档使用方法

html2canvas(document.getElementById("drag_box")).then(canvas=> {
   
        document.body.appendChild(canvas);
        this.url = canvas.toDataURL("image/png");
    });

按照这个方式使用,页面没有滚动条还行,有滚动条时出现大片空白。

解决方案

// 获取元素
      let dome = document.getElementById("drag_box");
      // 生成的时候一定要转入  x 跟  y  轴,如果不传还是会空白
      html2canvas(dome, {
   
        x: dome.offsetLeft, 
        y: dome.offsetTop
      }).then(canvas => {
   
        document.body.appendChild(canvas);
        this.url = canvas.toDataURL("image/png");
      });
目录
相关文章
HTML 颜色值2
本列表展示了按十六进制(Hex)颜色值排序的常见颜色,包括黑色、蓝色、绿色、红色等,共 140 种颜色,方便快速查找和使用。
HTML 颜色值1
HTML颜色值由红、绿、蓝三色组成,使用十六进制表示。每个颜色分量范围从00到FF,颜色值以#开头,可采用3位或6位表示法。例如,黑色为#000或#000000,红色为#F00或#FF0000。
|
5月前
HTML 颜色值
颜色由红(R)、绿(G)、蓝(B)组成。
59 7
|
Web App开发 移动开发 前端开发
HTML5中canvas元素的介绍和使用
HTML5中canvas元素的介绍和使用
206 0
|
移动开发 前端开发 HTML5
HTML5的canvas标签知之多少
HTML5的canvas标签知之多少
119 0
|
移动开发 前端开发 JavaScript
HTML5 —— 初识 Canvas 画布
HTML5 —— 初识 Canvas 画布
121 0
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(一)
HTML5的学习之canvas画布 前面几篇博客我们一直在讲如何使用canvas绘制一下图片,但是没有讲过canvas如何使用,都有哪些属性,方法等。今天我们就来讲一讲canvas的有关属性和方法。 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。 接下来我们来学习一下这个对象的属性和方法,用于在画布上绘制文本、线条、矩形、圆形等等。 HTML代码: <
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(四)
HTML5的学习之canvas画布 这篇博客继续学习canvas的文字相关属性和方法。 属性 属性 描述 font 设置或返回文本内容的当前字体属性。 textAlign 设置或返回文本内容的当前对齐方式。 textBaseline 设置或返回在绘制文本时使用的当前文本基线。 方法 方法 描述 fillText() 在画布上绘制"被填充的"文本。 strokeText() 在画布上绘制文本(无填充)。 measureText() 返回包含指定文本宽度的对象。 使用canvas绘制艺术字 HTML代码: <canvas id="my_canvas"&
|
前端开发 Java JavaScript
html2canvas关于图片不能正常截取
问题 首先说说遇到了什么问题。首先有这么一个需求。需要前端根据后端传过来数据,动态的生成图片。图片中的文案、背景图片、用户头像全部都是通过后端的接口获取。但是使用 html2canvas 生成的canvas有些图片成功的在canvas里生成了。
|
编解码 JavaScript 前端开发
06.HTML5(SVG 和 canvas)
什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟...
1069 0

热门文章

最新文章

相关课程

更多