phpcms v9怎么做网站,建设项目网站备案,网站建设边框,网站维护北京html2canvas html截图插件图片放大清晰度处理方案#xff0c;支撑恣意放大倍数#xff0c;处理原插件图片偏移题目Author:youzebin (2016.12.6)插件下载地点#xff1a;https://github.com/niklasvh/h…1.起首引入html2canvas.js html2canvas 0.5.0-beta4 最新版即可必要步骤…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,设置scalevar opts {scale:scale, // 增加的scale 参数canvas:canvas, //自定义 canvaslogging: true, //日记开关width:width, //dom 原始宽度height:height //dom 原始高度};html2canvas(shareContent, opts).then(function (canvas) {//假如想要天生图片 引入canvas2Image.js 下载地点//https://github.com/hongru/canvas2image/blob/master/canvas2image.jsvar img Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);console.log(img);});2017.1.7 优化插件运用的体式格局并附上demo (插件的修改照样根据上面的操纵流程)(不好意思列位近来发明上面插件的运用体式格局上存在截图不完全的bug许多人在插件的运用上存在林林总总的题目。所以决议完美这篇文章的内容)以下我总结了一些注重事项在代码中解释了仅供参考。付完全运用的demo ,以下contentwidthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,user-scalablenohtml2Canvas demodocument.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 元素天生截图canvashtml2Canvas: 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, //自定义 canvaslogging: true, //日记开关宣布的时刻记得改成falsewidth: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;}
