I have SVG generated with d3js library. Inside SVG is appended image.
What I am trying to do is get image height, not original height but the height of image when resized to fit container (100% width).
Here is an example of my trouble:
var svg = d3.select(".preview").append("svg")
.attr({
width: "100%"
})
var exampleImage = svg.append("image")
.attr("xlink:href", "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg")
.attr({
class: "example-image",
width: "100%",
height: "100%"
});
var imgWidth = $(".example-image").width();
var imgHeight = $(".example-image").height();
$("h4").html(imgWidth + " x " + imgHeight);
$(document).ready(function() {
$("h3").html(imgWidth + " x " + imgHeight);
var imgObj = new Image();
imgObj.src = "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg";
imgObj.onload = function() {
$("h1").html("original size: " + imgObj.width + " x " + imgObj.height);
}
});
$("h2").html("Need height of resized image appended to svg, NOT original");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="preview" style="width: 200px; height: auto;"></div>
<h4></h4>
<h3></h3>
<h2></h2>
<h1></h1>
Note that height of an image will be used to set height of the whole svg element.
Here is the same snippet in jsbin: jsbin
There are several ways to do what you want. One of them is using getBBox():
var imgWidth = d3.select(".example-image").node().getBBox().width;
var imgHeight = d3.select(".example-image").node().getBBox().height;
Here is your code with that change:
var svg = d3.select(".preview").append("svg")
.attr({
width: "100%"
})
var exampleImage = svg.append("image")
.attr("xlink:href", "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg")
.attr({
class: "example-image",
width: "100%",
height: "100%"
});
var imgWidth = d3.select(".example-image").node().getBBox().width;
var imgHeight = d3.select(".example-image").node().getBBox().height;
$("h4").html(imgWidth + " x " + imgHeight);
$(document).ready(function() {
$("h3").html(imgWidth + " x " + imgHeight);
var imgObj = new Image();
imgObj.src = "https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg";
imgObj.onload = function() {
$("h1").html("original size: " + imgObj.width + " x " + imgObj.height);
}
});
$("h2").html("Need height of resized image appended to svg, NOT original");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="preview" style="width: 200px; height: auto;"></div>
<h4></h4>
<h3></h3>
<h2></h2>
<h1></h1>
PS: This is a constructive criticism: do not mix jQuery and D3. Not only this is unnecessary, but also this can make things break silently.
Related
Can anyone help me to get the image details in jQuery. Have dome with W X H, also want to add date too - realWidth, realHeight, 'Date'.
$(document).ready(function() {
var img = $("#img1");
// Create dummy image to get real size
$("<img>").attr("src", $(img).attr("src")).load(function() {
var realWidth = this.width;
var realHeight = this.height;
$('#resolution').html(realWidth + " X " + realHeight);
});
});
The issue is because load() is use to make an AJAX request to retrieve HTML content. To hook to the load event, use on() instead. Try this:
$(document).ready(function() {
var $img = $("#img1");
$("<img />").prop("src", $img.prop("src")).on('load', function() {
var realWidth = this.width;
var realHeight = this.height;
$('#resolution').html(realWidth + " X " + realHeight);
});
});
img {
width: 50px;
height: 37px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://i.imgur.com/3xi2iIl.jpg" id="img1" />
<div id="resolution"></div>
Also, I can only assume you need to retrieve the image size in this manner as the image is displayed in altered dimensions in the DOM. If this is not the case, you can read the size from #img1 directly.
I need to get the color of any pixel my mousepointer is currently hovering.
I found several solutions for canvas elements, but none for a background image defined in CSS for a element.
How can I achieve this?
Combining the answers from Get a CSS value with JavaScript and How to get a pixel's x,y coordinate color from an image?, I was able to simulate what you are looking for: JSFiddle
<html>
<head>
<style type="text/css">
#test {
background-image: url('http://jsfiddle.net/img/logo.png');
background-color: blue;
background-repeat: no-repeat;
height: 30px;
width: 100%;
}
#hidden {
display: none;
}
</style>
<script type="text/javascript">
var div = document.getElementById("test");
var style = window.getComputedStyle(div);
div.onmousemove = function(e) {
var path = style.getPropertyValue('background-image');
path = path.substring(4, path.length-1);
var img = document.getElementById("i1");
img.src = path;
var canvas = document.getElementById("c1");
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
var values = document.getElementById("values");
values.innerHTML = 'R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3];
};
</script>
</head>
<body>
<div id="test"></div>
<div id="hidden">
<img id="i1" src="" />
<canvas id="c1"></canvas>
</div>
<div id="values"></div>
</body>
</html>
I retrieved the computed style (var style = window.getComputedStyle(div);) outside of the mouse move function for performance reasons, but if the background image is going to change dynamically, then it may need to be moved into the function.
There are some possible browser constraints for using getComputedStyle.
SCALING
You could try editing the code to adjust for the scale:
var h = parseInt(style.getPropertyValue("width")),
w = parseInt(style.getPropertyValue("height"));
var img = document.getElementById("i1");
img.src = path;
var canvas = document.getElementById("c1");
canvas.width = h;
canvas.height = w;
canvas.getContext('2d').drawImage(img, 0, 0, w, h);
This also includes a change to the CSS: JSFiddle
Here is HTML and Code that draws an image into a canvas, after a user has used a file picker.
HTML
<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>
<button onclick='fncSaveAsJPG()'>Convert Img To JPEG</button>
<canvas id="cnvsForFormat" width="400" height="266"></canvas>
<img id='imgTwoForJPG' src="">
Script
<script>
window.picUpload = function(frmData) {
console.log("picUpload ran: " + frmData);
var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");
cnvs.style.border="1px solid #c3c3c3";
var img = new Image;
img.src = URL.createObjectURL(frmData);
console.log('img: ' + img);
img.onload = function() {
var picWidth = this.width;
var picHeight = this.height;
var wdthHghtRatio = picHeight/picWidth;
console.log('picWidth: ' + Number(picWidth));
console.log('picHeight: ' + Number(picHeight));
console.log('wdthHghtRatio: ' + wdthHghtRatio);
if (Number(picWidth) > 400) {
var newHeight = Math.round(Number(400) * wdthHghtRatio);
} else {
return false;
};
document.getElementById('cnvsForFormat').height = newHeight;
console.log('width: ' + picWidth + " h: " + picHeight);
console.log('width: 400 h: ' + newHeight);
//You must change the width and height settings in order to decrease the image size, but
//it needs to be proportional to the original dimensions.
ctx.drawImage(img,0,0, 400, newHeight);
};
cnvs.onload = function () {
console.log('Onload Canvas 2 Ran');
};
};
cnvsForFormat.onload = function () {
console.log('Onload Canvas Ran');
};
</script>
I've tried attaching the .onload() method to various elements and put the code in various places without any luck. How to I get some code to run with the <canvas> element is done with the drawImage event?
using jQuery:
Whenever someone adds a background image to a div, the width and height of the background image need to be known in advance.
e.g.
$("#id-of-some-div").css(
{
backgroundImage: 'url(' + backgroundImageUrl + ')',
height: 200,
width: 450,
position: 'absolute',
top: 20,
left: 20
});
Could I get the size of the image simply by using code as follows :
I've tested the following but it's not working, is it because I cannot use a return statement inside a $.load function? -I'm guessing a return statement needs to always be synchronous right?
e.g.
var bgImageUrl = "/*insert image url*/";
var backgroundImageHeightAndWidth = function(backgroundImageUrl)
{
var backgroundImageSize = [];
var backgroundImage = new Image();
backgroundImage.src = backgroundImageUrl;
backgroundImage.id = "background-image-id";
$("#background-image-id").load(function ()
{
backgroundImageSize.push($("#background-image-id").height());
backgroundImageSize.push($("#background-image-id").width());
return backgroundImageSize;
});
};
var backgroundImageHeightAndWidthArray = backgroundImageHeightAndWidth();
var backgroundImageHeight = backgroundImageHeightAndWidthArray[0];
var backgroundImageWidth = backgroundImageHeightAndWidthArray[1];
$("#id-of-some-div").css(
{
backgroundImage: 'url(' + backgroundImageUrl + ')',
height: backgroundImageHeight,
width: backgroundImageWidth,
position: 'absolute',
top: 20,
left: 20
});
var bg = "/*insert image url*/";
var bgimg = new Image();
bgimg.onload = function() {
var elem = document.getElementById('id_of_element');
elem.style.backgroundImage = 'url(' + bg + ')';
elem.style.height = this.height + 'px';
elem.style.width = this.width + 'px';
elem.style.position = 'absolute',
elem.style.top = '20px';
elem.style.left = '20px';
});
bgimg.src = bg;
I'm working on a responsive page whereby there's a embeded video content.
How can I update the parameter width/height in the iframe src as well as the iframe attribute width/height based on the width of the parent container as well as change when the window/orientation changes?
My mark-up:
<div class="content">
<div class="video">
<iframe src="http://www.foo.com/embeddedPlayer?id=4062930&width=672&height=377&autoPlay=false" width="672" height="377" border="0" frameborder="0" scrolling="no"></iframe>
</div>
</div>
Heres my JS:
var articleBodyWidth = $('.content').width(),
videoUrl = $('.video'),
videoSrc = videoUrl.find('iframe').attr('src'),
iframeWidth = videoUrl.find('iframe').attr('width'),
iframeHeight = videoUrl.find('iframe').attr('height');
// function to get param in url
function getParam(name) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(videoSrc);
if(results == null) {
return "";
} else {
return results[1];
}
}
var newWidth = articleBodyWidth,
newHeight = Math.round( (iframeHeight / iframeWidth) * articleBodyWidth );
// update iframe width and height
videoUrl.find('iframe').attr({
width: newWidth,
height: newHeight
});
I think this should do
$('.video iframe').attr('src', 'http://www.foo.com/embeddedPlayer?id=4062930&width=' + newWidth+ ' &height=' + newHeight + ' &autoPlay=false').css({
width: newWidth,
height: newHeight
})
Another solution is to use regex to replace height and width in the src
function updateVideo() {
var src = $('.video iframe').attr('src');
src = src.replace(/&width=\d+&/, '&width=' + newWidth + '&');
src = src.replace(/&height=\d+&/, '&height=' + newHeight + '&');
$('.video iframe').attr('src', src).attr({
width: newWidth,
height: newHeight
});
}
$(window).on('resize', updateVideo)
What you'll have to do is control the size with CSS.
<iframe src="http://www.foo.com/embeddedPlayer?id=4062930&width=672&height=377&autoPlay=false" border="0" frameborder="0" scrolling="no" id="video"></iframe>
<style type="text/css">
#video { width:100%; height:auto: }
</style>
I stripped the width and height from <iframe> so CSS could take over.
#kcdwayne is right. You should put the CSS in control in a responsive page.
For an embedded video the only variable is "height", but if you use #media-queries you can set height for different screen sizes, depending on layout changes.
Here's how I would try doing it:
http://tinyurl.com/a2cxfe6
More info about embedded flash object here:
http://www.aleosoft.com/flashtutorial_autofit.html