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

最新文章

  1. Ubuntu 用vsftpd 配置FTP服务器
  2. 总结common-dbutils.jar
  3. Mvc action间的传值
  4. 数据库迁移 Migrator.Net
  5. c++语法集锦
  6. 【Hadoop代码笔记】Hadoop作业提交之Job初始化
  7. 负margin使用权威指南
  8. Parse--Saving Images(翻译)
  9. xmlns 属性
  10. mysqldump原理2
  11. tomcat中设置多项目共享jar;类包
  12. myeclipse10.7皴,出口解决war包时报“SECURITY ALERT: INTEGERITY CHECK ERROR”
  13. oracle_查询Oracle正在执行和执行过的SQL语句
  14. java基础阅读卷1整理(待更新)
  15. (转)java for循环的执行顺序和几种常用写法
  16. Java 类的热替换 —— 概念、设计与实现
  17. angular4.0配置同时使用localhost和本机IP访问项目
  18. 【angularjs】使用angular搭建项目,获取dom元素
  19. Lodop打印设计(PRINT_DESIGN)介绍
  20. app的创建和注册

热门文章

  1. bat文件一键运行python自动化脚本
  2. linux 定时任务设置
  3. Codeforces Round #601 (Div. 2) A Changing Volume
  4. C++ 实例练习-替换原生数组
  5. ORA-01789: query block has incorrect number of result columns
  6. (转)KMP算法
  7. 关于真机测试root权限问题
  8. 三维数据曲面图 season绘图 panda绘图
  9. Apache Kafka(五)- Safe Kafka Producer
  10. X-Forwarded-For注入漏洞过程记录