javascript–使用jquery或PHP或将div转换为pdf,对当前屏幕进行正确的图像捕获

我写了一些代码,用于将svg转换为内联svg并截取该div的截图.请检查.请将此代码int复制到本地主机并进行测试.因为不同宽度的屏幕截图不同.

https://jsfiddle.net/7bqukhff/15/

但是在这里(1)当我拍摄img-div的屏幕截图时,屏幕截图与原始表示不同.为什么会这样？

(2)同样在选项4截图中,svg没有出现.实际上我有太多的选择和太多的图像.现在我只写3个选项.

(3)当用户提交表单时,是否可以将此屏幕截图保存到服务器[特定文件夹]？

(4)没有使用html canvas有没有其他方法？

(5)如何在计算机工作中使用屏幕选项？或浏览器扩展名,如https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?hl=en.

https://www.youtube.com/watch?v=3766n-SDPNc&feature=youtu.be

Short form : i have a website . In which user can select any svg from
the given svg list . When user select one svg then that svg is

converted to inline svg displayed in one div . Also user can move

that svg to any portion of the div . After everything then user will

fill a form and submit . At the time of submit we want to download the

screen shot of that div then we understand user select which colour ,

where the svg imge is place etc

解决方法:

请检查以下解决方案.我只是想掩盖你的问题.

$(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 $('.img-div').append(" });
}
});
}
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);

});

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