I wrote a chrome extension, that allows me to copy the DOM of a webite and upload it to a server for analysis (dont worry, nothing illegal). Doing so does not provide the images or css scripts of the page.
Is there an "easy way" to get transfer the images and scripts that are used in the DOM as well? Currently I am using document.all[0].outerHTML for reading the HTML itself.
I found a quite nice way to upload the images in one package with the HTML / DOM:
Using this post, I had a very easy way to convert almost any image in Base64. I replaced the src attribute of the img tag using jQuery and uploaded the complete DOM. Like that all the images are already implemented.
Related
I generate an HTML-file which I want to send to other people. But i don't want to send a complete folder but only the pure html.
Therefore the generator should include everything in this HTML-file without linking to other sources. That means the HTML-file is "stand-alone".
Because of that i can't use images but want to use symbols of font.
Is there possibility to embedded all required information into that html for a font like "GLYPHICONS Halflings" without linking to any external (means outsite of the HTML) source?
I tried to use typeface-js already but i didn't worked.
Thanks a lot for your help!
short answer no. you can send pure HTML with images, just put image links from the internet into the HTML tags to show image.
I developed a project on Laravel and Vue Js. In a part of this site, I have made an App in Vue whom allow the user to drags a <img> tag on another <img> tag, both contained in a DIV.
There are many (and the most unsupported) CSS applied to both images, as filters, 3dtransforation, mask, background-source...It works smooth on both Chrome and Firefox.
What I have to do now, is to save in jpg/png the "result" of all the trasformations applied to those two images, or to say it better, the html of the div container have to be converted in a image file and saved on server/rendered on the page after a click.
I didn't realise this will have been the hardest part.. Whatever I tried until now didn't worked. I tried using
Domtoimage -> The problem that I have with this javascript library is that I'm loading 1 image from the server (local currently) and 1 image from an S3disk on the AWS, and there are cross-browser compatibility problems.
Browsershot -> The issue experienced for me here is again about having the files on different storages, but here the problem is on the localhost. Hww, doing a try with both image on S3, some of the CSS properties are not rendered (mask, opacity, transform)
HTML2CANVAS -> Again both issues: cross origin, and not rendering most of the required CSSs.
At this point I really not longer know where to look out for a solution. It seems that for as easy is to set the css for two elements that works, it's impossible to ask java or the server to just "print out" what you see, exactly as you are seeing it.
About "printing": I noticed (trying to find a workaround) that even if by pressing print page, on the preview, some CSS are missing, while they are clearly visible in the page.
I'll be definitively grateful if somebody have any suggestion
As I said in comments, here are some solutions. About the solution that involves wkhtmltoimage in server side, is as follow:
wkhtmltopdf and wkhtmltoimage are open source (LGPLv3) command line
tools to render HTML into PDF and various image formats using the Qt
WebKit rendering engine
Download and install wkhtmltopdf wich includes wkhtmltoimage
Send from client all what you need (more detail below)
In backend create a html file with all what you need, you could include css and javascript
run wkhtmltoimage http://yourHtml.html yourdesiredImage.jpg
You have your page with all rendered like a browser in yourdesiredImage.jpg
As you have to send to backend some behaviors that users perform with css,
you could use window.getComputedStyle(element) to store all properties applied to an element into an object.
You have to send the object created by window.getComputedStyle(element) to the backend with ajax and reapply the rules.
To reapply those styles you could use something like:
var stylesComputed = {}//My object from frontend
var source = document.getElementById("source");
var target = document.getElementById("target");
var copy = document.getElementById("copy");
copy.addEventListener("click", function(){
var styles = "";
for(let i = 0; i<stylesComputed.length-1; i++){
styles += stylesComputed[i]+":"+stylesComputed[stylesComputed[i]]+"; ";
}
target.setAttribute("style", styles);
document.getElementById("t2").innerHTML = "Target (copied)";
});
full example here: https://jsfiddle.net/5c9rhxbn/
When using LaTeX one can include a PDF as an image (this is usually done, e.g., with scientific papers, in which one can include a graph in PDF, so that it can be shown properly at different scales).
By using some tools like remark and MathJax one can create web pages with some LaTeX insertion.
Now, suppose I am interested in including a PDF as an image, as I usually do with plain LaTeX files.
I have tried to include my PDF using the <img> tag, and everything was working, since I realized that this only works in Safari (since Safari considers PDFs as images too). This consequently does not work in other browsers, as Chrome / Firefox.
So, I tried to include the image with an <embed> tag, as shown here. However, what I obtain is a mini-PDF viewer inside the browser, with a grey frame all around the image I am including. I would instead like to include just the image, with no frames.
Is there a way of reproducing this behavior?
Thank you in advance.
I dont know what type of framework or cms you use for your Homepage. But i guess you have to use sth like "imagemagick" to render your pdf files, like its done in wordpress or other cms systems.
Here is a link to my site, http://johnathonpowers.bigcartel.com
Trying to play around with images on my product pages...well actually created a test page.
Unable to figure out a few things:
Where does one host a jquery file?
Do I need to have the jquery src for both jquery.min.js (many use the one hosted by google, if I am understanding any of this correctly) and jquery.elevatezoom.js?
If I end up not liking the zoom is this still an appropriate way to have a large image with small thumbnails beneath (perhaps I will explore how to click on the big image to open a full-screen version).
Should all my pictures be the same size? Right now I have square format photos and rectangle...it might end up looking horrible.
Do I put any code into CSS or just the layout and the specific page I want the images to take place?
Will these images replace the ones I upload through bigcartel's system?
There is already a jquery entry in the layout...do I just add to the end of this same section the additional src?
This is what I added to layout:
<script src="http://s000.tinyupload.com/index.php?file_id=24823496361920795072" type="text/javascript"></script>
This is my test page:
<img id="zoom_01" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg"/>
$("#img_01").elevateZoom();
<head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script></head>
<img id="product_zoom" src="http://i.imgur.com/1L86Fcms.jpg" data-zoom-image="http://i.imgur.com/1L86Fcm.jpg" class="fade_in">
Thanks again for all the help and honestly probably biting off more than I can chew. I just wanted to play around with it and see if it would work/was something I liked, but seems like I have gone down a rabbit hole into a whole other world, way above my rudimentary html skillset.
Here is where I first saw the jquery stuff:
Can I integrate an Internal zoom on my products in my big cartel store?
The best place to host your javascript files is on a server that you have control over -but if you don't have any webspace, you can easily host files with a service like Dropbox or Google Drive.
The Luna theme you're using already loads jQuery in the <head> portion of your Layout, so you don't need to include that script again (and you'll get errors in your browser's javascript console if you try).
Since you're using a separate image zooming library that has a bunch of custom CSS, you'll probably want to have your CSS file hosted on a separate server as well. It's a good idea to put any files you're including in the Layout section, following the same format as the existing theme files.
It looks like the javascript file you're hosting on tinyupload.com is just bringing up a download page instead of actually loading the javascript content into the page, so you'll definitely need to change how that's loaded. Otherwise the HTML code you're using looks like it should work.
I'd like to use CKEditor's Image plug-in separately from the rest of CKEditor.
Basically I'm creating a simple tool to edit webpages. Some parts of the webpage will be HTML and thus require the full CKEditor. But some parts will be images, and I don't need the full HTML editor, just the Image plug-in.
Is this possible to do, and what would be the "cleanest" way to do so?
CKEditor doesn't provide an image browser by itself, so you must research how to use the file browser component that you have picked by itself.
If you're using CKFinder look at the standalone.html sample, like shown in the "enhancing html forms" here: http://ckfinder.com/demo