页面生成图片-html2canvas

客官°小女子只卖身不卖艺 2021-10-06 03:08 454阅读 0赞

### 页面生成图片-html2canvas ###

*  引入js
 *  示例
 *   *  编写html，指定根标签id：table
     *  生成图片base64
     *  base64转File对象
     *  base64图片上传

# 引入js #

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>

html2canvas详细参考官方：[http://html2canvas.hertzen.com/][http_html2canvas.hertzen.com]

# 示例 #

## 编写html，指定根标签id：table ##

<table id="table" border="1px" style="height: 100px;width: 100px;background-color: #CCCCCC;" align="center">
    	<tr>
    		<td>1</td>
    		<td>1</td>
    		<td>1</td>
    	</tr>
    	<tr>
    		<td>2</td>
    		<td>2</td>
    		<td>2</td>
    	</tr>
    </table>

## 生成图片base64 ##

$("#bun").click(function() {
    	html2canvas(document.querySelector("#table")).then(function(canvas) {
    		var imgUri = canvas.toDataURL();
    		console.log(imgUri); //图片：base64字符串
    		$("body").append('<a href="' + imgUri + '" download="'+Date.parse(new Date())+'">下载图片</a>');
    	})
    })

备注：测试下载图片，可使用Firefox 和 Chrome浏览器

## base64转File对象 ##

function base64URLtoFile(base64Url, filename) {
    	var arr = base64Url.split(','),
    		mime = arr[0].match(/:(.*?);/)[1],
    		bstr = atob(arr[1]),
    		n = bstr.length,
    		u8arr = new Uint8Array(n);
    	while(n--) {
    		u8arr[n] = bstr.charCodeAt(n);
    	}
    	return new File([u8arr], filename, {
    		type: mime
    	});
    }

## base64图片上传 ##

function fileupload(base64Url) {    
    	var form = document.forms[0];    
    	var formData = new FormData();    
    	formData.append("file", base64URLtoFile(base64Url, Date.parse(new Date()) + ".png"));       
    	$.ajax({
    		url: '/file/upload',
    		type: 'POST',
    		data: formData,
    		dataType: 'json',
    		async: true,
    		cache: false,
    		contentType: false,
    		processData: false,
    		success: function(data) {
    			console.log(data);
    		},
    		error: function(data) {
    			alert(data);
    		}
    	});
    }

[http_html2canvas.hertzen.com]: http://html2canvas.hertzen.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，454人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用html2canvas将页面转化为图片

需求是微信端将页面截屏之后保存到本地，使用了html2canvas插件 install `npm install --save html2canvas` 在所需页面

傷城~/ 2023年10月11日 16:42/ 0 赞/ 40 阅读

相关 html2canvas、canvas2image将HTML网页生成图片

[html2canvas][] [canvas2image][] [参考这个文章][Link 1] [canvas教程][canvas] [html2canvas]

Love The Way You Lie/ 2023年01月18日 12:22/ 0 赞/ 9 阅读

相关 html2canvas生成图片显示不全

原因 html2canvas只能给屏幕可视范围之内的元素生成图片办法 1. 滚动节点，使要生成图片的元素进入可视区（笨办法，不推荐） 2. 克隆节点并添加到

╰半橙微兮°/ 2022年12月22日 09:44/ 0 赞/ 332 阅读

相关使用html2canvas制作图片

@{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html>

阳光穿透心脏的1/2处/ 2022年11月22日 10:28/ 0 赞/ 188 阅读

相关 html生成高清图片大小,html2canvas 生成高清图片

html2canvas.js 要改2处代码第1处代码 line 603window.html2canvas = function(nodeList, options) \{

超、凢脫俗/ 2022年10月06日 07:50/ 0 赞/ 252 阅读

相关 html2canvas将html内容生成canvas图片实现方式

所实现功能：图片、文字合成一张图，并在H5中下载所生成图片。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

约定不等于承诺〃/ 2022年08月31日 15:24/ 0 赞/ 529 阅读

相关 html元素转canvas并一键生成png图片(支持img图片元素)html2canvas、canvas2image

在做项目的时候遇到一个需要把页面上的一些元素一键转成图片并且可以下载，在这里就做一个简单的介绍，希望可以帮到大家！！需要引入html2canvas.js、canvas2i

╰半夏微凉°/ 2022年06月01日 14:09/ 0 赞/ 221 阅读

相关 html页面生成图片并下载

<body> <div id="shareBody"> <div id="code"></div> <p>一些文

梦里梦外;/ 2022年05月12日 01:26/ 0 赞/ 279 阅读

相关页面生成图片-html2canvas

页面生成图片-html2canvas 引入js 示例编写html，指定根标签id：table 生成图片base64

客官°小女子只卖身不卖艺/ 2021年10月06日 03:08/ 0 赞/ 455 阅读

相关 html2canvas 将html代码转为图片

转换代码到图片使用html2canvas，这是一个非常著名的从浏览器网页截图的开源库，使用很方便，功能也很强大。使用 html2canvas html2c

以你之姓@/ 2021年09月14日 02:06/ 0 赞/ 482 阅读