I have not been able to render some images stored in my server properly using phantomjs. If I use any other image stored on the internet in works fine. So I was wondering if someone out there can tell me some server configuration I should've set up.
I have this phantomjs script:
page.open(html, function () {
window.setTimeout(function( status ) {
page.clipRect = { left: 0, top: 0, width: 640, height: 800 };
page.render(outputFolder + htmlBaseName + '.png');
console.log('rendered');
phantom.exit();
}, 2000);
});
And a html file containing a table and these images:
<img src="http://myServerURL/image1.png" style="width: 198px; min-height: 181px; max-height: 181px; height: 181px; max-width: 198px;" width="198" height="181">
<img src="http://myServerURL/image2.png" style="width: 198px; min-height: 181px; max-height: 181px; height: 181px; max-width: 198px;" width="198" height="181">
<img src="http://phantomjs.org/img/phantomjs-logo.png" style="width: 198px; min-height: 181px; max-height: 181px; height: 181px; max-width: 198px;" width="198" height="181">
And I'm getting this in return:
My images can be viewed from the internet
If you want to render local Images in PDF, you have to convert that image to base-64 and pass this value in src attribute of img tag.
Related
I have an Iframe
<iframe v-show="this.$store.getters['rackStore/getIframe'].show === 'iframe'" ref="iframe_3d" :src="this.$store.getters['rackStore/getIframe'].ref" id="iframe_3d" allowfullscreen="true" style="width: 100%; height: 100%; z-index: -1; position: fixed; top: 0px; left: 0px; border: 1px solid #00f; "></iframe>
And it displays the data perfectly.
Src I take from Vuex
Then I want to change the src value:
let iframe_param = this.$store.getters['rackStore/getIframe'];
this.$store.commit('rackStore/setIframe', { ...iframe_param, show: 'iframe', ref: model.ref } );
And I mean in the console that the src value of the iframe is changing!
But the iframe itself is not updated in the browser for some reason.
I tried to force update it: this.$ForceUpdate ();
This does not work.
I've tried changing the src in the usual way without Vue, this also doesn't work:
<iframe v-show="this.$store.getters['rackStore/getIframe'].show === 'iframe'" ref="iframe_3d"
src="" id="iframe_3d"
allowfullscreen="true" style="width: 100%; height: 100%; z-index: -1; position: fixed; top: 0px; left: 0px; border: 1px solid #00f; ">
</iframe>
var iframe = document.getElementById('iframe_3d');
iframe.src = model.ref;
src changes but no data refresh occurs, the previous site is still open in the iframe
What to do?
Thank you in advance!
Try update the element using key attribute:
<template>
<!-- ... -->
<iframe v-show="this.$store.getters['rackStore/getIframe'].show === 'iframe'" ref="iframe_3d" :src="this.$store.getters['rackStore/getIframe'].ref" id="iframe_3d" allowfullscreen="true" style="width: 100%; height: 100%; z-index: -1; position: fixed; top: 0px; left: 0px; border: 1px solid #00f; " :key="iframeUpdate"></iframe>
<!-- ... -->
</template>
<script>
export default {
// ...
data() {
return {
iframeUpdate: false
}
},
}
</script>
When your value in Vuex changes, simultaneously change iframeUpdate variable value like this:
this.iframeUpdate = !this.iframeUpdate;
jquery file
above is my jquery code. I want every time I click the frog image, it will move to the left 50 pixels. but when I run the code, it keeps saying "Invalid keyframe value for property left: +=50px"
google console
Here's a working example.
$("#clickme").click(function(){
$(this).animate({ "left": "-=50px" }, "slow" );
});
#clickme {
position: absolute;
background: red;
width: 100px;
left: 0;
right: 0;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">Click me</div>
Am creating an image editor library with the support of KinetiJS.
In my html,
<div id="editorarea" class="fill">
<div id="imageContainerDiv" class="imageContainerDiv" >
<div>....</div>
<div>....</div>
<div id='rotateouterDiv' class='rotateouterDiv' >
<textarea placeholder='Enter You Text here' id='inputField' name='graffiti' class='textContainerMob'></textarea>
</div>
<div id='imageContainer'></div>
</div>
</div>
Then creating a stage
_kineticStage = new editor._Stage({
container : 'imageContainer',
width : $('#editorarea').width(),
height : $('#editorarea').height()
});
Kinetic.Util.extend(editor._Stage, Kinetic.Stage);
And adding an image,
_kineticImage = new editor._Image({
x : 0,
image : img,
y : 0,
draggable : true,
});
layer.add(_kineticImage);
The CSS applied is,
#editorarea {
width: 100%;
height: 80%;
margin-top: .1%;
min-height: 70%%;
display: block;
border-width: 2px;
border-style: solid;
}
.fill {
min-height: 85%;
height: 90%;
}
.imageContainerDiv {
width: 100%;
height: 100%;
z-index: 0;
left: 0;
right: 0;
background-color: #FFF;
display: block;
background-image: url(../images/back_pattern.png);
background-repeat: repeat;
overflow: hidden;
}
The textarea should be on the top of the image. In this case, I placed that div containing the textarea using the #media queries, for supporting different screen size and orientation.
The issue occurs when following the steps: load the page in portrait, then change the device orientation to landscape. Then the position of textarea is not correct. This is because the kinetic stage is not properly resizing on orientation change (only the area with image).
Can anyone help me to resize it properly? This should work in touch devices.
Thanks...
I have been unable to get this code to work on IE11 - it works fine on Chrome and Firefox, Android Chrome, Opera, just not IE. In IE11, I can actually see the images pile in on top of one another until it reaches the last image, then it just stops. The last image is distorted (as if $FillMode is set to 0). However, while clicking on the image makes no difference, dragging it even the slightest amount triggers it into operation. It's as if the auto-start is ignored, but once nudged, the function works. If I do nothing, it sits on the last image loaded indefinitely.
The head:
<script type="text/javascript" src="css/jssor.slider.js"></script>
<script async>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [{$Duration:700,$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}} ];
var _CaptionTransitions = [];
var startImgNumber =Math.floor((Math.random()*16)+1);
var options = {
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3},
$AutoPlay: true,
$DragOrientation: 1,
$AutoPlayInterval: 5000, // ADJUST!!!!
$FillMode: 1,
$SlideHeight: 260,
//$PauseOnHover: 0,
$StartIndex: startImgNumber,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
HTML code is:
<div id="PhotoShow" >
<div id="slider1_container" style="position: relative; top: 0px; left: 0px width: 332px; height: 260px; ">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 330px; height: 260px; overflow: hidden;">
<div><img data-u="image" src="photos/pic1.jpg" title="Photo By me ©2015" alt=""/><div u="caption" t="transition_name1" style="position: absolute; top: 245px; left: 100px; width: 200px;height: 30px; color:#FFFBF0; font-size:x-small" >Courtesy of me © 2015</div></div>
<div><img data-u="image" src="photos/pic2.jpg" title="Photo By me ©2015"alt=""/><div u="caption" t="transition_name1" style="position: absolute; top: 245px; left: 125px; width: 200px;height: 30px; color:#ffffff; font-size:x-small" >me © 2015</div></div>
.
.
. 16 images total
</div>
</div>
</div>
(Possible I have extra /div tags - that is not the issue, just a typo), I am completely at a loss as to why this works on everything except IE11. It appears that the function simply does not execute. I've tried window.onload and a few other things - changes nothing.
Thanks for any clues or suggestions
A semicolon is missing in your html code.
Please replace
<div id="slider1_container" style="position: relative; top: 0px; left: 0px width: 332px; height: 260px; ">
with
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 332px; height: 260px; ">
I have a web site with a regular <input type="file"> file upload, POSTing the data to the backend when the form is submitted.
I would like to progressively enhance the form so that you can drop a file from outside the browser anywhere in the viewport (not just on the file input field, as built into some browsers) to upload it.
Whether or not the form autosubmits isn't important. So if the drag-and-drop only selects the file in the file field, without starting an upload, that's fine. I don't need support for multiple files. I don't need to show upload progress, thumbnails or anything fancy.
I know there are JS libs that support drag-and-drop uploads, but they all seem to upload via AJAX. I could do that, but then I would need to modify the backend and frontend to handle upload errors, redirect and show the right messages on success and so on.
I want a progressive enhancement that doesn't require any backend changes. It should happen synchronously using the form in the page. JS is fine, as long as the upload happens "in the foreground". Synchronous AJAX would not work, of course.
Although not really "synchronous" (JavaScript execution won't actually halt), you can set the files selected by <input type="file"> programatically. In fact, such elements and dragging share their file backend implementation (File and FileList instances), so it's really straight-forward. What's more, due to both frontends using FileLists, dragging multiple files work just as seamlessly.
This works in Chrome (using jQuery): http://jsfiddle.net/qMmPr/.
$(document).on("dragover drop", function(e) {
e.preventDefault(); // allow dropping and don't navigate to file on drop
}).on("drop", function(e) {
$("input[type='file']")
.prop("files", e.originalEvent.dataTransfer.files) // put files into element
.closest("form")
.submit(); // autosubmit as well
});
Thanks to #pimvdb comment, I came up with a pretty elegant solution.
Since drag and dropping on the <input type="file" /> works, why not making it full-screen on dragstart to make sure the user can't miss it? Anyway he is dragging so his intentions are clear at this moment.
Here's a demo: https://jsfiddle.net/08wbo4um
NB: unfortunately this doesn't seem to work in an iframe, but it does work on an actual page. You can still apprehend the behavior.
Here's the snippet:
$('input[type="file"]').on('change', function(e){
var fileName = e.target.files[0].name;
if (fileName) {
$(e.target).parent().attr('data-message', fileName);
}
});
$(document).on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
if ($('input[type="file"]').length) {
if (['dragover', 'dragenter'].indexOf(e.type) > -1) {
if (window.dragTimeout)
clearTimeout(window.dragTimeout);
$('body').addClass('dragged');
} else if (['dragleave', 'drop'].indexOf(e.type) > -1) {
// Without the timeout, some dragleave events are triggered
// when the :after appears, making it blink...
window.dragTimeout = setTimeout(function() {
$('body').removeClass('dragged');
}, 100);
}
}
});
h3, p {
text-align: center;
}
.form-group {
margin: 30px;
}
.file-upload .form-control {
height: 150px;
outline: 1px dashed #ccc;
outline-offset: -15px;
background-color: #eee;
}
.file-upload .form-control:before {
content: "\f093";
font: normal normal normal 14px/1 FontAwesome;
font-size: 3em;
left: 0;
right: 0;
display: block;
margin: 20px auto;
text-align: center;
}
.file-upload .form-control:after {
content: attr(data-message);
left: 0;
right: 0;
bottom: 0;
text-align: center;
display: block;
}
.file-upload .form-control input[type="file"] {
cursor: pointer;
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
body.dragged .file-upload .form-control input[type="file"] {
/* Make sure it is full screen, whatever the position absolute container */
position: fixed;
top: -50vh;
bottom: -50vh;
left: -50vw;
right: -50vw;
height: 200vh;
width: 200vw;
z-index: 10002;
}
body:after {
content: 'You can drop the file. :-)';
font-size: 2em;
text-align: center;
line-height: 100vh;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background-color: #eee;
z-index: 10000;
border-radius: 4px;
border: thin solid #ccc;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s ease;
}
body.dragged:after {
opacity: 1;
visibility: visible;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<h3>Drag N Drop file upload without AJAX Demo</h3>
<p>Try drag and dropping a file. :-)</p>
<div class="form-group file-upload" required="required">
<label class="cols-sm-2 control-label" for="document_file">File Upload</label><br>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-file" aria-hidden="true"></i></span>
<div class="form-control" data-message="Click to select file or drag n drop it here">
<input required="required" title="Click to select file or drag n drop it here" type="file" name="document[file]" id="document_file">
</div>
</div>
</div>
</div>
It can be done by turning autoUpload to false, collecting the files in an array, then on form submit do a single ajax call with all the files together with the form data, as described here.