react中将html转成图片

1.安装 html2canvas

 npm install html2canvas --save

2.案例

import React, { Component } from 'react';
import html2canvas from 'html2canvas';class Sales extends Component {constructor(props) {super(props);this.state = {isPrint: false,isInfo: false,};}componentDidMount () {const maxBoxDemo = document.getElementById('maxBox');const heights = document.body.clientHeight;maxBoxDemo.style.height = heights + 'px';}DPR = () => {if (window.devicePixelRatio && window.devicePixelRatio > 1) {return window.devicePixelRatio;} else {return 1;}}parseValue = (value) => {return parseInt(value, 10);}drawCanvas = async () => {// 获取想要转换的 DOM 节点const dom = document.getElementById('printHtml');// const dom = document.querySelector('printHtml');const box = window.getComputedStyle(dom);// DOM 节点计算后宽高const width = this.parseValue(box.width);const height = this.parseValue(box.height);// 获取像素比-防止模糊const scaleBy = this.DPR();// 创建自定义 canvas 元素const canvas = document.createElement('canvas');// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比canvas.width = width * scaleBy;canvas.height = height * scaleBy;// 设定 canvas css宽高为 DOM 节点宽高canvas.style.width = `${width}px`;canvas.style.height = `${height}px`;// 获取画笔const context = canvas.getContext('2d');// 将所有绘制内容放大像素比倍context.scale(scaleBy, scaleBy);// 将自定义 canvas 作为配置项传入，开始绘制return await html2canvas(dom, { canvas }).then(canvas => {//document.querySelector("#canvasContainer").appendChild(canvas);//return canvas.toDataURL("image/png");return canvas.toDataURL("image/png");});};render () {return (<div id='printHtml'><div onClick={this.drawCanvas}>dowmloadImg</div></div>);}
}export default Sales;

react中将html转成图片相关推荐

XLSX文件中将url转换成图片写入
XLSX文件中将url转换成图片写入新建一个xlsx文件,将图片的url放置表格中取消所有的文件格式,方便处理url转换图片修改表格大小,方便存储图片,选中即将要转换的表格中的数据,将行高设置为 ...
JavaScript实现React实现网页转换成图片截屏下载
最近有项目的需求需要把网站内HTML内容转换成图片保存下载,找了一圈发现一个不错的插件HTML-to-image,npm 包地址:Html-to-image NPM | npm.io,该插件的原理是: ...
c#中将pdf转换成图片（png,jpg....）,无水印
一:需要引用的主键: using O2S.Components.PDFRender4NET; 二:主要逻辑: /// <summary>/// PDF文档所有页全部转换为图片/// < ...
Python中将字节流文件转换成图片文件
Python中将字节流文件转换成图片文件 import urllib3 import os #PIL图像处理标准库 from PIL import Image from io import Bytes ...
maya中将每帧渲染成图片，再用播放器播放
1.polygen菜单栏,window->outliner,选中所有要渲染的物体 2.window->Rendering Editors->Hypershader mental ra ...
JAVA PPT 柱状图_Java 将 PPT 形状（表格、文本框、心形、图表等）保存成图片
MS PowerPoint中的表格.文本框.心形.图表.图片等均可以称为形状,将这些形状保存成图片,便可分类储存,方便日后查找,再利用. 本文将介绍如何使用 Spire.Presentation fo ...
05 react img css修改svg图片样式
react img css修改svg图片样式 svg图片的相关理论定义优点前端引入svg图片的方式方式一:<svg>标签引入,内嵌到 HTML 中方式二,修改svg的颜色方式三 ...
使用 html2canvas 将页面保存成图片
有时我们需要实现在浏览器端直接对整个或部分页面进行截屏,比如移动端常见的"长按网页保存为图片"功能.这个借助 html2canvas 这个第三方 js 库即可实现,下面通过样例演示 ...
HTML表格无法保存图片,怎样将EXCLE表格或HTML保存为图片形式? | excle怎么存成图片的格式...
怎样把图片中的表格转化到Excel 如何将EXCEL表格保存为图片(任何格式) 不能直接保存成图片,建议存成pdf 然后直接截图保存就行个人偶尔会这么做,或者有时候页面不大的话,会直接qq截图保存 ...

react中将html转成图片

react中将html转成图片相关推荐

最新文章

热门文章