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");
      });
目录
相关文章
|
5月前
|
移动开发 前端开发 JavaScript
HTML画布
HTML画布
44 0
|
22天前
|
前端开发
在 HTML canvas 绘制文本
在 HTML canvas 绘制文本
11 0
|
Web App开发 移动开发 前端开发
HTML5中canvas元素的介绍和使用
HTML5中canvas元素的介绍和使用
162 0
|
移动开发 前端开发 HTML5
HTML5的canvas标签知之多少
HTML5的canvas标签知之多少
80 0
|
移动开发 前端开发 JavaScript
网页|HTML5 也可以画一画(canvas)
网页|HTML5 也可以画一画(canvas)
124 0
|
移动开发 前端开发 JavaScript
HTML5 —— 初识 Canvas 画布
HTML5 —— 初识 Canvas 画布
109 0
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(一)
HTML5的学习之canvas画布 前面几篇博客我们一直在讲如何使用canvas绘制一下图片,但是没有讲过canvas如何使用,都有哪些属性,方法等。今天我们就来讲一讲canvas的有关属性和方法。 HTML5 标签用于绘制图像(通过脚本,通常是 JavaScript)。 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。 接下来我们来学习一下这个对象的属性和方法,用于在画布上绘制文本、线条、矩形、圆形等等。 HTML代码: <
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(二)
HTML5的学习之canvas画布 这篇文章我么继续学习canvas画布。学习学习canvas画布线条的颜色,渐变,阴影等属性和方法。 属性 1.颜色属性 属性 描述 fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。 strokeStyle 设置或返回用于笔触的颜色、渐变或模式。 2.阴影属性 属性 描述 shadowColor 设置或返回用于阴影的颜色。 shadowBlur 设置或返回用于阴影的模糊级别。 shadowOffsetX 设置或返回阴影与形状的水平距离。 shadowOffsetY 设置或返回阴影与形状的垂直距离。 3.线条样式属性 属性 描述 lineC
|
移动开发 前端开发 HTML5
HTML5的学习之canvas画布(五)
HTML5的学习之canvas画布 canvas其他剩余的方法和属性。 转换 方法 描述 scale() 缩放当前绘图至更大或更小。 rotate() 旋转当前绘图。 translate() 重新映射画布上的 (0,0) 位置。 transform() 替换绘图的当前转换矩阵。 setTransform() 将当前转换重置为单位矩阵。然后运行 transform()。 图像绘制 方法 描述 drawImage() 向画布上绘制图像、画布或视频。 createImageData() 创建新的、空白的 ImageData 对象。 getImageData() 返回 ImageData 对象,
|
移动开发 前端开发 JavaScript
HTML5的学习之canvas画布(四)
HTML5的学习之canvas画布 这篇博客继续学习canvas的文字相关属性和方法。 属性 属性 描述 font 设置或返回文本内容的当前字体属性。 textAlign 设置或返回文本内容的当前对齐方式。 textBaseline 设置或返回在绘制文本时使用的当前文本基线。 方法 方法 描述 fillText() 在画布上绘制"被填充的"文本。 strokeText() 在画布上绘制文本(无填充)。 measureText() 返回包含指定文本宽度的对象。 使用canvas绘制艺术字 HTML代码: <canvas id="my_canvas"&