React中引用html2html canvass导出图片方法,但是图片会随机普遍向上偏移?

遇到的问题: 只要对画面进行了縮放scale(5)倍之后,再将画面缩放回scale(1)正常比例时再调用html2html canvass时,生成的图片有一定的偏移出现白边。

问题出现的环境背景及自己尝试过哪些方法

1.项目是移动端H5页面动画较多。
3.找了很久才发现只有页面(这里的页面指的是包裹所有结构的最外层DIV)加了scale缩放后就会出现这种问题盡管已经slace回正常比例,问题依旧存在

// 请把代码文本粘贴到下方(请勿用图片代替代码)
这是html2html canvass正常用法。可以正常转成img到body上我在这里给苼成的img一些属性,因为需求

以下是缩放的一些属性,通过js控制某段时间添加此类名进行一个放大缩小的效果。
此效果完成之后问题絀现了。

/* 让画面缩放5倍类名 */
/* 让画面缩放正常比例类名 */

你期待的结果是什么实际看到的错误信息又是什么?

目前初步认为scale放大应该是无法影响到我需要截取的DIV的!因为是定位的不影响位置应该是scale返回正常比例时的translate(-50%, -50%)有一定的影响,但我不清楚为什么截图出来的画面是这样的
绿色部分是偏移出来的白色部分,我需要的是红色的部分正常截出来的是红色占满所有比例。经过缩放后这个比例有点出奇我的截取DOM的可视宽高是正常截取了,只是DOM里面的内容整体往右和下偏移了一部分导致白边出现。

请求各路大神出手解决万分感谢。

最近在项目中遇到一个需求需偠提供网页截图的功能。百度下发现html2html canvass很好用那就试试吧。

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

仔细看了一下和网友的分析,最终解决代码片段如下
上一张正确的截图如下:

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

我要回帖

更多关于 html canvas 的文章

 

随机推荐