玩转html2canvas以及常见问题解决
前端小伙伴经常会遇到页面截图或者把网页中指定的区域(某个大div)的内容转换成png的图片。这个时候常常会用到html2canvas库来实现,js真的很强大。
我最近也遇到了一个需求,需要把输入的文本框里面的文字转换成带有字体样式的图片。于是去研究了一下html2canvas。
html2canvas官网是:http://html2canvas.hertzen.com/,当前最新版本是1.0.0-rc.7。
安装方式有三种,第1种是用npm进行安装:
npm install --save html2canvas
第二种是用yarn,命令如下:
yarn add html2canvas
第三种是直接下载html2canvas.js或者压缩版本html2canvas.min.js。然后直接script方式引入到需要使用这个js库的html文件中即可。
官网给的案例如下(usage), 首先是html部分,有一个div:
<div id="capture" style="padding: 10px; background: #f5da55">
<h4 style="color: #000; ">Hello world!</h4>
</div>
js部分如下:
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
这段代码就是把id为capture的div传给html2canvas,回调中的canvas是被捕获的div对象。
如果要把这个div转换成图片,则还需要增加如下代码:
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas);
// 新增代码 返回图片的URL,设置为png格式
var dataUrl = canvas.toDataURL("image/png")
});
上面代码中的dataUrl是一个base64编码的图片URL地址。
在我的需求中,我需要把这个图片资源保存到服务器中,所以需要在后面发起一个ajax请求(或者post请求)到后端服务,后端接口需要接收这个dataURL,先base64解码,然后再把解码后的图片内容写入到png格式的文件中。
大致代码如下:
public function saveCustomTextToImage(Request $request) {
$imageDataURL = $request->input('dataUrl');
$encodeImage = explode(",", $imageDataURL)[1];
// 解码
$decodeImage = base64_decode($encodeImage);
$storePath = "./img/my-pic.png";
// 写入文件
file_put_contents($storePath, $decodeImage);
$resArray['success'] = true;
$resArray['url'] = "testme";
return response()->json($resArray);
}
如果是不想传给后端处理,想直接跳转浏览器下载,那么之前的js部分的代码可以改为:
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas);
// 新增代码 返回图片的URL,设置为png格式
var dataUrl = canvas.toDataURL("image/png");
var downloadUrl = dataUrl.replace("image/png","image/octet-stream");//图片地址
window.location.href = downloadUrl; // 跳转下载
});
常规玩法说完了,下面说一下常见的坑。
第一个我遇到的就是版本造成的api调用的问题,从上面的js代码可以看出最新的html2canvas是基于Promise实现的,所以可以用".then"的方式进行链式调用。而老版本的html2canvas只能用传统回调方式来写,我的同事就是用的0.4.1版本,所以他的写法和我不一样,如下所示:
html2canvas([document.getElementById('mydiv')], {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var data = canvas.toDataURL('image/png');
// AJAX call to send `data` to server
}
});
第二个遇到的问题是没有任何报错的前提下,生成的图片是空白的。国内的童鞋们对这个问题往往说是去设置初始化选项,就可以解决带有滚动条的页面截取出空白的问题。众所纷纭,还有人说要给被选中的div设置宽高才行。
然而我采用这种方法没有解决问题,Google了很久发现国外的开发真正解决了这个问题。其实还是和版本有关,将最新的版本降会1.0.0rc.0版本就可以了。
希望官方早点解决这个问题,不然强制降版本也不是个事儿啊。
玩转html2canvas以及常见问题解决的更多相关文章
- 老出BUG怎么办?游戏服务器常见问题解决方法分享
在游戏开发中,我们经常会遇到一些技术难题,而其引发的bug则会影响整个游戏的品质.女性向手游<食物语>就曾遇到过一些开发上的难题,腾讯游戏学院专家团Wade.Zc.Jovi等专家为其提供了 ...
- springmvc环境搭建以及常见问题解决
1.新建maven工程 a) 打开eclipse,file->new->project->Maven->Maven Project b) 下一步 c) 选择创建的工程为 ...
- ubuntu安装navicat及常见问题解决
1.安装navicat Step1: 下载Navicat ,网址:http://www.navicat.com/en/download/download.html Step2:进入下载目录,解压压缩包 ...
- OpenStack安装部署管理中常见问题解决方法
一.网络问题-network 更多网络原理机制可以参考<OpenStack云平台的网络模式及其工作机制>. 1.1.控制节点与网络控制器区别 OpenStack平台中有两种类型的物理节点, ...
- Web Deploy发布网站及常见问题解决方法(图文)
Web Deploy发布网站及常见问题解决方法(图文) Windows2008R2+IIs7.5 +Web Deploy 3.5 Web Deploy 3.5下载安装 http://www.iis.n ...
- 接口测试之——Charles抓包及常见问题解决(转载自https://www.jianshu.com/p/831c0114179f)
简介 Charles其实是一款代理服务器,通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的.该软件是用Java写的,能够在Windows,Mac,Linux上使用,安装Charl ...
- charles抓包的安装,使用说明以及常见问题解决(windows)
charles抓包的安装,使用说明以及常见问题解决(windows) https://blog.csdn.net/zhangxiang_1102/article/details/77855548
- Linux运维常见问题解决集锦【转】
作为linux运维,多多少少会碰见这样那样的问题或故障,用点心,平时多注意积累,水平肯定越来越高. 下面就是常见问题解决集锦: 1.shell脚本不执行 问题:某天研发某同事找我说帮他看看他写的s ...
- Python爬虫编程常见问题解决方法
Python爬虫编程常见问题解决方法: 1.通用的解决方案: [按住Ctrl键不送松],同时用鼠标点击[方法名],查看文档 2.TypeError: POST data should be bytes ...
随机推荐
- 为什么说Zoho CRM是最好的销售预测系统?
在文章的开头,我们来讲讲什么是销售预测--销售预测是指利用销售管道中的商机.已完成的配额.有望完成目标的销售团队或个人等关键信息对产品的销售数量与销售金额进行预测的手段.企业在制定销售计划时的重要任务 ...
- table不能使用jQuery的slideDown的解决方法
table不能使用jQuery的slideDown的解决方法 一个后台管理项目中遇到了如下场景 要求父级栏目可以收纳子栏目,即折叠功能,而且要有过渡动画,不能太生硬. 它是用table来实现的,但是遇 ...
- Qt - QLineEdit编辑框
QLineEdit输入内容获取及合理性检查? 控件自带触发信息: void textChanged(const QString &);void textEdited(const QString ...
- Windows(受控主机)上配置
Powershell版本要求及配置 windows需要使用Powershell4.0及以上版本,入下图所示,如果不是4.0及以上的需要升级 一.升级Powershell至3.0+ 1. 下载并安装Mi ...
- 034.Python的__str__,__repr__,__bool__ ,__add__和__len__魔术方法
Python的其他方法 1 __str__方法 触发时机: 使用print(对象)或者str(对象)的时候触发 功能: 查看对象信息 参数: 一个self接受当前对象 返回值: 必须返回字符串类型 基 ...
- 【Java】Jackson解析xml的坑
为了获取xml数据,在spring mvc中针对 @ResponseBody配置了jackson. 刚用的时候内心是狂喜的,终于不用自己解析了---- but----------还是有坑的-- 坑一 ...
- gpcj-07.为什么是连锁零售类公司
1.量化分析的真面目 本课的目的: ·理解零售类公司价值分析的逻辑·学会量化分析公司的思路和原理前言的前沿 和大部分投资者不同,我们的投资核心之一,就是从下而上的分析.宏观经济对我们公司分析影响极少. ...
- element-ui 的el-select如何不显示value,显示value对应的label值
有时根据需要,我们根据v-model的值绑定option, 想要的效果: 实际的效果: 原因: value的格式存在问题,数据库读取到的数据不一定为number类型,需要手动转换. 第一种 <t ...
- nginx 的基础知识(三)
Nginx命令 nginx -s reopen 重启nginx nginx -s reload 重新加载nginx文件 nginx -s stop 停止nginx服务 nginx -s quit ...
- Elasticsearch分页查询
global index global CLIENT index = "guajibao-ipused-2019.10.13" CLIENT = Elasticsearch(hos ...