app内区域截图利用html2Canvals保存到手机 截屏 (html2Canvas使用版本是:0.5.0-beta3。)
app内区域截图利用html2Canvals保存到手机
app内有时候需要区域内的截图保存dom为图像,我们可以使用html2Canvas将dom转换成base64图像字符串,然后再利用5+api保存至app
,通用代码如下:
function saveDomImage (html2Canvas, dom, fileName) { //使用之前要引入 html2Canvas.js
if(mui.os.plus){
if (typeof html2Canvas == null)
throw Error("html2Canvas is not defined");
if (dom == null)
throw Error("saveDomImage param : dom is null");
if (fileName == null || fileName == "")
fileName = "untitled.png"; var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio || ;
return (window.devicePixelRatio || ) / backingStore;
}; var _canvas = document.createElement('canvas'); var ctx = _canvas.getContext('2d');
var ratio = getPixelRatio(ctx);
ctx.scale(ratio,ratio); var w = dom.offsetWidth;
var h = dom.offsetHeight; _canvas.width = w;
_canvas.height = h;
_canvas.style.width = w * ratio + 'px';
_canvas.style.height = h * ratio + "px"; html2Canvas(dom, {
allowTaint:true,
logging: false,
profile: true,
useCROS: true,
canvas : _canvas,
onrendered: function (canvas) {
var dataUrl = canvas.toDataURL();
var b = new plus.nativeObj.Bitmap('bitblmap'); b.loadBase64Data(dataUrl, function () {
/*这里一定要是_doc目录*/
b.save("_doc/" + fileName, {overwrite: true}, function (object) {
//保存到相册
plus.gallery.save("_doc/" + fileName, function () {
mui.toast("图片已保存到相册");
}, function () {
mui.toast("图片保存失败");
});
}, function () {
mui.toast("图片保存失败");
});
}, function () {
mui.toast("图片保存失败");
});
}
});
}
}
至于为什么要是_doc目录,本人未查实原因,hbuilder测试包可以用 _www ,但是打出来的正式包只能用 _doc。
有好心人知晓请告诉本人。
这里html2Canvas使用版本是:0.5.0-beta3。(用最新版本截屏出来的图像不模糊)
说明:
1 ,dom元素最好是文档流定位的,用absolute 和 fixed 截取出来的有偏移, 如果想解决这个问题,可以把这个dom复制到新的无偏移(top:0 ;left:0)的dom里面,再对新dom执行保存操作。
2,保存的图片肯定是没有原图清晰的,勉强也能接受,如果图上有二维码识别, 尽量把二维码做的识别度高点。
3,本功能适合保存dom合成的图片。屏幕全截屏,保存远端img图片,mui提供更简单的方式, 请参考其他文档。
html2Canvas: http://html2canvas.hertzen.com
app内区域截图利用html2Canvals保存到手机 截屏 (html2Canvas使用版本是:0.5.0-beta3。)的更多相关文章
- app内区域截图利用html2Canvals保存到手机 截屏 (html2Canvals2版本1.0.0)
html2canvas($(], {scale:,logging:false,useCORS:true}).then(function(canvas) { var dataUrl = canvas.t ...
- Android Multimedia框架总结(二十五)MediaProjection实现手机截屏(无须root)
转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/53966818 前言:一年半多以前 ...
- android手机截屏、录屏
1. 手动截屏,通过其他第三方软件发送截图,或者从手机取出截图 2. 使用命令截图,将截图保存到手机,再拉取到电脑 #!/bin/sh #运行 sh screenshot name picName=$ ...
- Android手机截屏
刚开始打算做一个简单的截屏程序时,以为很轻松就能搞定. 在Activity上放一个按钮,点击完成截屏操作,并将数据以图片形式保存在手机中. 动手之前,自然是看书和网上各种查资料.结果发现了解的知识越多 ...
- iOS 手机截屏
百度地图自带截图功能,可以截取路线列表,保存到本地.可是对比发现截下来的图片并不是app中看到的那样,截图中头部加入了搜索的起点和终点,每段路程的详细站点都已展开,而且图片会根据路线的长短自动判断图片 ...
- [AIR] 利用SnapShot.exe实现QQ截屏功能
主类(可作文档类): package { import flash.display.Bitmap; import flash.display.Sprite; import flash.events.E ...
- iOS手机截屏使用
.截屏 保存 .data //登录成功进行截屏 //截取屏幕大小 UIGraphicsBeginImageContext([[UIScreen mainScreen]bounds].size); [s ...
- Android手机截屏方法
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/> <u ...
- Unity3d 截屏保存到相册,并且刷新相册
要做一个截图的功能,并且玩家可以在相册中看到. 做的时候遇到了三个问题: 1.unity自带的截图API,Application.CaptureScreenshot在Android上不生效 2.图片保 ...
随机推荐
- C++——动态内存分配1
9.动态内存分配 new 类型名T(初值列表) 其功能是在程序执行期间申请用于存放T类型对象的内存空间,并依初值列表赋以初值,结果值:成功则T类型的指针,指向新分配的内存:失败则为0(null).若 ...
- Opencv之像素值的获取
灰度图像${\rm{M}} \times {\rm{N}}$的像素矩阵值为0~255,像素值越大越亮.${{\rm{I}}_{{\rm{i}}{\rm{j}}}}$,i表示行的位置,j 表示列的位置即 ...
- php server整理
$_SESSION['PHP_SELF'] -- 获取当前正在执行脚本的文件名. $_SERVER['SERVER_PROTOCOL'] -- 请求页面时通信协议的名称和版本.例如,“HTTP/1.0 ...
- 油候插件grant的使用
// ==UserScript== // @name Test Baidu // @namespace http://www.baidu.com/ // @version 0.1 // @descri ...
- AcWing 1016. 最大上升子序列和
#include<iostream> using namespace std ; ; int f[N]; int a[N]; int main() { int n; cin>> ...
- open函数 文件设置缓冲
# 注释 将文件写入硬件设备时,使用系统调用,这类I/O操作一般时间很长 # 为了减少I/O次数操作,文件通常使用缓冲区(有足够的数据才进行系统调用) # 文件缓冲行为分为: # 全缓冲: open函 ...
- mysq,oraclel复杂SQL操作汇总
一.对数据库原有字段默认值的设置 1.删除原有字段默认值 alter table 表名 alter column 字段 drop default;2..重写原有字段默认值alter table 表名 ...
- Python_递归函数
楔子 在讲今天的内容之前,我们先来讲一个故事,讲的什么呢?从前有座山,山里有座庙,庙里有个老和尚讲故事,讲的什么呢?从前有座山,山里有座庙,庙里有个老和尚讲故事,讲的什么呢?从前有座山,山里有座庙,庙 ...
- SpringCloud Netflix Feign
调用其它机器上的服务(远程调用)有2种技术:REST.RPC. REST 注入RestTempalte,服务提供者的url要写成RESTful风格,在url中传递参数. 如果参数很多,url会有一长串 ...
- HTML的图像标签
网页的图像标签 常见的图像格式 JPG GIF PNG BMP 图像标签可以带属性,格式为: <img src="path" alt="text" tit ...