I want to store the webpage into png file using javascript.I tired with the below sample code. but what is the issue is when I am downloading it's downloading extension is image/octet-stream but during downloading the file I want to store the image in png format.How can i download the image from image/octet-stream extenstion to png extension.
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>html2canvas example</title>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/excanvas.js"></script>
<style>
canvas{border:1px solid #222}
</style>
</head>
<body id="target">
<a class="upload" >Upload to Imgur</a>
<a href="#" download="testXXX.jpg" onclick="printImg()" ><img src="images/print-icon.png" alt="Print" width="16" height="16" ></a>
<h2>this is <b>bold</b> <span style="color:red">red</span></h2>
<p> Feedback form with screenshot This script allows you to create feedback forms which include a screenshot,
created on the clients browser, along with the form.
The screenshot is based on the DOM and as such may not be 100% accurate to the real
representation as it does not make an actual screenshot, but builds the screenshot based on the
information available on the page. How does it work? The script is based on the html2canvas library,
which renders the current page as a canvas image, by reading the DOM and the different styles applied
to the elements. This script adds the options for the user to draw elements on top of that image,
such as mark points of interest on the image along with the feedback they send.
It does not require any rendering from the server, as the whole image is created on the clients browser.
No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9
</p>
<script type="text/javascript">
function printImg(){
html2canvas( [ document.body ],{
onrendered: function(canvas) {
var img = canvas.toDataURL("image/png").replace("image/png","image/octet-stream;base64");
window.location.href=img;
}
});
}
</script>
</body>
</html>
I'm afraid this is just how toDataURL works.
See the following question for an answer with a somewhat ugly solution:
Name a PNG file saved from Canvas using an "open with" dialog
(the href in the answer would point to the 'img' var in your javascript)
Related
I am trying to open an image in a new tab using this simple code.
window.open(file.url);
The file is a .jpg file and my browser is Chrome. Instead of showing the image in a new tab it triggers the download window and asks me to download it to my PC.
Is this a javascript issue? Or is it a default Chrome setting? I have googled this for a while and some people are suggesting it could be a MIME type problem but I have no control over the image coming from the server.
Any advice would be appreciated.
As suggested by #Lachlan Walls in the comments, you can open a blank tab and write a simple html with an img tag:
const image_window = window.open("", "_blank")
image_window.document.write(`
<html>
<head>
</head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" alt="Example" height="100%" width="100%">
</body>
</html>
`);
Hello I'm trying to implement a jwplayer on a website when i tested it local with a single html page everything worked great and here is the working test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>JWPlayer test</title>
<script src="http://tms.localhost/NSwQRmZDEeOchiIACmOLpg.js"></script>
</head>
<body>
<div id='playeriybxxXWkOtaN'></div>
<script type='text/javascript'>
jwplayer('playeriybxxXWkOtaN').setup({
file: 'http://tms.localhost/video.flv',
image: 'http://tms.localhost/image.jpg',
title: 'Razer',
width: '100%',
aspectratio: '16:9',
fallback: 'false'
});
</script>
</body>
</html>
However when i tried to use it through a cms specifically liferay it didn't work. I uploaded a video through the cms control panel and the generated link for the video was:
http://localhost:8080/documents/10180/0/test-video/a3690397-1d28-4225-9a5c-7d13dba7c789
I assume it has to do something with the link? but when i try it on my browser the video downloads perfectly fine.
What am I doing wrong here ?
check this
http://www.longtailvideo.com/support/jw-player/28836/media-format-support
the page says:
"The JW Player tries to recognize a file format by its extension (e.g. .mp4 for MP4 videos). If the extension of your files is not recognized, the player will display an error. However, if you know your file is in a supported format, you can use the type playlist option to force the player to recognize the file as being of that format."
In your case the generated link for the video has no extension, so JW Player doesn't know how to play it.
Here is an example.
I do not believe this is a WebKit (Blink now for Chrome) thing, so I am assuming it is a clever HTML/JavaScript/CSS thing. How is this done?
First of all this is probably a new chrome thing..and noone wants this.. but as the answer is open and maybe someone wants to try to recreate this.. here is how it could be done.
create a html fileas small as possible
a 16x16 png converted to base64
load the rest of the css or or replace the existing
load the rest of the javascript
This is the smallest 16x16 png image converted to base64 i could get.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX////MzMw46qqDAAAAEElEQVQImWNg+M+AFeEQBgB+vw/xfUUZkgAAAABJRU5ErkJggg==');
}
</style>
<script>
window.onload=function(){
window.document.head.appendChild(CSSLINK)
window.document.head.appendChild(SCRIPTLINK)
}
</script>
<title></title>
</head>
<body>
</body>
</html>
but it's useless...
and here is a even smaller webp image :) only for chrome.
data:image/webp;base64,UklGRigAAABXRUJQVlA4IBwAAAAwAQCdASoQABAACMCWJaQAA3AA/u11j//aQAAA
ps.: at least i made a nice 16x16 (2 lines big) checkboard png in base64 ;)
My requirement is to make a link or a button, on clicking it should open a specified location on my computer and I cannot use jquery but I can use javascript.
I tried doing with input tag by coding as below, but did not meet the requirements.
<html>
<head>
...
<meta charset="ISO-8859-1">
<title>Conversion Successful</title>
<link href="xml.css" type="text/css" rel="Stylesheet">
</head>
<body>
<h1 class=heading_position>Conversion Completed Successfully</h1>
<div class="box">
<input readonly="readonly" type="file" value="D:/Office/xmlautomation/">
</div>
</body>
</html>
I'm a beginner in html still figuring out how stuff works. Thanks
This used to be possible in internet explorer (6 and earlier) assuming you didn't care much about controlling how the document/location was opened.
It is no longer possible in IE or any other browser I'm aware of (Chrome/FF) for security reasons (would you want a random site you visited to be able to launch folders/apps on your desktop?).
For the record, the old syntax would've been file://[Host]/D:/Office/xmlautomation/ where [Host] was usually blank so something like...
Office Automation
would've opened the directory in question.
NB: These Urls will still work if they're listed in a file that wasn't retrieved over the web (eg if you drag-and-drop an html file from your computer onto your browser, links like these should work). This is so that local html files which reference each other can be opened without a web server.
You can use the javascript also.
Just tried, it work fine for me as long as C$ is shared.
<html>
<body>
<input onclick="CallMe()" value="ABX" />
<script>
function CallMe() {
// alert('test');
window.open("file://smewara/C$");
}
</script>
</body>
</html>
This should help you out: HTML/JS open a window to the C$ drive
Should be a really quick one for you pro's:
I'm learning to use JS, in particular a plugin called (embarassingly) 'Easy Image'.
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Here's my code:
http://jsfiddle.net/tomperkins/LnES6/
JS files are from here:
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
And obviously jQuery (1.5)
I've stripped it down to the basics and can't figure out why it's not working.
Any tips are much appreciated!
Thanks in advance,
Tom
jquery.js and easySlider.js gets an Server error 500 when the browser tries to load them from
http://customstudiodevelopment.co.uk/jquery-test/
Verify that the files are there and that they can be loaded
http://customstudiodevelopment.co.uk/js/jquery.js
http://customstudiodevelopment.co.uk/js/easySlider.js
Unless both these urls load the right JS files your code will not work ...
As a general tip, get FireBug addon to firefox, with the Net panel I found this error in less than 30 seconds ;)
In menu on the left you have to set your framework to JQuery and in Add resources box add 'Easy Image' script. Then comment out first two <script> tags (you will need them on your site but not on jsFiddle). Also change src attributes in <img> tags to absolute path because there is no images folder nor any images on jsFiddle site.
Edit
This is what you get with <script> tags on your site:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
2<html><head>
3<title>500 Internal Server Error</title>
4</head><body>
5<h1>Internal Server Error</h1>
6<p>The server encountered an internal error
Script doesn't work because there are no scripts on your site (both links are dead).
This is working:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<base href="http://customstudiodevelopment.co.uk"/>
<script type="text/javascript" src="/jquery-test/js/jquery.js"></script>
<script type="text/javascript" src="/jquery-test/js/easySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<meta charset="utf-8">
<title>jQuery Gallery Test</title>
<link href="/jquery-test/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="slider">
<ul>
<li><img src="/jquery-test/images/Website-Strip_Future.png"></li>
<li><img src="/jquery-test/images/SR-Toomer_small.png"></li>
</ul>
</div>
<!-- /end #slider -->
</body>
</html>
Note, I put the base element in there to test on my desktop. It's not required for it to work on your server, but if it's on your desktop computer, it should work (so you can copy the html into a Notepad file and save with filetype .html and run it locally to test).
It appears as if your file includes (js/css/image) are not pointing to where you want them to be.
Use Firebug to test these types of things. When you open the console, you can inspect the scripts included, including open each included file. In this way, you can doublecheck to make sure the browser is able to get to your included files.
http://getfirebug.com/
http://getfirebug.com/wiki/index.php/Script_Panel
http://getfirebug.com/wiki/index.php/File:Script_Panel.png <<< see del-linkrolls.js close to top, right; that's where you select which file to inspect
When I loaded the page I got an ".ready() is not a function" which would mean you are not loading jQuery. Then again I've never fooled around with jsfiddle