app内区域截图利用html2Canvals保存到手机 截屏 (html2Canvas使用版本是:0.5.0-beta3。)
2024-08-25 07:56:00
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
最新文章
- Ubuntu 用vsftpd 配置FTP服务器
- 总结common-dbutils.jar
- Mvc action间的传值
- 数据库迁移 Migrator.Net
- c++语法集锦
- 【Hadoop代码笔记】Hadoop作业提交之Job初始化
- 负margin使用权威指南
- Parse--Saving Images(翻译)
- xmlns 属性
- mysqldump原理2
- tomcat中设置多项目共享jar;类包
- myeclipse10.7皴,出口解决war包时报“SECURITY ALERT: INTEGERITY CHECK ERROR”
- oracle_查询Oracle正在执行和执行过的SQL语句
- java基础阅读卷1整理(待更新)
- (转)java for循环的执行顺序和几种常用写法
- Java 类的热替换 —— 概念、设计与实现
- angular4.0配置同时使用localhost和本机IP访问项目
- 【angularjs】使用angular搭建项目,获取dom元素
- Lodop打印设计(PRINT_DESIGN)介绍
- app的创建和注册
热门文章
- bat文件一键运行python自动化脚本
- linux 定时任务设置
- Codeforces Round #601 (Div. 2) A	 Changing Volume
- C++ 实例练习-替换原生数组
- ORA-01789: query block has incorrect number of result columns
- (转)KMP算法
- 关于真机测试root权限问题
- 三维数据曲面图 season绘图 panda绘图
- Apache Kafka(五)- Safe Kafka Producer
- X-Forwarded-For注入漏洞过程记录