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截图插件图片放大清晰度处理方案，支撑恣意放大倍数，处理原插件图片偏移题目...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。