页面生成图片-html2canvas

客官°小女子只卖身不卖艺 2021-10-06 03:08 404阅读 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 条评论，404人围观）

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

相关阅读

相关 html2canvas 生成图片以及出现白边问题解决办法生成海报

html2canvas 生成图片以及出现白边问题解决办法：我在写demo的时候，pc端调试正常，但是到了移动端图片底部就会出现一条白边，我的解决办法就是：backgr

Myth丶恋晨/ 2022年12月26日 13:29/ 0 赞/ 274 阅读

相关 html2canvas生成图片显示不全

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

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

相关 html2canvas.js----html网页指定div保存为图片canvas

1、使用到的插件:html2canvas.js [html2canvas官方网站][html2canvas] 2、使用： <div id="saveWra

不念不忘少年蓝@/ 2022年12月17日 00:29/ 0 赞/ 178 阅读

相关使用html2canvas制作图片

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关页面生成图片-html2canvas

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

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

相关 html2canvas 将html代码转为图片

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

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