没有华丽的开场,直入主题,这就是题主随笔风格。随笔既是日常工作积累,也可理解是个工作笔记,方便日后用到之处快速的有方可寻。

   先讲一个需求场景: 定制网页截图传给服务器端保存,用户关注公众号后自动回复该截图

   想必js实现网页截图,大家第一思路是将网页转成canvas再由canvas转成base64图片。没错,我的思路也是这样,在实际开发过程中各种试错、调研也验证了该方案是最佳最便利的html转图片的方案(肯定是!没有之一)。那么方案确定后,大体的实现思路也就可以往该方向去做了。由于开发时间有限,这里我们就不自己手写html2canvas的过程了,最快的速度当然是找现成的插件,经过插件之间的对比,不是样式丢失就是图片丢失,算什么截屏啊?

这里给大家推荐一个我用了还不错的插件:html2canvas.js  github链接:https://github.com/niklasvh/html2canvas

  关键代码:

  

<!--引入html2canvas库-->
<script src="game/js/html2canvas.min.js"></script>
<script>
html2canvas(document.body).then(function(canvas) {
var base64 = canvas.toDataURL("image/png");
console.log(base64 );//生成本地base64图片
});
</script>

  当然,以上还不算个完整的demo!可能有部分朋友会发现截图不完整或者报跨域的错

  这是因为你页面中本地案例的图片或者其他网络图片和你当前项目不在一个域名下,那怎么解决呢?把网络图片或者不在同一域名下的图片转成base64本地图片,再进行截图。

  具体方法如下:

<script>
function Image2Base64(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/png");
return dataURL
}
</script>

js实现html截图生成图片的更多相关文章

  1. 利用JavaScript将页面截图生成图片传给后台的插件:html2canvas

    利用JavaScript将页面截图生成图片传给后台的插件:html2canvas 一.总结 一句话总结: 10 <script type="text/javascript"& ...

  2. js依赖mui.css生成图片验证码

    js依赖mui.css生成图片验证码 相关css和js引入路径 https://cdnjs.cloudflare.com/ajax/libs/mui/3.7.1/css/mui.css https:/ ...

  3. 使用html2canvas.js实现页面截图并显示或上传

    最近写项目有用到html2canvas.js,可以实现页面的截图功能,但遭遇了许多的坑,特此写一篇随笔记录一下. 在使用html2canvas时可能会遇到诸如只能截取可视化界面.截图没有背景色.svg ...

  4. 移动端js模拟截屏生成图片并下载功能的实现方案

    一.根据PM需求如下: 移动端wap 实现将二维码生成图片下载至用户手机相册保存 二.根据现有思路: 1.使用第三方工具html2canvas,将页面中指定范围的dom转换为canvas 2.随后使用 ...

  5. js实现视频截图,视频批量截图,canvas实现

    截取视频的某一时间的图像并保存 利用canvas的绘画能力画出视频某一帧的视频画面, 获得到图像之后转换成base64图像, 再利用a标签的实现自动保存到本地 html代码 <!DOCTYPE ...

  6. three.js canvas内场景生成图片 canvas生成图片

    第一种最简单的方法: 1 threeBox.render();//重点 解决拿到图片后为黑色 2 3 let src=threeBox.renderer.domElement.toDataURL(); ...

  7. 如何更改OS系统下截图生成图片格式 jpg pdf

    Mac系统下快速截屏的快捷键: 1.截全屏: shift + command + 3 2.选取截屏 shift + command + 4 生成的图片,系统默认格式忘了,反正不好用,用下面命令更改生成 ...

  8. js获取视频截图

    参考:https://segmentfault.com/q/1010000006717959问题:a.获取的好像是第一帧的图?第一帧为透明图时,获取的个透明图片b.得先加载视频到video,做视频上传 ...

  9. js能否实现截图,截图之后的图片数据再下载到本地?

    https://www.zhihu.com/question/20763177 http://www.cnblogs.com/yanweidie/p/5203943.html

随机推荐

  1. Zeromq自连接错误

    Zeromq自连接错误(金庆的专栏)Zeromq消息中间件开发的服务器和客户端不必按顺序启动,客户端可以在服务器开启之前启动.这是Zmq特别好用的一大特性.利用该特性,网游各功能服务器可以任意重启,实 ...

  2. 网站系统压力测试Jmeter+Badboy

    最近项目需要压力测试,因此搜了几款试用,首选的是LoadRunner这款大名鼎鼎的测试软件: LoadRunner11 下载请猛戳这里 传送门LoadRunner破解文件 下载请猛戳这里 传送门Loa ...

  3. 译文:ovs+dpdk中的“vHost User NUMA感知”特性

    本文描述了"vHost User NUMA感知"的概念,该特性的测试表现,以及该特性为ovs+dpdk带来的性能提升.本文的目标受众是那些希望了解ovs+dpdk底层细节的人,如果 ...

  4. 关于在vim中的查找和替换

    1,查找 在normal模式下按下/即可进入查找模式,输入要查找的字符串并按下回车. Vim会跳转到第一个匹配.按下n查找下一个,按下N查找上一个. Vim查找支持正则表达式,例如/vim$匹配行尾的 ...

  5. Form 和 Input 对象

    更改表单的 action 属性 <html> <head> <script type="text/javascript"> function c ...

  6. web3.js

      安装 别按照官网上面 npm install web3 下载,我已经吃过一次亏了 npm initnpm install ethereum/web3.js --save   web3.isConn ...

  7. HTML元素的专用传参数据属性

    把参数直接放到事件定义里面,类似下面这样,也是可以,但是这样不够Nice. <a href="javascript:void(0)" onclick="clickh ...

  8. es6(一):es6介绍以及let,const

    es是js的规范,而js是具体实现 将es6转化为es5代码工具:运用的多的是babel 在线转换地址:babel,traceur(属于谷歌)   1.let申明变量:let其实可以完全取代var,并 ...

  9. java使用Myeclipse创建Hibernate项目碰到的诸多问题总结

    这两天一直在搞Myeclipse创建Hibernate的1对多映射. 由于缺乏经验,可算是把我坑惨了.控制台是不停地报错啊~~~~我差点就崩溃了. 1.看的是慕课网的Hibernate一对多映射教程, ...

  10. 分布式逻辑管理平台XXL-GLUE

    <分布式逻辑管理平台XXL-GLUE>    一.简介 1.1 概述 XXL-GLUE 是一个分布式环境下的 "可执行逻辑单元" 管理平台, 学习简单,扩展JVM的动态 ...