html2canvas的使用_随笔

1.图片的偏移问题

有一个很重要的问题需要提醒一下，当你的dom元素没有用到绝对定位或者fixed定位的时候，不要给元素加上偏移量，这样有可能会导致你的图片发生偏移。我们在项目上线的时候遇到了一个很郁闷的问题，保存的图片在预发和测试环境上都没有问题，但是只要上生产环境就会发生图片偏移，后来我们通过修改，发现了是这个定位的问题。

2.对 css3 支持不好

html2canvas 暂不支持的 CSS 样式属性:

background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform

3.背景图片模糊

解决方案：使用img标签来实现background-image的效果

4.图片无法渲染

在img标签内加入crossorigin=‘anonymous’（crossorigin='anonymous’可以触发带跨域请求头Origin的HTTP请求）并给html2canvas设置allowTaint: true配置

~~写在结尾：

目前只是遇到这些问题，希望能帮助到大家

步骤如下：

1.首先，我们准备一个简单的网页用于测试使用。在记事本中输入以下代码：

然后依次点击“文件”——保存，保存文件名为：index.html，保存类型为所有文件。

2.双击打开保存的index.html文件；

3.1.利用marquee标签右移

针对第一种情况，我们可以利用marquee标签来实现图片循环右移。

修改第一个图像的代码：

4，保存后，在浏览器中打开；

2.利用CSS样式右移

针对第二种情况，可以利用css样式来让图片在原来位置的基础上向右偏移给定值距离。

修改第一张图片代码如下：

style=position:relativeleft:10px表示图像在原有位置的基础上向右移动10PX。

可以通过css的position属性定位解决

<html>

<head>

img{ position: fixed top:0 right:0}

</style>

</head>

<body>

<br

> <b

r> <

br>

<br

>

</body>

</html>

提示：以上代码中加入多个br，是为了演示效果更明显

定义和用法

position 属性规定元素的定位类型。

说明

这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7058856.html

html2canvas的使用

发表评论

评论列表（0条）