html2canvas将html代码生成canvas转换成图片，并且保存到本地

html2canvas 将html转换成canvas展示
convertCanvasToImage 从canvas提取为base64图片
savePic 保存图片方法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head><body><button onclick="fnSavePic()">保存图片</button><div id="capture" style="padding: 10px; background: #f5da55;"><h4 style="color: #000; ">Hello world!</h4></div><script>html2canvas(document.querySelector("#capture")).then(canvas => {document.querySelector('#capture').style.display = 'none'document.body.append(convertCanvasToImage(canvas))});// 从 canvas 提取图片 imagefunction convertCanvasToImage(canvas) {//新Image对象，可以理解为DOMvar image = new Image();// canvas.toDataURL 返回的是一串Base64编码的URL// 指定格式 PNGimage.src = canvas.toDataURL("image/png");image.style.width = "100%"// image.onclick = fnSavePic // 点击图片保存return image;}function fnSavePic() {//  传入 base64 图片savePic(document.querySelector('img').src)}// 保存图片方法function savePic(base64) {var arr = base64.split(',');var bytes = atob(arr[1]);let ab = new ArrayBuffer(bytes.length);let ia = new Uint8Array(ab);for (let i = 0; i < bytes.length; i++) {ia[i] = bytes.charCodeAt(i);}var blob = new Blob([ab], { type: 'application/octet-stream' });var url = URL.createObjectURL(blob);var a = document.createElement('a');a.href = url;a.download = new Date().valueOf() + ".png";var e = document.createEvent('MouseEvents');e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);a.dispatchEvent(e);URL.revokeObjectURL(url);}</script></body></html>

html2canvas将html代码生成canvas转换成图片，并且保存到本地相关推荐

Vue 生成二维码，转换成图片，下载到本地
下载插件 npm i qrcodejs2 引用 import QRCode from "qrcodejs2"; html <button @click="handl ...
html长图转换成pdf,iOS将HTML页面转换成PDF文件保存到本地并分享传输文件
第一次修改:2017.05.26 修改内容:之前的方法在转化带有图片的html页面时会出现图片缺失问题,由于之前我需要转换的html不包含图片,所以没有发现这一问题,现在增加一个直接将webView转 ...
Android 将文字转换成图片并保存起来
记录一下: // 画布private Canvas mCanvas;// 画笔--画图片private Paint mPicturePaint = new Paint();// 画笔--写字priva ...
Android 将文字转换成图片并保存起来，搭建android开发环境实验报告
private Canvas mCanvas; // 画笔--画图片 private Paint mPicturePaint = new Paint(); // 画笔--写字 private Pain ...
js实现HTML转换成图片
1.首先利用html2canvas把html转换成canvas html2canvas($('#content'),{onrendered: function(canvas) {document.bo ...
url地址生成二维码及转换成图片
写出来的小demo,大概就是这样子. 输入任意网址,生成出二维码.移动端不能直接将canvas生成出来的二维码保存为图片(pc端可以),所以将其直接转换成了图片. demo的代码: <!DOCT ...
matlab代码转换成python_[Python]40行代码实现公式转换成图片，手把手教你从模仿到实现...
最近写公式号需要把公式转成图片,有网站能实现转换功能,但是一个一个复制过去然后保存图片太复杂. 能不能实现自动转换并保存图片呢? 这篇文章可以告诉你一个小白如何通过模仿完成一个小功能,并且遇到错误如何 ...
jsonhandle主界面没有显示格式_怎么将图纸导出成图片格式保存
怎么将图纸导出成图片格式保存呢?接下来将与大家分享一下有关CAd图纸转换成图片进行保存的方法. 方法/步骤为了实现CAd转图片操作,首先我们需要在电脑上安装一个CAD编辑软件,如图所示: 待CAD编 ...
java 如何将base64 转成图片并保存,返回地址入库
目标:将前端传进来的base64 转换成图片,并保存到指定目录,然后将目录存入数据库.这个实际项目中还是挺常见的. 代码如下; 先掉 base64ToByte(); 在调用 filePath() ...

html2canvas将html代码生成canvas转换成图片，并且保存到本地

html2canvas将html代码生成canvas转换成图片，并且保存到本地

目录

html2canvas将html代码生成canvas转换成图片，并且保存到本地相关推荐

最新文章

热门文章