使用jquery或PHP或将div转换为pdf，正确捕获当前屏幕的图像
我写了一些代码，用于将svg转换为内联svg并截取该div的截图。 请检查。请将此代码int复制到本地主机并进行测试。 因为不同宽度的屏幕截图不同。
https://jsfiddle.net/7bqukhff/15/
Sample description
$(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("
"); } } if(op==3){ for(var i = 0;i<op;i++){ $('.img-div').append("
"); } } if(op==4){ for(var i = 0;i<op;i++){ $('.img-div').append("
"); } } } 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); }); 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)); } } 但是在这里（1）当我拍摄img-div的屏幕截图时，屏幕截图与原始表示不同。 为什么会这样？
（2）同样在选项4截图中，svg没有出现。 实际上我有太多的选择和太多的图像。 现在我只写3个选项。
（3）当用户提交表单时，是否可以将此屏幕截图保存到服务器[特定文件夹]？
（4）没有使用html canvas有没有其他方法？
（5）如何在计算机工作中显示屏幕？ 或浏览器扩展程序，例如https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkllgpmj?hl=en 。
简短forms：我有一个网站。 在哪个用户可以从给定的svg列表中选择任何svg。 当用户选择一个svg时，svg将转换为一个div中显示的内联svg。 用户也可以将svg移动到div的任何部分。 完成所有操作后，用户将填写表格并提交。 在提交时我们想要下载该div的屏幕截图然后我们了解用户选择哪种颜色，svg imge所在的位置等
请检查以下解决方案。 我只是想掩盖你的问题。
$(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
@import url(https://fonts.googleapis.com/css?family=Merriweather); $red: #e74c3c; *, *:before, *:after { @include box-sizing(border-box); } html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; @include text-shadow(1px 1px 0 rgba(white, 1)); } 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)); } } textarea { height: 126px; } } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } /* Clearfix */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } .half.left.cf > input { margin: 5px; } @media print { html, body { padding:0 !important;margin:0 !important; } }
Sample description
据我所知，这是一个工作版本： https ： //jsfiddle.net/7bqukhff/16/
不同之处在于您绘制到offscreenCanvas 。
以下是您的代码中发生的情况：
- 您将
offscreenCanvas的尺寸设置为第108和109行中SVG的宽度和高度（而不是包装的宽度和高度） - 您从SVG的左侧和顶部位置减去某些内容（40和62）。 该位置指的是页面上的位置，而不是包装器中SVG的相对位置。
- 使用页面坐标而不是相对坐标将SVG绘制到canvas上
修复程序如下所示：
首先，将canvas的尺寸设置为包装器的尺寸：
var wrapperRect = wrapper.getBoundingClientRect() // ... offScreenCanvas.width = wrapperRect.width; offScreenCanvas.height = wrapperRect.height;
然后，使用相对坐标绘制svg：
var svgLeft = getOffset(svg).left - wrapper.left; var svgTop = getOffset(svg).top - wrapper.top;
这似乎可以根据需要使用。
PS：选项“4”不起作用，但这是因为它在HTTPS站点上使用HTTP，因此由于安全限制而未加载。