html2canvas图片位移_html2canvas html截图插件图片放大清晰度处理方案,支撑恣意放大倍数,处理原插件图片偏移题目...
html2canvas html截图插件图片放大清晰度处理方案,支撑恣意放大倍数,处理原插件图片偏移题目
Author:youzebin (2016.12.6)
插件下载地点:https://github.com/niklasvh/h…
1.起首引入html2canvas.js html2canvas 0.5.0-beta4 最新版即可
必要步骤1:修正插件的源码: (修正的处所有两处)
1. 代码第 999 行 renderWindow 的要领中 修正推断前提 增添一个options.scale存在的前提:
源码:
if (options.type === "view") {
canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
} else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement || options.canvas != null) {
canvas = renderer.canvas;
} else {
canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
}
改成:
if (options.type === "view") {
canvas = crop(renderer.canvas, {width: renderer.canvas.width, height: renderer.canvas.height, top: 0, left: 0, x: 0, y: 0});
} else if (node === clonedWindow.document.body || node === clonedWindow.document.documentElement) {
canvas = renderer.canvas;
}else if(options.scale && options.canvas !=null){
log("放大canvas",options.canvas);
var scale = options.scale || 1;
canvas = crop(renderer.canvas, {width: bounds.width * scale, height:bounds.height * scale, top: bounds.top *scale, left: bounds.left *scale, x: 0, y: 0});
}
else {
canvas = crop(renderer.canvas, {width: options.width != null ? options.width : bounds.width, height: options.height != null ? options.height : bounds.height, top: bounds.top, left: bounds.left, x: 0, y: 0});
}
2. 代码第 943 行 html2canvas 的要领中 修正width,height:
源码:
return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
}
return canvas;
});
改成:
width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth;
height = options.height != null ? options.height : node.ownerDocument.defaultView.innerHeight;
return renderDocument(node.ownerDocument, options, width, height, index).then(function(canvas) {
if (typeof(options.onrendered) === "function") {
log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");
options.onrendered(canvas);
}
return canvas;
});
2.运用体式格局
var shareContent = document.getElementById("shareContent");//须要截图的包裹的(原生的)DOM 对象
var width = shareContent.offsetWidth; //猎取dom 宽度
var height = shareContent.offsetHeight; //猎取dom 高度
var canvas = document.createElement("canvas"); //建立一个canvas节点
var scale = 2; //定义恣意放大倍数 支撑小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale,scale); //猎取context,设置scale
var opts = {
scale:scale, // 增加的scale 参数
canvas:canvas, //自定义 canvas
logging: true, //日记开关
width:width, //dom 原始宽度
height:height //dom 原始高度
};
html2canvas(shareContent, opts).then(function (canvas) {
//假如想要天生图片 引入canvas2Image.js 下载地点:
//https://github.com/hongru/canvas2image/blob/master/canvas2image.js
var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
console.log(img);
});
2017.1.7 优化插件运用的体式格局,并附上demo (插件的修改照样根据上面的操纵流程)
(不好意思列位,近来发明上面插件的运用体式格局上存在截图不完全的bug,
许多人在插件的运用上存在林林总总的题目。所以决议完美这篇文章的内容)
以下我总结了一些注重事项,在代码中解释了,仅供参考。
付:完全运用的demo ,以下:
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
html2Canvas demo
document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';
body,
html,
div,
p,
ul,
li,
a,
img,
span,
button,
header,
footer,
section {
padding: 0;
margin: 0;
}
*, :before, :after {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
::-webkit-scrollbar {
width: 0;
opacity: 0;
}
button{
font-family: simsun,"microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
body {
font-family: "microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
color: #000;
background-color: #f5f5f5;
-webkit-overflow-scrolling: touch;
}
.share-container {
padding-top: 0.72rem;
width: 2.35rem;
margin: 0 auto;
}
.share-content {
padding-top: 0.72rem;
height:3rem;
background-color: blue;
border-radius: 5px;
width: 100%;
}
.text{
font-size: 0.36rem;
color: #f2f2f2;
}
.btn-share {
width: 64%;
height: 0.89rem;
background-color: #3baaff;
border-radius: 0.89rem;
border: 1px solid #3baaff;
color: white;
font-size: 0.36rem;
margin: 0.75rem 0 0.67rem;
}
.btn-share:active{
background-color: #1b96c8;
}
笔墨,图片等内容
截 图
//定义查找元素要领
function $(selector) {
return document.querySelector(selector);
}
var main = {
init:function(){
main.setListener();
},
//设置监听事宜
setListener:function(){
var btnShare = document.getElementById("btnShare");
btnShare.onclick = function(){
main.html2Canvas();
}
},
//猎取像素密度
getPixelRatio:function(context){
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
},
//绘制dom 元素,天生截图canvas
html2Canvas: function () {
var shareContent = $("#shareContent");// 须要绘制的部份的 (原生)dom 对象 ,注重容器的宽度不要运用百分比,运用牢固宽度,防止缩放题目
var width = shareContent.offsetWidth; // 猎取(原生)dom 宽度
var height = shareContent.offsetHeight; // 猎取(原生)dom 高
var offsetTop = shareContent.offsetTop; //元素间隔顶部的偏移量
var canvas = document.createElement('canvas'); //建立canvas 对象
var context = canvas.getContext('2d');
var scaleBy = main.getPixelRatio(context); //猎取像素密度的要领 (也能够采纳自定义缩放比例)
canvas.width = width * scaleBy; //这里 因为绘制的dom 为牢固宽度,居中,所以没有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注重高度题目,因为顶部有个间隔所以要加上顶部的间隔,处理图象高度偏移题目
context.scale(scaleBy, scaleBy);
var opts = {
allowTaint:true,//许可加载跨域的图片
tainttest:true, //检测每张图片都已加载完成
scale:scaleBy, // 增加的scale 参数
canvas:canvas, //自定义 canvas
logging: true, //日记开关,宣布的时刻记得改成false
width:width, //dom 原始宽度
height:height //dom 原始高度
};
html2canvas(shareContent, opts).then(function (canvas) {
console.log("html2canvas");
var body = document.getElementsByTagName("body");
body[0].appendChild(canvas);
});
}
};
//末了运转代码
main.init();
运转上面的demo 前有以下 注重点:
前面的内容没看过,没下载过html2canvas.js 没根据插件悛改申明操纵的先改好再说
注重元素的款式的运用:
外层元素width 不能运用百分比 ,防止致使图片与笔墨间缩放比例题目
毛病运用体式格局如
.container {
width:50%;
margin: 0 auto;
}
须要改成如:
.container {
width:300px;
margin: 0 auto;
}
html2canvas图片位移_html2canvas html截图插件图片放大清晰度处理方案,支撑恣意放大倍数,处理原插件图片偏移题目...相关推荐
- Web开发之用canvas2image.js将canvas保存为图片(实现页面截图下载功能)
关于实现页面截图常用的几个js插件库 canvas2image.js html2canvas.js convertImgToBase64.js 废话不多说,直接上demo代码 index.html: ...
- 网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界 将整个网页保存为图片是一个十分有趣的功能,常见于H ...
- uniapp微信小程序图片裁剪插件,支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式
qf-image-cropper2.0 图片裁剪插件 1.效果预览: 2.平台支持: 1.支持微信小程序(移动端.PC端.开发者工具) 2.H5平台(2.1.0版本起) 3. 支持APP平台(2.1. ...
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 多张图 ...
- 怎么用python爬图片_如何用Python来制作简单的爬虫,爬取到你想要的图片
在我们日常上网浏览网页的时候,经常会看到一些好看的图片,我们就希望把这些图片保存下载,或者用户用来做桌面壁纸,或者用来做设计的素材. 我们最常规的做法就是通过鼠标右键,选择另存为.但有些图片鼠标右键的 ...
- Vue 使用 Viewers 实现图片的 放大缩小、 旋转 、 拖拉等操作、支持多图片
目录 方式一 element ui自己搞了一个 这种 方式二 使用插件 方式一 element ui自己搞了一个 这种 方式二 使用插件 先看效果图吧,这是单张图片的.放大缩小支持鼠标滚轴操作. 具体 ...
- 图片在canvas中显示,给canvas添加文字,文字描边,将canvas保存成图片下载到本地
Canvas简介 HTML5新增标签 Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitma ...
- CV:基于face库利用cv2调用摄像头(或视频)根据人脸图片实现找人(先指定要识别已知人脸的文件夹转为numpy_array+输入新图片遍历已有numpy_array)
CV:基于face库利用cv2调用摄像头(或视频)根据人脸图片实现找人(先指定要识别已知人脸的文件夹转为numpy_array+输入新图片遍历已有numpy_array) 目录 输出结果 设计思路 核 ...
- HTML图片不能上下铺满屏幕_这应该是最最最简单的,职场PPT图片排版方法了!...
在之前的文章里,我分享过一些关于图片排版的方法. 比如像三维旋转: 文末有福利! 文末有福利! 文末有福利! 或者是图片虚化: 案例来自互联网 不过,虽然这些方法,能够帮你做出很有创意的图片排版样式, ...
最新文章
- WPF显示经常使用的几个显示文字控件TextBox, TextBlock, Lable
- Delphi的单元文件详解
- redis install note
- tostring 16进制_ToString:身份哈希码的十六进制表示形式
- oracle 如何查看当前用户的表空间名称
- Windows2003下DHCP服务器备份、还原、迁移、绑定
- 使用异步存储提升 Web 应用程序的离线体验
- 【JZOJ4922】【NOIP2017提高组模拟12.17】环
- 数据样本过大 数据维度过大:用户名做一个聚类2.可以将时间分段,达到降维的效果
- GB28181协议——摄像机语音对讲
- java实现ftp文件夹增量上传下载
- Java、JSP新华书店网上售书系统
- 服务器系统事件6013,来源为EventLog 事件 ID:6013类型为信息的系统启动时间为XXXX秒的事件解析...
- AndroidFTP客户端-FTP管家源码
- 微信小程序上传照片并且预览
- SPI - 相关类型及其扩展
- FMI飞马网 | 【线上直播】如何处理好横向关系 在协同与合作中实现双赢(下)
- 汉与匈奴 —— 影响世界之战
- SWIFT电文类型及格式
- 菜鸟都应该知道的倾斜摄影测量知识
热门文章
- setuptools安装_在Ubuntu 18.04系统上安装ERPNext ERP
- PHP登录表单提交前端验证,form表单提交前先用ajax进行验证(前端)
- Redis 是如何执行的?
- 如何在使用ASPMVC4的分部视图中获取数据展示
- C++总结篇(1)命名空间及引用
- haskell程序设计语言
- Kubeflow使用Kubernetes进行机器学习GPU分布式训练
- python 界面开发框架_八款常用的 Python GUI 开发框架推荐
- linux通过时间查询日志,linux按时间查询日志
- python数据库自动重连_python mysql断开重连的实现方法