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

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

   想必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. masm的一些常用编译选项

    ml命令行选项: /Dsymbol[=value] 定义给定名称的文本宏 /Fl 生成lst文件 /Sn lst文件中关闭符号表 /I 设置include文件的路径 /link 发送给link的连接器 ...

  2. C# 操作Excel数据透视表

    一.概述 数据透视表(Pivot Table)是一种交互式的表,可以进行某些计算,如求和与计数等,可动态地改变透视表版面布置,也可以重新安排行号.列标和页字段.当改变版面布置时,数据透视表也会按照新的 ...

  3. 快递单号查询免费api接口(PHP示例)

    快递单号查询API,可以对接顺丰快递查询,邮政快递查询,中通快递查询等.这些快递物流企业,提供了快递单号自动识别接口,快递单号查询接口等快递物流服务.对于电商企业,ERP服务企业,集成此接口到自己的软 ...

  4. Webapck项目开发基本构建及配置

    1.创建项目文件夹 myapp 手动创建myapp,或mkdir myapp 2.cd myapp 3.npm init (初始化项目) 4.一路回车(关于项目信息的填写,可以不写,一路回车即可) 可 ...

  5. No plugin found for prefix 'tomcat' in the current project and in the plugin groups和java.net.BindException: Address already in use: JVM_Bind <null>:8080的错误解决

    错误报告:No plugin found for prefix 'tomcat' in the current project and in the plugin groups [org.apache ...

  6. 自动生成MyEclipse 安装破解码

    新建一个class 文件,Debug 模式运行一个,输入任意值 ,回车得到破解安装码 代码文件如下: import java.io.*; public class MyEclipseGen { pri ...

  7. Node笔记三

    global --类似与客户端javascript运行环境中的window process --用于获取当前node进程信息,一般用于获取环境变量之类的信息 console --node中内置的con ...

  8. lvs+keepalive实现主从效果,以及RS健康监测和tcp,udp实现非web的负载均衡

    前面文章讲到了tcp和udp负载均衡,但是没有健康监测,这几天我优化了一下上次的操作.当然,我也是用的跨网段的通讯,因为线上业务主要是海外业务,所以做了iptables流量转发 IP: lvs-mas ...

  9. Eclipse常用插件 + Eclipse快捷键

    J2EE开发IDE,常用的有Eclipse.Myeclipse.Intellij IDEA 版本(Luna):http://www.eclipse.org/downloads/     版本(2015 ...

  10. 使用webpack打包vue工程

    记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自 ...