html2canvas截取屏幕的方法
html2canvas截取屏幕的方法
需要放在服务上运行,否则会报错,
放在服务器里,完美运行
处理截屏模糊的方法
html2canvas 0.5.0-beta3解决截图模糊问题
需要引入html2canvas 0.5.0-beta3
var shareContent = $(".hbdiv");// 需要绘制的部分的 (原生)dom 对象 ,注意容器的宽度不要使用百分比,使用固定宽度,避免缩放问题
var width = shareContent[0].offsetWidth; // 获取宽度
var height = shareContent[0].clientHeight; // 获取高
var offsetTop = shareContent[0].offsetTop; //元素距离顶部的偏移量
var canvas = document.createElement('canvas'); //创建canvas 对象
var context = canvas.getContext('2d');
var scaleBy=10; //获取像素密度的方法 (也可以采用自定义缩放比例)
//var scaleBy=hqmd(context);
canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度,居中,所以没有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题,由于顶部有个距离所以要加上顶部的距离,解决图像高度偏移问题
context.scale(scaleBy, scaleBy);
var opts = {
scale:scaleBy, // 添加的scale 参数
canvas:canvas, //自定义 canvas
width:width, //dom 原始宽度
height:height //dom 原始高度
};
html2canvas($('.hbdiv'), opts).then(function (canvas) {
var strDataURI = canvas.toDataURL("image/jpeg");
$("body").html('');
$("body").append($("<img>").attr("class", 'bimg').attr("src", strDataURI)); });
获取像素密度方法
function hqmd(context){
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
}
html2canvas截取屏幕的方法的更多相关文章
- jquery 截取屏幕
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- shell截取字符串的方法
参考文献: linux中shell截取字符串方法总结 [Linux]如何在Shell脚本中计算字符串长度? 截取字符串的方法一共有八种,主要为以下方法 shell中截取字符串的方法有很多中, ${ex ...
- paip.截取字符串byLastDot方法总结uapi python java php c# 总结
paip.截取字符串byLastDot方法总结uapi python java php c# 总结 ========uapi left_byLastDot right_byLastDot 目前 ...
- shell中截取字符串的方法总结
shell中截取字符串的方法有很多种, ${expression}一共有9种使用方法. ${parameter:-word} ${parameter:=word} ${parameter:?word} ...
- Android实例-程序界面内截取屏幕(XE8+小米2)
结果: 1.只能截取程序界面内的图片. 2.图片有点不清楚,自己设置清楚度. 实例代码: unit Unit1; interface uses System.SysUtils, System.Type ...
- c#中字符串截取使用的方法
AndyZhang welcome to java world c#中字符串截取使用的方法 String substring(int beginIndex) String substring(int ...
- cocos2d-x 截取屏幕可见区域
在游戏中,我们经常需要分享到社交网络的功能.分享时,我们时常会需要用到截屏的功能.目前网上的文章虽然很多,但是都是截取的 设计分辨率(DesignResolutionSize)大小的屏幕,而这个并不是 ...
- PHP截取中文字符串方法总结
<?php @header('Content-type: text/html; charset=UTF-8'); $arr = "sa撒的发dfa多少sfd看sdf得12上24飞452 ...
- java中把list列表转为arrayList以及arraylist数组截取的简单方法
java中把list列表转为arrayList以及arraylist数组截取的简单方法 package xiaobai; import java.util.ArrayList; import java ...
随机推荐
- VS2005下安装boost
本文参照http://dxwang.blog.51cto.com/384651/711798 (一)boost的安装和编译 1:下载boost版本,目前最新的版本为1-47-0 下载地址为htt ...
- 开源代码分析-react-native-eyepetizer
目录结构: app----imgs --- pages ------ home ------ explore ------ follow ------ profile ------ selected ...
- KOA 学习(七) 路由koa-router
一.基本用法 var app = require('koa')(); var router = require('koa-router')(); router.get('/', function *( ...
- 解决CSocket高数据传输问题
这个是自己项目中发现的问题,所以这个不一定适用于你的. 仅供参考. 头文件: ESSocket.h // ESSocket.h : header file // #ifndef ESSOCKET_H ...
- kafka理论
一.消息队列,简称MQ,message queue 生产者:生存数据写到kafka,持久化到硬盘.对同一个Topic来讲,生产者通常只有‘一个’(可以多并发)数据保存时常可以配置,默认保存七天. 消费 ...
- javascript基础:事件
事件: 概念:某些组件被执行了某些操作后,触发某些代码的执行 * 事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了 * 事件源:组件.如:按钮 文本输入框.... * 监听器:代码 * ...
- Codeforces 360A(找性质)
反思 写一写可以发现上限不断更新 一直在想怎么判断NO,刻板拘泥于错误的模型,想要像往常一样贪心地.读入当前值就能判断会不会NO,实际上只要构造完以后,最后把所有操作重新跑一遍看会不会冲突即可判断NO ...
- php工作中常用到的linux命令
压缩并指定目录举例:zip -r /home/kms/kms.zip /home/kms/server/kms 解压并指定目录举例:unzip /home/kms/kms.zip -d /home/k ...
- JS字符串的相关方法
1.字符方法 charAt()和charCodeAt(),都接收一个参数,charAt()返回的是给定位置的字符,charCodeAt()返回的是给定位置字符的字符编码.如: <script&g ...
- line-height:150%/1.5em与line-height:1.5的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...