Hacer una captura de imagen adecuada de la pantalla actual usando jquery o PHP o Convertir div a pdf
Escribo un código para convertir svg a svg en línea y tomar una captura de pantalla de ese div. Verifique. Copie este código int en su host local y pruébelo. Porque la captura de pantalla es diferente en diferentes anchos.
https://jsfiddle.net/7bqukhff/15/
<link href="style.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdn.rawgit.com/canvg/canvg/master/canvg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="test">
<div class="description-div">
<p>Sample description</p>
</div>
<div class="img-div" id="img-div"></div>
</div>
<form class="cf">
<div class="half left cf">
<input type="text" name="user-name" required>
<select name="design-name" class="desgign-class" required>
<option value="" >select</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="submit" name="submit" value="submit" class="submit">
</div>
</form>
</div>
<div class="new">
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>
</div>
<script>
$(function() {
$(".desgign-class").on("change",function(){
var op=$(this).val();
if(op!=0){
$('.btn').show();
$('.img-div').html('');
if(op==2){
for(var i = 0;i<op;i++){
$('.img-div').append("<img src='https://istack.000webhostapp.com/1tf.svg'>");
}
}
if(op==3){
for(var i = 0;i<op;i++){
$('.img-div').append("<img src='https://istack.000webhostapp.com/_1tf.svg'>");
}
}
if(op==4){
for(var i = 0;i<op;i++){
$('.img-div').append("<img src='http://svgur.com//i/1yP.svg'>");
}
}
}
else{
$('.btn').hide();
}
$('img').each(function() {
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if (typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if (typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass + ' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
});
(function(exports) {
function urlsToAbsolute(nodeList) {
if (!nodeList.length) {
return [];
}
var attrName = 'href';
if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
attrName = 'src';
}
nodeList = [].map.call(nodeList, function(el, i) {
var attr = el.getAttribute(attrName);
if (!attr) {
return;
}
var absURL = /^(https?|data):/i.test(attr);
if (absURL) {
return el;
} else {
return el;
}
});
return nodeList;
}
function screenshotPage() {
var wrapper = document.getElementById('img-div');
html2canvas(wrapper, {
onrendered: function(canvas) {
function getOffset(el) {
el = el.getBoundingClientRect();
return {
left: el.left + window.scrollX,
top: el.top + window.scrollY
}
}
var cachedCanvas = canvas;
var ctx = canvas.getContext('2d');
var svgs = document.querySelectorAll('svg');
svgs.forEach(function(svg) {
var svgWidth = svg.width.baseVal.value;
var svgHeight = svg.height.baseVal.value;
var svgLeft = getOffset(svg).left - 40;
var svgTop = getOffset(svg).top - 62;
var offScreenCanvas = document.createElement('canvas');
offScreenCanvas.width = svgWidth;
offScreenCanvas.height = svgHeight;
canvg(offScreenCanvas, svg.outerHTML);
ctx.drawImage(cachedCanvas, 0, 0);
ctx.drawImage(offScreenCanvas, svgLeft, svgTop);
});
canvas.toBlob(function(blob) {
saveAs(blob, 'myScreenshot.png');
});
}
});
}
function addOnPageLoad_() {
window.addEventListener('DOMContentLoaded', function(e) {
var scrollX = document.documentElement.dataset.scrollX || 0;
var scrollY = document.documentElement.dataset.scrollY || 0;
window.scrollTo(scrollX, scrollY);
});
}
function generate() {
screenshotPage();
}
exports.screenshotPage = screenshotPage;
exports.generate = generate;
})(window);
});
</script>
html,
body {
background: #f1f1f1;
font-family: 'Merriweather', sans-serif;
padding: 1em;
}
form {
border: 2px solid blue;
float: left;
max-width: 300px;
padding: 5px;
text-align: center;
width: 30%;
}
.img-div {
border: 1px solid black;
display: block;
float: left;
margin-right: 86px;
overflow: hidden;
width: 50%;
padding: 10px;
}
.btn {
display: none;
overflow: hidden;
width: 100%;
}
.new{
display: block;
overflow: hidden;
width: 100%;
}
.description-div {
border: 2px solid green;
float: left;
margin-right: 32px;
padding: 3px;
width: 13%;
}
.submit {
background: wheat none repeat scroll 0 0;
border: 1px solid red;
cursor: pointer;
}
input,
textarea {
border: 0;
outline: 0;
padding: 1em;
@include border-radius(8px);
display: block;
width: 100%;
margin-top: 1em;
font-family: 'Merriweather', sans-serif;
@include box-shadow(0 1px 1px rgba(black, 0.1));
resize: none;
&:focus {
@include box-shadow(0 0px 2px rgba($red, 1)!important);
}
}
#input-submit {
color: white;
background: $red;
cursor: pointer;
&:hover {
@include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
}
}
Pero aquí(1) cuando tomo una captura de pantalla deimg-div La captura de pantalla es diferente de la representación original. ¿Por qué sucede?
(2) También en la captura de pantalla de la opción 4, el svg no aparece. En realidad tengo demasiadas opciones y demasiadas imágenes. Ahora solo escribo 3 opciones.
(3) ¿Es posible guardar esta captura de pantalla en el servidor [carpeta específica] cuando el usuario envía el formulario?
(4) ¿Hay algún otro método sin usar lienzo html?
(5) ¿COMO LA OPCIÓN DE PANTALLA EN LA COMPUTADORA FUNCIONA? o extensión del navegador comohttps://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en .
https://www.youtube.com/watch?v=3766n-SDPNc&feature=youtu.be
Forma corta: tengo un sitio web. En el que el usuario puede seleccionar cualquier svg de la lista de svg dada. Cuando el usuario selecciona un svg, ese svg se convierte en svg en línea que se muestra en un div. También el usuario puede mover ese svg a cualquier parte del div. Después de todo, el usuario completará un formulario y lo enviará. En el momento del envío, queremos descargar la captura de pantalla de ese div, luego entendemos que el usuario selecciona qué color, dónde está la imagen svg, etc.