html2canvas html截圖插件圖片放大清晰度解決方案，支持任意放大倍數，解決原插件圖片偏移問題

時間 2019-11-09

標籤 html2canvas html canvas 截圖插件圖片放大清晰度解決方案支持任意放大倍數偏移問題欄目 HTML 简体版

原文原文鏈接

html2canvas html截圖插件圖片放大清晰度解決方案，支持任意放大倍數，解決原插件圖片偏移問題

Author:youzebin (2016.12.6)
插件下載地址：https://github.com/niklasvh/h...html

1.首先引入html2canvas.js html2canvas 0.5.0-beta4 最新版便可node

必要步驟1：修改插件的源碼：（修改的地方有兩處）git

1. 代碼第 999 行 renderWindow 的方法中修改判斷條件增長一個options.scale存在的條件：

源碼：github

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});

            }

改成：web

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：

源碼：canvas

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.使用方式app

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，
不少人在插件的使用上存在各類各樣的問題。因此決定完善這篇文章的內容）dom

如下我總結了一些注意事項，在代碼中註釋了，僅供參考。
付：完整使用的demo ,以下：優化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>html2Canvas demo</title>
    <script>
        document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';
    </script>
    <style>
        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;
        }
    </style>
</head>
<body>
<section class="main-container">
    <header class="share-container" id="shareContainer">
        <div class="share-content" id="shareContent">
              <div class="text">
                  <p>文字，圖片等內容</p>
              </div>
        </div>
    </header>
    <footer class="footer-center">
        <button class="btn-share" id="btnShare">截&nbsp;圖</button>
    </footer>
</section>

<script src="static/js/html2canvas.js"></script>
<script>

    //定義查找元素方法
    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();

</script>
</body>
</html>

運行上面的demo 前有如下注意點：

前面的內容沒看過,沒下載過html2canvas.js 沒按照插件改過說明操做的先改好再說
注意元素的樣式的使用：
外層元素width 不能使用百分比 ,避免致使圖片與文字間縮放比例問題
```
錯誤使用方式如  
 .container {
       width:50%;
       margin: 0 auto;
 }
```

須要改爲如：

.container {
       width:300px;
       margin: 0 auto;
 }

完整demo下載地址 github: https://github.com/omwteam/ht...以爲好用就點個讚唄

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

html2canvas html截圖插件圖片放大清晰度解決方案，支持任意放大倍數，解決原插件圖片偏移問題

html2canvas html截圖插件圖片放大清晰度解決方案，支持任意放大倍數，解決原插件圖片偏移問題

1. 代碼第 999 行 renderWindow 的方法中 修改判斷條件 增長一個options.scale存在的條件：

2. 代碼第 943 行 html2canvas 的方法中 修改width,height：

2017.1.7 優化插件使用的方式，並附上demo （插件的改動仍是按照上面的操做流程）

運行上面的demo 前有如下 注意點：

1. 代碼第 999 行 renderWindow 的方法中修改判斷條件增長一個options.scale存在的條件：

2. 代碼第 943 行 html2canvas 的方法中修改width,height：

運行上面的demo 前有如下注意點：