I am extracting an image from a part of the document using:
var theImg = document.getElementById('imageDiv').innerHTML;
This returns something like
theImg = <img src="http://website.com/image.jpg?&image-presets&" alt="foo" style="z-index: 1" />
How could I grab just the src of the image, without the parameter. So that
theImg = http://website.com/image.jpg
I am open to using a regular expression, php, or vanilla javascript.
Untested, but I believe this should do the job. It first retrieves the image src and then strips off everything starting with the ?.
var imgDiv = document.getElementById('imageDiv');
var imgs = imgDiv.getElementsByTagName("img");
for (var i = 0; i<imgs.length; i++) {
var theImg = imgs[i].getAttribute('src').substr(0, theImg.indexOf('?'));
console.log(theImg);
// Do whatever you need to with theImg. Add to an array or whatever...
}
Since there appear to be no correct and complete answers so far with a working demonstration, I'll attempt one:
var imgs = document.getElementById('imageDiv').getElementsByTagName('img');
var theImgSrc = imgs[0].src;
var loc = theImgSrc.indexOf("?");
if (loc != -1) {
theImgSrc = theImgSrc.substr(0, loc);
}
You can see it in action here: http://jsfiddle.net/jfriend00/NSczd/
Just call .getAttribute('src') on the image element itself, and assign that string to theImg.
More fully, the following:
var theImg = document.getElementById('your_image').getAttribute('src');
Handles both parts of the question:
var imgDiv = document.getElementById('imageDiv');
var imgs = imgDiv.getElementsByTagName("img");
var url = "";
if (imgs.length > 0) {
var img = imgs[0];
var questionIndex = img.src.indexOf("?");
if (questionIndex > -1) {
url = img.src.substring(0, questionIndex);
} else {
url = img.src;
}
}
alert(url);
http://jsfiddle.net/cvhwZ/2/
Sorry, yeah, this is better.
var theImgSRC = document.getElementById('imageDiv').querySelector('img').getAttribute('src');
document.getElementById('imageDiv').querySelector("img").getAttribute('src').theImg.substr(0, theImg.indexOf('?'));
Related
How would I convert a render to a .png image?
I've been looking around for awhile but nothing has worked.
Here is a function I use and a fiddle that shows it working.
function takeScreenshot() {
// For screenshots to work with WebGL renderer, preserveDrawingBuffer should be set to true.
// open in new window like this
var w = window.open('', '');
w.document.title = "Screenshot";
//w.document.body.style.backgroundColor = "red";
var img = new Image();
img.src = renderer.domElement.toDataURL();
w.document.body.appendChild(img);
// download file like this.
//var a = document.createElement('a');
//a.href = renderer.domElement.toDataURL().replace("image/png", "image/octet-stream");
//a.download = 'canvas.png'
//a.click();
}
I have this javascript
document.write(img)
The value of the "img" is something like:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMYAAADGCAYAAACJm/9dAAAgAEl ect.."
Now I want that "img" to be like a PHP variable. Is that possible?
You could try something along the lines of this - completely untested btw.
$img='data:image/png;base64,'.base64_encode( file_get_contents('/path/to/image.png') );
echo "var img='{$img}';";
you can use html5:
<canvas id="img"></canvas>
<script>
var canvas = document.getElementById("img");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = "<?php echo 'data:image/png;base64,'.
base64_encode( file_get_contents('/path/to/image.png') ); ?>"; //from RamRaider Answer
</script>
I can't find a solid answer on this, and trial and error is getting me nowhere.
I have am generating a dynamic PHP page with variables in my URL, so my URL looks like:
http://www.mypage.com/myfile.php?l=1&d=1&c=1
(works)
I'd like to also add an anchor to this, such as:
http://www.mypage.com/myfile.php?l=1&d=1&c=1#anchor1
(Does not jump to the anchor at the end)
The anchor is targeting a div such as:
Some link
<div id = "anchor1"></div>
Is this possible?
This should work better
Some link
<div>
<a name="anchor1"></a>
</div>
Note that the right way of doing it depends on what doctype you are using. You can read more about this for html5 here and for html 4.01 here
I guess the problem is that the id is added dynamically.
Then, you can refresh the hash AFTER adding the id and appending your element to the document
var h = location.hash;
location.hash = '';
location.hash = h;
Demo: http://jsfiddle.net/wpMDj/1/show/#anchor
Code: http://jsfiddle.net/wpMDj/1/
Alternatively, you can use scrollIntoView:
document.getElementById(location.hash.substring(1)).scrollIntoView(true);
But to avoid errors you need some ifs:
var hash = location.hash.substring(1);
if(hash){
var el = document.getElementById(hash);
if(el && el.scrollIntoView){
el.scrollIntoView(true);
}
}
Demo: http://jsfiddle.net/wpMDj/3/show/#anchor
Code: http://jsfiddle.net/wpMDj/3/
Some Browsers, will not automatically target your id, based on the URL hash. You may consider using JavaScript.
var doc = document;
function E(e){
return doc.getElementById(e);
}
function offset(element){
var x = 0, y = 0, e = element;
while(e && !isNaN(e.offsetLeft) && !isNaN(e.offsetTop)){
x += e.offsetLeft - e.scrollLeft;
y += e.offsetTop - e.scrollTop;
e = e.offsetParent;
}
return {left: x, top: y};
}
function YourSolution(listId){
var parentId = E(listId), pcn = parentId.childNodes;
for(var i=0,l=pcn.length; i<l; i++){
if(pcn[i].nodeType === 1){
var ac = pcn[i].childNodes;
for(var n=0,m=ac.length; n<m; n++){
var an = ac[n];
if(an.nodeType === 1){
an.onclick = function(){
var el = offset(this);
scrollTo(el.left, el.top);
}
}
}
}
}
}
Put the above on an external JavaScript page called scroll.js. Now put the following code at the bottom of your body:
<script type='text/javascript' src='scroll.js'></script>
<script type='text/javascript'>
YourSolution('listId');
</script>
</body>
</html>
this code almost works
this will output the entire page into a jpg
question: how can i grab only the content inside '#myDiv' and output that as a jpg file?
JS:
$('.myButton').click(function(){
$('#myDiv').html2canvas();//<< has no effect
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:0}});
var img = canvas.toDataURL();
img.replace(/^data:image\/(png|jpg);base64,/, "");
$.post( "postIO.php", {img:img}, function(data) {
//$('#recieve').append(data);
});
return false;
});
postIO.php:
$canvasImg = $_POST['img'];
//$canvasImg = str_replace('data:image/png;base64,', '', $canvasImg);
$data = base64_decode($canvasImg);
$File = "z.jpg";
$Handle = fopen($File, 'w');
fwrite($Handle, $data);
fclose($Handle);
reference from here
I have download and try html2canvas, then I find out the jquery plugin does not complete (it's does nothing than capture the image and create canvas, no use) so I write capture code myself.
var el = $('div').get(0);
function saveData(dturl){
//Upload here
console.debug(dturl);
}
html2canvas.Preload(el, {
complete: function(image){
var queue = html2canvas.Parse(el, image, {elements: el}),
$canvas = $(html2canvas.Renderer(queue, {elements: el}));
saveData($canvas[0].toDataURL());
}
});
Hope it help you
so to use with your program you have to write
function saveData(dturl){
dturl.replace(/^data:image\/(png|jpg);base64,/, "");
$.post( "postIO.php", {img:dturl}, function(data) {
//$('#recieve').append(data);
});
}
$('.myButton').click(function(){
var el = $('#myDiv').get(0);
html2canvas.Preload(el, {
complete: function(image){
var queue = html2canvas.Parse(el, image, {elements: el}),
$canvas = $(html2canvas.Renderer(queue, {elements: el}));
saveData($canvas[0].toDataURL());
}
});
});
after var canvasImg = canvasRecord.toDataURL("image/jpg");, you may need to replace it using var data = canvasImg.replace(/^data:image\/(png|jpg);base64,/, "");
and is that $canvasImg = $_POST['canvasImg']; instead of $_POST['img']?
Actually my code is---
function addElement(url,imagePath){
alert(url);
alert(imagePath);
var container = document.getElementById('sncs');
var new_element = document.createElement('li');
new_element.innerHTML ="";
new_element.className="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal";
container.insertBefore(new_element, container.firstChild);
}
function addWidget(url) {
alert(url);
// var url='http://www.boxyourtvtrial.com/songs/public/';
var main= document.getElementById('mainwidget');
main.innerHTML = "<iframe src='"+url+"' align='left' height='1060px' width='576px' scrolling='no' frameborder='0' id='lodex'></iframe>";
}
but when we add the image itsnot going at the but is going in front...
So please provid the solution
Try using
container.appendChild( new_element );
instead of
container.insertBefore(new_element, container.firstChild)