Я использую Html2canvas, чтобы сделать снимок экрана div и отобразить его в новом окне. Вот мой Javascript функцияЯ хочу сделать снимок экрана с помощью div с помощью Html2canvas

function capture() { 
html2canvas(document.getElementById('screenshot'), { 
onrendered: function(canvas) { 
var img = canvas.toDataURL("image/png");  
window.open(img); 
}} 
); 
}

Проблема с этим кодом является то, что он захватывает только половину DIV, как следующее изображение показывает:

Я изменил идентификатор элемента, который будет захвачен в ' table ', чтобы я мог снимать только снимок таблицы. Но похоже, что скриншот занимает только половину целевого div (с точки зрения высоты).

Теперь, когда я выбираю все тело:

function capture() { 
html2canvas(document.body, { 
onrendered: function(canvas) { 
var img = canvas.toDataURL(); 
window.open(img); 
} 
});

результат следующим образом:

источник

2016-01-02 Qarchli Ismail

Вы можете оставить скрипку ... она отлично работает со мной .. – repzero

Я сделал функцию, которая может регулировать выход на 1 до 200% от окна высота и ширина. Чтобы получить свою часть работы, я сделал следующее:

.... 
    html2canvas(document.body, { 
    onrendered: function(canvas) { 
     document.body.appendChild(canvas); 
      canvas.id = "ctx" 
      var ctx = document.getElementById('ctx'); 
      var img = ctx.toDataURL("image/png");  
      window.open(img); 
     },....

Отрывок

function hide(ele) { 
 
    var ele = document.querySelector(ele); 
 
    ele.style.display = 'none'; 
 
    setTimeout(function() { 
 
    ele.style.display = 'block' 
 
    }, 1000); 
 
    return false; 
 
} 
 

 
function screenShot() { 
 
    var w = document.getElementById('w'); 
 
    var h = document.getElementById('h'); 
 
    var winW = window.outerWidth; 
 
    var winH = window.outerHeight; 
 
    var width = parseFloat(w.value * winW * .01); 
 
    var height = parseFloat(h.value * winH * .01); 
 
    html2canvas(document.body, { 
 
    onrendered: function(canvas) { 
 
     document.body.appendChild(canvas); 
 
     canvas.id = "ctx" 
 
     var ctx = document.getElementById('ctx'); 
 
     var img = ctx.toDataURL("image/png"); 
 
     window.open(img); 
 
    }, 
 
    width: width, 
 
    height: height 
 
    }); 
 
    return false; 
 
}

main { 
 
    position: relative; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    overflow: auto; 
 
} 
 
#panel { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 200px; 
 
    height: 50px; 
 
    z-index: 1; 
 
} 
 
fieldset { 
 
    border-radius: 10px; 
 
    background: hsla(120, 100%, 50%, .5) 
 
} 
 
legend { 
 
    font: small-caps 700 20px/1.4'Source Code Pro'; 
 
} 
 
section { 
 
    height: 33vh; 
 
    width: 100vw; 
 
} 
 
#sec1 { 
 
    background: red; 
 
    border: 1px solid blue; 
 
} 
 
#sec2 { 
 
    background: white; 
 
    border: 1px solid red; 
 
} 
 
#sec3 { 
 
    background: blue; 
 
    border: 1px solid white; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>34571073</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <header id="panel"> 
 
    <fieldset> 
 
     <legend>HTML2Canvas</legend> 
 
     <label for="w">Width.: 
 
     <input id="w" type="number" min="1" max="200" />%</label> 
 
     <br/> 
 
     <label for="h">Height: 
 
     <input id="h" type="number" min="1" max="200" />%</label> 
 
     <br/> 
 
     <input type="button" value="Capture" onclick="hide('#panel'); screenShot();" /> 
 
    </fieldset> 
 
    </header> 
 
    <main> 
 
    <section id="sec1"></section> 
 
    <section id="sec2"></section> 
 
    <section id="sec3"></section> 
 
    </main> 
 
</body> 
 

 
</html>

источник

2016-01-03 04:45:36 zer00ne

у меня есть? одна и та же проблема, я пытался реализовать ваш код, но он по-прежнему занимает только часть div - часть, которая видна на экране. Любая идея? – TwTw

@TwTw Ничего себе, я забыл, что сделал это демо. Вы устанавливали значения высоты и ширины по 100 каждый? Какой браузер и компьютер вы используете? Я просто использовал его с Chrome PC. Кстати, если вы получаете только половину снимка экрана, вы можете увеличить ширину и высоту на 200%. Результат ниже, так что прокрутите вниз полностью. – zer00ne

Я хочу сделать снимок экрана с помощью div с помощью Html2canvas

ответ

Отрывок

Смежные вопросы