html2canvas保存网页到手机,利用html2canvas将当前网页保存为图片.
先分析下这个技术可实现的方式,以及优缺点吧!
前端实现
缺点是:兼容性查,需要高级浏览器支持,因为需要支持 canvas 绘图,还有就是会操作 html5 canvas api。(如果不会使用canvas的话,要么去学,要么这条方案当我没说)
优点是:用户体验性很赞,很流畅。
大体实现方法:使用canvas。最终可将绘制的图像生成成图片。用户可以另存为保存,也可以将生成的二进制图片,上传服务器,生成连接。
后端实现
缺点是:体验性会差很多,因为需要和服务器交互,体验流畅度会差一点。 优点:客户端兼容性好,基本支持所有浏览器。
大体方法:前端负责组织数据。后端负责根据数据生成图片。后端解决的话就比较简单了,有了数据买就是把位置对好,生成图片,就行了。 nodejs, python, java, php 都用很多绘图库。
具体实现流程这里就不废话了。点到为止。下面便是具体的代码实现
html2canvas网页截图
$(function(){
print();
});
function print(){
html2canvas( $("#canv") ,{
onrendered: function(canvas){
$(‘#down_button‘).attr( ‘href‘ , canvas.toDataURL() ) ;
$(‘#down_button‘).attr( ‘download‘ , ‘myjobdeer.png‘ ) ;
var html_canvas = canvas.toDataURL();
$.post(‘‘, {order_id:1,type_id:2,html_canvas:html_canvas}, function(json){
}, ‘json‘);
}
});
}
此网页演示了html2canvas截图后将截图后的网页追加到了原网页之上
这里可以看作是边界线
下载
if (isset($_POST[‘html_canvas‘])) {
$order_id = $_POST[‘order_id‘];
$type_id = $_POST[‘type_id‘];
$html_canvas = $_POST[‘html_canvas‘];
$image = base64_decode(substr($html_canvas, 22));
header(‘Content-Type: image/png‘);
$filename = $order_id . ‘-‘ . $type_id . ".png";
$fp = fopen($filename, ‘w‘);
fwrite($fp, $image);
fclose($fp);
}
?>
原文:http://www.cnblogs.com/qqblog/p/6791518.html
html2canvas保存网页到手机,利用html2canvas将当前网页保存为图片.相关推荐
- H5 -- (功能)基于html2canvas实现长按网页保存为图片到本地
1.需求:长按页面中的一部分(里面有动态获取的用户昵称.头像及动态生成的二维码),弹出下载框,点击后将这部分保存为图片下载到手机里(如图) 2.分析:由于有动态获取数据,需等DOM元素生成之后,再将这 ...
- 基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: **方案1:**将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输 ...
- html2canvas 把h5网页保存为图片 区域保存
html2canvas 把h5网页保存为图片 想把一个网页得某些元素,绘制成图片保存,有些数据是接口动态加载的,所以不能UI给到图片,需要我们把api的数据也绘制到图片上 html2canvas这个插 ...
- uniapp移动app实现将网页保存为图片到手机相册
项目中新增了一个需求,将页面保存为图片,且保存在相册中. Android端 运用到的技术点: html2canvas:将网页绘制base64的图片 plus.nativeObj.Bitmap:下载ba ...
- 如何将网页保存为图片_如何一键保存网页上的所有图片至 iPhone 相册
哎妹有时候在家闲的无聊,就喜欢翻翻浏览器啊,新闻什么的,结果看到好多图片想保存下来,一个一个又太麻烦了,那怎么办呢?哎妹给你支个招,让你一键保存网页上的所有图片. 1.安装一款叫做 Save Imag ...
- python网页保存为图片_使用Python保存网页上的图片或者保存页面为截图
Python保存网页图片这个是个比较简单的例子,网页中的图片地址都是使用'http://.....jpg'这种方式直接定义的. 使用前,可以先建立好一个文件夹用于保存图片,本例子中使用的文件夹是 d: ...
- 利用jsoup 如何从网页中下载图片
来自:http://www.open-open.com/bbs/view/1320576549952 如何从网页中下载图片 如果做为爬虫很有必要从网页中下载图片到本地,那么我们利用jsoup来进行该操 ...
- edge保存网页html,微软Edge浏览器不支持网页保存功能怎么办?
微软 Edge 浏览器自发布以来一直在不断完善与改进中,在添加了扩展插件功能后,Edge 浏览器的功能性得到了显著改进,但对于某些用户来说,Edge 仍旧欠缺一项非常重要的特性--将网页保存至本地设备 ...
- python将网页保存为图片_使用Python保存网页上的图片或者保存页面为截图
# -*- coding: UTF-8 -*- import os,re,urllib,uuid #首先定义云端的网页,以及本地保存的文件夹地址 urlPath='http://gamebar.com ...
最新文章
- raid1 raid2 raid5 raid6 raid10的优缺点和做各自raid需要几块硬盘
- mongoose populate 返回 指定 字段
- 二叉树为空意味着二叉树_不怕面试被问了!二叉树算法大盘点
- Java 基础数据结构介绍
- xml转换为json格式时,如何将指定节点转换成数组 Json.NET
- win10键盘全部没反应_Win10的键盘失灵解决办法
- python指定Gpu
- CCF NOI1136 单词分类
- 【扫描线】【POJ-1177】Picture【周长并】
- 尚硅谷大数据Spark之RDD转换算子学习笔记及面试题
- Java使用C3P0连接池详解
- 三维地理信息系统空间的可视化分析
- iOS之HealthKit使用
- JavaScript函数(二)回调函数
- Remix Icon
- 世界上最小的操作系统MenuetOS,仅有1.4M,安装运行全教程
- 2023年五面蚂蚁、三面拼多多、字节跳动最终拿offer入职拼多多
- 虚函数 2 之虚函数的定义
- outlook你的邮件服务器证书无效,outlook, webmail.xxx.com 证书无效过期,无法连接到服务器,outlook无法收发邮件...
- 如何理解垂直行业CRM?
热门文章
- python机器学习案例系列教程——算法总结
- python机器学习库教程——结巴中文分词
- Linux查看CPU使用率、内存使用率等
- mysql数据库连接数瓶颈_MySQL数据库性能优化之硬件瓶颈分析
- SPOJ Can you answer the Queries系列
- python学习笔记之函数(方法)(四)
- WebStorm连接Github教程
- java.lang.ClassNotFoundException:oracle.jdbc.OracleDriver
- c#动态编译并动态生成dll
- js判断变量类型是否为字符串,不符合条件则赋值为‘无’