html2canvas图片模糊_带你领略 html2canvas

最新推荐文章于 2024-03-31 16:17:18 发布

weixin_39759155

最新推荐文章于 2024-03-31 16:17:18 发布

阅读量247

点赞数

文章标签： html2canvas图片模糊

这个过程中如果碰到一些天坑，不用怕，小编我已经找到网上的一些解决方案了

html2canvas - 项目中遇到的那些坑点汇总(更新中...)

html2canvas库使用中出现的问题及解决方案

如何安装

使用 npm or yarn

npm install html2canvas
yarn add html2canvas

导入

import html2canvas from 'html2canvas'

用法

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

所以一个基本的代码如下：

html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script src="../js/html2cancas.js">script>
  head>
  <body>body>
  <script>
    html2canvas(document.body).then(function (canvas) {document.body.appendChild(canvas)
    })script>
html>

Name	Default	Description
allowTaint	`false`	是否允许跨域渲染画布
backgroundColor	`#ffffff`	画布背景颜色，如果在DOM中没有指定。设置“null”为透明
canvas	`null`	现有的“画布”元素用来作为绘图的基础
foreignObjectRendering	`false`	如果浏览器支持的话是否使用ForeignObject渲染
imageTimeout	`15000`	加载图像的超时(毫秒)。设置为“0”以禁用超时。
ignoreElements	`(element) => false`	从呈现中移除匹配元素。
logging	`true`	为调试目的启用日志记录
onclone	`null`	回调函数，当文档被克隆以呈现时调用，可以用来修改将要呈现的内容，而不影响原始源文档。
proxy	`null`	Url到代理，用于加载跨源图像。如果左侧为空，跨原点图像将不会被加载。
removeContainer	`true`	是否清除html2canvas临时创建的克隆DOM元素
scale	`window.devicePixelRatio`	用于渲染的比例。默认浏览器设备像素比率。
useCORS	`false`	是否尝试使用CORS从服务器加载图像
width	`Element` width	画布的宽度
height	`Element` height	“画布”的高度
x	`Element` x-offset	作物画布坐标
y	`Element` y-offset	作物画布坐标
scrollX	`Element` scrollX	渲染元素时使用的x轴位置(例如，如果元素使用“position: fixed”)
scrollY	`Element` scrollY	呈现元素时使用的y轴位置(例如，如果元素使用“position: fixed”)
windowWidth	`Window.innerWidth	当渲染“元素”时使用的窗口宽度，这可能会影响媒体查询等事情
windowHeight	`Window.innerHeight`	渲染“元素”时使用的窗口高度，这可能会影响媒体查询等事情

如果你希望排除某些元素被渲染，你可以添加data-html2canvas-ignore属性到这些元素，html2canvas将从渲染中排除它们。

下面是所有支持的CSS属性和值的列表。

background
- url()
- linear-gradient()
- radial-gradient()
- background-clip (Does not support text)
- background-color
- background-image
- background-origin
- background-position
- background-size
border
- border-color
- border-radius
- border-style (Only supports solid)
- border-width
bottom
box-sizing
content
color
display
flex
float
font
- font-family
- font-size
- font-style
- font-variant
- font-weight
height
left
letter-spacing
line-break
list-style
- list-style-image
- list-style-position
- list-style-type
margin
max-height
max-width
min-height
min-width
opacity
overflow
overflow-wrap
padding
position
right
text-align
text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-style (Only supports solid)
text-shadow
text-transform
top
transform (Limited support)
visibility
white-space
width
word-break
word-spacing
word-wrap
z-index

截图模糊的原因

原理就是讲canvas画布的width和height放大两倍。

后来学习canvas的时候，才了解到这种写法不同于css的宽高设置，

因为css里的只是展示画布显示的大小，不像这样是canvas真正的内里图画分辨率的大小。

/*图片跨域及截图模糊处理*/
let shareContent = domObj,//需要截图的包裹的(原生的)DOM 对象
    width = shareContent.clientWidth,//shareContent.offsetWidth; //获取dom 宽度
    height = shareContent.clientHeight,//shareContent.offsetHeight; //获取dom 高度
    canvas = document.createElement("canvas"), //创建一个canvas节点
    scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.style.width = shareContent.clientWidth * scale + "px";
canvas.style.height = shareContent.clientHeight * scale + "px";
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
let opts = {
    scale: scale, // 添加的scale 参数
    canvas: canvas, //自定义 canvas
    logging: false, //日志开关，便于查看html2canvas的内部执行流程
    width: width, //dom 原始宽度
    height: height,
    useCORS: true // 【重要】开启跨域配置
};
html2canvas(shareContent,opts).then()

元素设置文字阴影，截图后阴影错乱，所有元素都会有阴影

起初以为是v1.0.0-alpha.12 最新版本的问题,后来改成5也不行，把文字阴影去掉就可以了。

这个问题在大神的博文中有解决方案：https://blog.csdn.net/SDUST_JSJ/article/details/78122610

以下为针对本问题的部分摘录：

文本设置text-shadow截图后却没有文本阴影(2017-09-28)

bug原因

查看了源码，html2canvas确实处理了text-shadow，但是没有正确的处理小数，导致最后文本阴影没有显示出来。具体的代码为第1762行

NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;

解决方案

针对这两行的正则表达式，我添加了针对小数的判断，修改后的代码如下：

NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+(?:\.\d+)?px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+(?:\.\d+)?px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;

测试：

// html2canvas正则匹配
'rgb(102, 102, 102) 11.924px 11.924px 0px'.match(/((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g); // ["rgb(102, 102, 102)"]
"rgb(102, 102, 102) 11.924px 11.924px 0px".match(/(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g); // ["rgb(102, 102, 102)", "924px", "924px", "0px"]
 
// 修改后的正则匹配
'rgb(102, 102, 102) 11.924px 11.924px 0px'.match(/((rgba|rgb)\([^\)]+\)(\s-?\d+(?:\.\d+)?px){0,})/g); // ["rgb(102, 102, 102) 11.924px 11.924px 0px"]
"rgb(102, 102, 102) 11.924px 11.924px 0px".match(/(-?\d+(?:\.\d+)?px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g); // ["rgb(102, 102, 102)", "11.924px", "11.924px", "0px"]

weixin_39759155

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html2canvas图片模糊_带你领略 html2canvas

这个过程中如果碰到一些天坑，不用怕，小编我已经找到网上的一些解决方案了html2canvas - 项目中遇到的那些坑点汇总(更新中...)html2canvas库使用中出现的问题及解决方案如何安装使用 npm or yarnnpminstallhtml2canvasyarnaddhtml2canvas导入importhtml2canvasfrom'html2canvas'用...
复制链接

扫一扫