sample imageenter image description here
How to display the whole PDF (not just one page) with PDF.JS ?
I got the reference from the code here : https://codepen.io/ValerioEmanuele/pen/pGRZqe
but it only shows 1 page, can't display the whole pdf page ?
and i use library :
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
example index.php
<?php
$pdf = base64_encode(file_get_contents('tes2.pdf'));
?>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12" style="padding:10px">
<label>Xpos:</label>
<input type="text" id="Xpos" value="Xpos" readonly>
<label>Ypos:</label>
<input type="text" id="Ypos" value="Ypos" readonly>
</div>
</div>
<div class="row">
<div class="col-md-12" id="pdfManager" style="display:none">
<div class="row" id="selectorContainer">
<div class="col-fixed-605 col-md-9">
<div style="display:block;height:100px">
<img class="drag-drop dropped-out" data-x="0" data-y="0" src="ttd.png" style="width:150px;height: auto">
</div>
<div id="pageContainer" class="pdfViewer singlePageView dropzone nopadding" style="background-color:transparent">
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- parameters showed on the left sidebar -->
<input id="parameters" type="hidden" value='[{"idParametro":480,"descrizione":"RAPINA","valore":"X","nota":null},{"idParametro":481,"descrizione":"CAUSAL_G00","valore":"X","nota":null},{"idParametro":482,"descrizione":"A","valore":"A","nota":null},{"idParametro":483,"descrizione":"POSTA_REGISTRATA","valore":"X","nota":null},{"idParametro":484,"descrizione":"CD","valore":"CD","nota":null},{"idParametro":485,"descrizione":"DATA_ALERT","valore":"data alert","nota":null},{"idParametro":486,"descrizione":"UP","valore":"UP","nota":null},{"idParametro":488,"descrizione":"DATA_MP","valore":"DATA1","nota":null},{"idParametro":489,"descrizione":"AL_QUALITA","valore":"AL_QUALITA","nota":null},{"idParametro":490,"descrizione":"CAUSAL_G60","valore":"X","nota":null},{"idParametro":491,"descrizione":"DATA","valore":"DATA","nota":null},{"idParametro":492,"descrizione":"DATA_DENUNCIA","valore":"data denuncia","nota":null},{"idParametro":493,"descrizione":"DATA_SPEDIZIONE","valore":"data spedizione","nota":null},{"idParametro":494,"descrizione":"DATA_LAVORAZIONE","valore":"DATA_LAVORAZIONE","nota":null},{"idParametro":495,"descrizione":"NUMERO_FAX","valore":"NUMERO_FAX","nota":null},{"idParametro":496,"descrizione":"SMARRIMENTO","valore":"X","nota":null},{"idParametro":497,"descrizione":"STRUTT_ACCETTAZIONE","valore":"STRUTT_ACCETTAZIONE","nota":null},{"idParametro":498,"descrizione":"FURTO","valore":"X","nota":null},{"idParametro":499,"descrizione":"BARCODE","valore":"BARCODE","nota":null},{"idParametro":502,"descrizione":"CAUSA_MAGGIORE","valore":"X","nota":null},{"idParametro":503,"descrizione":"PACCHI","valore":"X","nota":null},{"idParametro":504,"descrizione":"TIPOLOGIA_EVENTO","valore":"TIPOLOGIA_EVENTO","nota":null},{"idParametro":505,"descrizione":"NOTE","valore":"NOTE","nota":null},{"idParametro":506,"descrizione":"DATA_RITROVAMENTO","valore":"data ritrovamento","nota":null},{"idParametro":507,"descrizione":"DATA_ACCETTAZIONE","valore":"DATA_ACCETTAZIONE","nota":null},{"idParametro":509,"descrizione":"AREA_LOGISTICA","valore":"AREA_LOGISTICA","nota":null},{"idParametro":511,"descrizione":"DA","valore":"DA","nota":null},{"idParametro":512,"descrizione":"DATA_DENUNCIA","valore":"DATA_DENUNCIA","nota":null},{"idParametro":513,"descrizione":"TIPOLOGIA_ALERT","valore":"TIPOLOGIA","nota":null},{"idParametro":515,"descrizione":"STRUTTURA_RILIEVO","valore":"STRUTTURA_RILIEVO","nota":null},{"idParametro":516,"descrizione":"STRUTTURA_DENUNCIA","valore":"STRUTTURA_DENUNCIA","nota":null},{"idParametro":517,"descrizione":"DISPACCIO","valore":"DISPACCIO","nota":null},{"idParametro":518,"descrizione":"CMP_CP","valore":"CMP_CP","nota":null},{"idParametro":520,"descrizione":"FURTO_EFFRAZIONE","valore":"X","nota":null}]' />
<!-- Below the pdf base 64 rapresentation -->
<input id="pdfBase64" type="hidden" value="<?php echo $pdf ?>" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.9/interact.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js"></script>
<script src="script.js"></script>
</body>
</html>
example css.css
#messageContainer{
display:none;
}
#outer-dropzone {
height: 140px;
touch-action: none;
}
#inner-dropzone {
height: 80px;
}
.dropzone {
background-color: #ccc;
border: dashed 4px transparent;
border-radius: 4px;
margin: 10px auto 30px;
padding: 10px;
width: 100%;
transition: background-color 0.3s;
}
.drop-active {
border-color: #aaa;
}
.drop-target {
background-color: #29e;
border-color: #fff;
border-style: solid;
}
.drag-drop {
display: inline-block;
position:absolute;
z-index:999;
min-width: 40px;
padding: 0em 0.5em;
padding-left:0;
color: #fff;
background-color: #29e;
border: none;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
transition: background-color 0.3s;
line-height: 10px;
padding-right: 0 !important;
padding-left: 5px !important;
}
.drag-drop.can-drop {
color: #000;
background-color: transparent;
opacity:0.9;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
/* IE 5-7 */
filter: alpha(opacity=90);
/* Netscape */
-moz-opacity: 0.9;
/* Safari 1.x */
-khtml-opacity: 0.9;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.circle {
width: 10px;
height: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #323c3c;
float: left;
display: inline-block;
margin-top: 1px;
margin-right: 2px;
}
.dropped-out{
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.125);
width:200px;
color: black;
}
.col-fixed-240{
width:240px;
height:100%;
z-index:1;
}
.col-fixed-605{
margin-left:240px;
width:605px;
height:100%;
z-index:1;
}
.page-item{
cursor:pointer;
}
.pager{
margin-bottom:30px !important;
margin-top:0px !important;
margin-bottom: -31px !important;
}
.drag-drop.dropped-out .descrizione {
font-size: 12px !important;
}
#the-canvas{
height:842px;
width: 595px;
}
example script.js
var pdfData = atob($('#pdfBase64').val());
/*
* costanti per i placaholder
*/
var maxPDFx = 595;
var maxPDFy = 842;
var offsetY = 0;
'use strict';
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';
//
// Asynchronous download PDF
//
var loadingTask = pdfjsLib.getDocument({data: pdfData});
loadingTask.promise.then(function(pdf) {
//
// Fetch the first page
//
pdf.getPage(1).then(function(page) {
var scale = 1.0;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
//page.render(renderContext);
page.render(renderContext).then(function() {
$(document).trigger("pagerendered");
}, function() {
console.log("ERROR");
});
});
});
/* The dragging code for '.draggable' from the demo above
* applies to this demo as well so it doesn't have to be repeated. */
// enable draggables to be dropped into this
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '.drag-drop',
// Require a 100% element overlap for a drop to be possible
overlap: 1,
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active');
},
ondragenter: function (event) {
var draggableElement = event.relatedTarget,
dropzoneElement = event.target;
// feedback the possibility of a drop
dropzoneElement.classList.add('drop-target');
draggableElement.classList.add('can-drop');
draggableElement.classList.remove('dropped-out');
//draggableElement.textContent = 'Dragged in';
},
ondragleave: function (event) {
// remove the drop feedback style
event.target.classList.remove('drop-target');
event.relatedTarget.classList.remove('can-drop');
event.relatedTarget.classList.add('dropped-out');
//event.relatedTarget.textContent = 'Dragged out';
},
ondrop: function (event) {
//console.log(event);
},
ondropdeactivate: function (event) {
var dropzonePostion = $(event.target).position();
elementPosition = $(event.relatedTarget).position();
console.log(elementPosition.top +$(event.target).height());
x = elementPosition.left - dropzonePostion.left;
y = (dropzonePostion.top +$(event.target).height()) - (elementPosition.top + $(event.relatedTarget).height());
$('#Xpos').val(x);
$('#Ypos').val(y);
// remove active dropzone feedback
event.target.classList.remove('drop-active');
event.target.classList.remove('drop-target');
}
});
interact('.drag-drop')
.draggable({
inertia: false,
restrict: {
restriction: "#selectorContainer",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
autoScroll: true,
// dragMoveListener from the dragging demo above
onmove: dragMoveListener,
});
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform ='translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// this is used later in the resizing demo
window.dragMoveListener = dragMoveListener;
$(document).bind('pagerendered', function (e) {
$('#pdfManager').show();
});
I'm trying to find a way to transition from one background image to another when I hover a div.
Here's a demo:
codepen demo
Here's my code
$('#cat').hover(function(){
$('.image').css('background-image',
"url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')");
});
Any ideas?
First, you are missing IDs for your <h1>, because your JQuery select elements with ID cat, dog and rabbit.
seccond, what you should change is background of '.bg' class, not '.image' class
HTML
<h1 id="cat">CAT</h1>
<h1 id="dog">DOG</h1>
<h1 id="rabbit">RABBIT</h1>
JS
$('#cat').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb')");
});
$('#dog').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a')");
});
$('#rabbit').hover(function(){
$('.bg').css('background-image', "url('https://images.unsplash.com/photo-1478754351612-f8b7577a3859')");
});
demo : https://jsfiddle.net/z2hevmya/
var images = {
"cat":'https://images.unsplash.com/photo-1485198963969-3f6b12e49abb',
"dog" : 'https://images.unsplash.com/photo-1469225208447-8329cbd3cb3a',
"rabbit" : 'https://images.unsplash.com/photo-1478754351612-f8b7577a3859'
};
$('.menu').hover(function(){
var img = $(this).attr("id");
$('.bg').css('background-image', "url(" + images[img] + ")");
});
body {
margin: 0;
padding: 0;
}
h1 {
z-index: 100;
color: #456;
font-family: sans-serif;
position: relative;
opacity: .5;
transition: all ease 1s;
cursor: pointer;
height: 1em;
padding: .5em;
margin: 0;
}
h1:hover {
opacity: 1;
}
.bg {
position: fixed;
height: 100%;
width: 100%;
background: url('https://images.unsplash.com/photo-1485198963969-3f6b12e49abb') no-repeat center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="bg"></div>
<h1 id="cat" class="menu">CAT</h1>
<h1 id="dog" class="menu">DOG</h1>
<h1 id="rabbit" class="menu">RABBIT</h1>
<script language="javascript">
$(function () {
$('.mDiv').hover(function () {
$(this).addClass('divHover');
}, function () {
$(this).removeClass('divHover');
}
);
});
</script>
<style type="text/css">
.mDiv {
height: 300px;
width: 200px;
background: darkgrey;
border: solid 1px #ccc;
float: left;
margin-right: 10px;
}
.divHover{
// background-image: you " img url";
background: greenyellow;
}
</style>
<div id="d">
<div class="mDiv">Test</div>
</div>
I write some code for to convert svg to inline svg and take screenshot of that div . Please check .Please copy this code int to your local host and test it . Because screen shot is different in different width .
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));
}
}
But here (1) when i take screen shot of img-div the screenshot is different from original representation. Why it happen ?
(2) Also in option 4 screenshot the svg is not appearing . Actually i have too many option and too many images . Now i only write 3 options .
(3) Is it possible for to save this screen shot to server[specific folder] when user submitting the form ?
(4) Is there any other method without using html canvas ?
(5) LIKE HOW SCREEN SHOT OPTION IN COMPUTER WORKS ? or browser extension like 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
Please check below mentioned solution. I just tried to cover up your issue.
$(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');
var sleft = 0;
svgs.forEach(function(svg) {
var svgWidth = svg.width.baseVal.value;
var svgHeight = svg.height.baseVal.value;
var svgLeft = 10;
var svgTop = getOffset(svg).top - 40;
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);
});
#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; }
}
<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>
As far as I can tell, this is a working version: https://jsfiddle.net/7bqukhff/16/
The difference comes from the way you are drawing onto the offscreenCanvas.
Here's what happens in your code:
You are setting the dimensions of the offscreenCanvas to the width and height of the SVG (instead of the width & height of the wrapper) in lines 108 & 109
You subtract something (40 and 62) from the left & top position of the SVG. This position is referring to the position on the page rather than the relative position of the SVG within the wrapper.
You draw the SVG onto the canvas with page-coordinates instead of relative coordinates
The fix looks like this:
First, set the dimensions of the canvas to the dimensions of the wrapper:
var wrapperRect = wrapper.getBoundingClientRect()
// ...
offScreenCanvas.width = wrapperRect.width;
offScreenCanvas.height = wrapperRect.height;
Then, draw the svg using relative coordinates:
var svgLeft = getOffset(svg).left - wrapper.left;
var svgTop = getOffset(svg).top - wrapper.top;
This seems to work as you need.
P.S.: The option "4" doesn't work but that's due to it using HTTP on an HTTPS site, so it's not loaded due to security restrictions.
I'm trying to create an animated menu that slides up and down. Unfortunately it's not working. I've checked the error console and there are no syntax errors. Here's my Javascript:
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition > 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
Here's the whole context:
<script type="text/javascript">
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition > 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
</script>
<style type="text/css">
div#mainmenu { position: absolute; bottom: 700px; left: 9px; width: 600px;
height: 350px; border-style: solid; background-color: rgb(0, 0, 0) ; border-
width: 3px; border-top-right-radius: 7px; border-top-left-radius: 7px; }
div#mainbutton { position: absolute; top: 674px; left: 12px; width: 28px;
height: 28px; border-style: solid; border-color: rgb(255, 255, 255); border-width:
1px; border-radius: 4px; }
div#mainbuttontext { position: absolute; top: 679px; left: 22px; color: rgb(255, 255,
255); font-style: normal; font-size: 18px; font-family:"Arial"; }
</style>
<div id="mainbutton"></div>
<div id="mainmenu" onClick="showLayer('mainmenu')"> </div>
<div id="mainbuttontext">F</div>
</body>
I think I found your problem! It's something very strange and I can't explain it, but to get style in javascript, the css must be inline (to set a style it's not necessary).
So I modified your code by placing the css inline.
HTML :
<div id="mainmenu" style="position:absolute;bottom:100px;" onclick="showLayer('mainmenu');">Click me!</div>
<!--I wrote 100px just for the test, you can change it and modify the js-->
JS :
function showLayer()
{
var hiddenLayer=document.getElementById("mainmenu");
var layerPosition=parseInt(hiddenLayer.style.bottom);
if(layerPosition>50)
{
hiddenLayer.style.bottom=(layerPosition+5)+"px";
setTimeout("showLayer()",20);
}
}
function hideLayer()
{
var hiddenLayer=document.getElementById("mainmenu");
hiddenLayer.style.bottom="700px";
}
Fiddle : http://jsfiddle.net/8MWfV/
And here is a fiddle that shows that a not inline css doesn't works : http://jsfiddle.net/kfUrP/
How to restrict drag (disable) in the block?
Full example
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var x = 0, setElementMove = 0, getElementMove = $('#drag');
getElementMove.mousedown(function(event){
x = event.clientX+$(document.body).position().left-parseInt($(this).css('left'));
setElementMove = true;
if(typeof event.preventDefault != 'undefined'){
event.preventDefault();
return false;
}
});
getElementMove.ondragstart = function(){
return false;
};
$(document).mouseup(function(){
setElementMove = false;
});
$(document).mousemove(function(event){
if(setElementMove){
getElementMove.css('left', event.clientX+$(document.body).position().left-x + 'px');
}
});
});
</script>
<h1>How to restrict drag (disable) in the block?</h1>
<div id="block">
<div id="border">
<div id="drag" style="left:200px;">some text</div>
</div>
</div>
<style type='text/css'>
h1, #drag {
font: bold 1.0em arial, helvetica, tahoma, verdana, sans-serif;
margin: 10px 0px;
text-align: center;
}
#block {
border: 1px solid #DDD;
overflow: hidden;
width: 100%;
}
#border {
border: 1px solid red;
margin: 0px auto;
overflow: hidden;
width: 70%; /*important*/
height: 150px;
}
#drag {
background: #DDD;
cursor: default;
position: absolute;
top: 50px;
width: 54px;
height: 45px;
}
</style>
edit your mousemove like this,
$(document).mousemove(function(event) {
var eleft = event.clientX + $(document.body).position().left - x;
if (eleft > boundary.offset().left && (eleft + getElementMove.width() < boundary.offset().left + boundary.width() ) ) {
if (setElementMove) {
getElementMove.css('left', eleft + 'px');
}
}
});
crazy demo
Since you asked for jQuery (altough you are using Mootools in your example), have a look at jQuery Ui Draggable. They have IMO the best drag & drop utility you can have with jQuery.