I am trying to crop an image from an url and then stretch the cropped image to the available space.
<div style="width:300px; height:400px;">
<img style="width:100%; height:100%;" src="http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&d=identicon&r=PG" />
</div>
This will stretch the image appropriately, but I do not know how to crop it. I have tried to use clip:rect(0px,60px,200px,0px); but the image will stretch to the available space first and then apply the clip, so it doesn't work for me.
Edit - jsfiddle: http://jsfiddle.net/bjMp6/
For example, I want to try and just crop the head and then stretch the head
Working off of Yoshi's idea without the second div
div
{
width:300px;
height:400px;
border:1px solid #333;
overflow:hidden;
position:relative;
}
img
{
width:300%;
height:300%;
position:absolute;
top:0;
left:-50%;
}
Added the border just to see the containing div. This way you will not need to know the dims of the container but for cropping an image you will have to play with the number with any solution unless all of the images have the same relative composition ie headshots or something similar.
Here's a fiddle for your viewing pleasure.
Also as the container grows/shrinks your image will retain the same crop and position.
I made a fiddle to illustrate the canvas solution :
http://jsfiddle.net/dystroy/mDy24/
Here's the html :
<div id=theimg style="width:300px; height:400px;">
<canvas id=thecanvas style="width:100%;height:100%;">
</div>
And the js :
var img = new Image();
img.src = "http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&d=identicon&r=PG";
img.onload = function() {
var can = document.getElementById('thecanvas');
var con = can.getContext("2d");
console.log(con);
con.drawImage(img, 0, 0, 50, 50, 0, 0, can.width, can.height);
}
Related
I have a div which holds an image. The image itself is loaded in later :
HTML :
<div id="image_holder" class='hide'>
<img id="image" onload="createStimuli() " >
<canvas id="canvasOverImage" class="coveringCanvas" ></canvas>
</div>
coveringCanvas style :
CSS:
.coveringCanvas {
position:relative;
z-index:2
}
Next, when the time is right I load in the image.
document.getElementById('image').src = `imagesource`;
Because now the image is loaded, it triggers createStimuli():
function createStimuli() {
var image = $('#image');
var canvas = $('#canvasOverImage');
canvas.css({top:`-${image.height()}px`}); // set style via css
canvas.attr({ "height":image.height(), "width" :image.width()}); // set attr in html
}
This code places the canvas exactly on top of the image (as intended) But it appears that before the position is changed to be on top, it is placed below or next to the image, stretching the canvas.
As a result, even though the canvas is on the image, the creation of the canvas stretches the div leaving empty space below/next to the div.
Is there a way to counter this? Or should i just resize the div after creating the canvas?
To work around this issue :
First set your image_holder div's position to relative . to make sure all absolute positionned elemnt will be positioning to this last .
Then make canvas position to absolute and left postion to 0
#canvasOverImage {
position:absolute;
}
You can test below snippet i've added some borders to canva to see result
document.getElementById('image').src = "https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg";
function createStimuli() {
var image = $('#image');
var canvas = $('#canvasOverImage');
//canvas.css({top:-(image.height()+5)+'px'}); // set style via css
canvas.attr({ "height":image.height(),"width" :image.width()});
}
#image_holder {
position:relative;
}
#canvasOverImage {
border:1px solid red;
position:absolute;
}
#canvasOverImage {
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image_holder" class='hide'>
<img id="image" onload="createStimuli() " ><!--
--><canvas id="canvasOverImage" class="coveringCanvas" ></canvas>
</div>
Note that i've just remove 5 px to fit exactely image and remove extra space between image and canvas
You could accomplish such thing in a more efficient manner by doing it using the following way ...
document.getElementById('image').src = "https://s-media-cache-ak0.pinimg.com/736x/52/30/66/523066972863437c1a5daa774d1e5414.jpg";
function createStimuli(e) {
var canvas = $('#canvasOverImage')[0];
// set canvas css style
canvas.style.marginLeft = -(e.width + 3) + 'px'; // 3 ~ border width
// set canvas attr in html
canvas.width = e.width;
canvas.height = e.height;
// draw text on canvas *proves canvas is on top*
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.font = 'bold 18px Arial';
ctx.fillText('hello', 10, 25);
}
.coveringCanvas {
border: 3px solid black;
}
.hide {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image_holder" class='hide'>
<img id="image" onload="createStimuli(this)">
<canvas id="canvasOverImage" class="coveringCanvas"></canvas>
</div>
Need help, when i apply border radius to imgae via css, it is not rendering properly, rendered image should be same preview image. I used html2canvas to convert div to image.
Attached image for reference, first one is normal preview with border-radius and 2nd one without border-radius.
<div id="mydiv">
<img src="1.jpg" />
<p>text!</p>
</div>
<p>Generated image</p>
<div id="image">
<p>Image:</p>
</div>
CSS
<style>
#mydiv {
width: 300px;
height: 200px;
background:#000;
}
#mydiv img {
width: 200px;
height: 200px;
border-radius:100%;
}
</style>
js
html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
//document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});
This is an unresolved bug (the issue has been reported):
http://github.com/niklasvh/html2canvas/issues/346
You can use the clipping capability of canvas as a workaround.
A Demo: http://jsfiddle.net/m1erickson/8wL2q/
Example code using a clipping area instead of border radius:
// save the context in its unaltered state
ctx.save();
// fill canvas with black
ctx.fillStyle="black";
ctx.fillRect(0,0,canvas.width,canvas.height);
// create clipping region which will display portion of image
// The image will only be visible inside the circular clipping path
ctx.beginPath();
ctx.arc(100,100,100,0,Math.PI*2);
ctx.closePath();
ctx.clip();
// draw the image into the clipping region
ctx.drawImage(img,0,0);
// restore the context to its unaltered state
ctx.restore();
use border: solid windowtext 1.0pt;instead of border:1px solid #fff;in css
I'm using jQuery 10.4.2 at the moment. I want to smoothly scale up an absolute positioned image. When I use the following code, I get no errors, but the animation does not occur. Instead, the image simply snaps to the full (100%) size.
HTML
<div class="box">
<img class="scaleMe" src="img.gif" />
</div>
CSS
.box { position:relative; height:0; padding-bottom:61.6667%; background-image:url('background.gif'); }
.scaleMe { display:block; position:absolute; bottom:0; left:0; z-index:1; width:50%; }
JS
$('.scaleMe').animate({width:'100%'}, 2000);
What am I doing wrong?
Update:
Here is a jsFiddle that works: http://jsfiddle.net/s_d_p/27DhK/
But here is a live demo that doesn't work.
You don't have a src on your image tag. Try:
<div class="box">
<img class="scaleMe" src="http://placekitten.com/g/200/300" />
</div>
http://jsfiddle.net/GZ8yX/
This is kind of lame, but if I capture the target width first and animate to that pixel value and then replace it with a percentage it works:
var oli = $('.scaleMe');
var toWidth = $('.box').width();
var scaleUP = function() {
oli.animate({width:toWidth}, 2000, function(){
oli.removeAttr("style");
oli.css("width", "100%");
});
}
So Far:
The image is shown on the browser, but it is not resized.
<html>
<img id="banner" src="c:/Users/Name/Downloads/picture.jpg" alt="banner" />
<Script>
var X = screen.width;
var Y = screen.height;
banner = document.getElementById('banner');
banner.style.width = X + 'px';
banner.style.height = (Y/5) + 'px';
</Script>
</html>
Other Attempts:
Show the image using purely javascript
Width and height variables accessed through javascript
First, try with no size specs
Image is not shown when I use:
document.write("<img src='c:/Users/Name/Downloads/picture.jpg' />")
Future Thoughts:
My next attempt will be trying to pass the javascript width and height variables to the html since it seems that the html image always shows and given the right size specifications, then that would be exactly what I want. I will post that here if I find a successful method.
markup and CSS like this should do trick for you.
<div class="banner"></div>
div
{
background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat left top;
width:100%;
height:200px;
background-size:cover;
}
Or even better you can try this CSS instead of above
div
{
position:fixed;
left:0px;
right:0px;
top:0;
height:250px;
background:url(https://www.google.com/images/srpr/logo11w.png) no-repeat center center;
}
I have a div of known size and a link to some image with random size, which i want to show inside this div. I would like an image to have proportional scaling, to be as big as posible, but no bigger than div (either the image width should equal the div's width or the image height should equal the div's height, but i dont exactly know which case).
How could i do it using only html, css, javascript and jquery?
And it would be great not to read the image size.
You can do this with pure CSS by setting max-width and max-height to 100%. This is a great article to read on the subject: http://unstoppablerobotninja.com/entry/fluid-images. The article also discusses how to deal with older versions of IE.
Here's an example of the CSS in action - http://jsfiddle.net/JamesHill/R7bAA/
HTML
<div id='div1'>
<img class='myImageClass' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' />
</div>
<br />
<div id='div2'>
<img class='myImageClass' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' />
</div>
CSS
#div1
{
height:100px;
width:200px;
background-color:Gray;
border: 1px solid Black;
}
#div2
{
height:500px;
width:100px;
background-color:Gray;
border: 1px solid Black;
}
.myImageClass
{
max-height:100%;
max-width:100%;
}
Here's a javascript method that computes the aspect ratio of image and container and sets the corresponding height or width value that will first hit the edge and the image then scales the other dimension proportionally:
// pre-cache image
var img1 = new Image();
img1.src = "http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg";
var img2 = new Image();
img2.src = "http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg";
function placeImage(imgObj, containerID) {
var container = $(containerID);
var imageAspectRatio = imgObj.height / imgObj.width;
var containerAspectRatio = container.height() / container.width();
// figure out which dimension hits first and set that to match
if (imageAspectRatio > containerAspectRatio) {
imgObj.style.height = container.height() + "px";
} else {
imgObj.style.width = container.width() + "px";
}
container.append(imgObj);
}
$("#go").click(function() {
placeImage(img1, "#container1");
placeImage(img2, "#container2");
});
You can see it here in this jsFiddle: http://jsfiddle.net/jfriend00/5K3Zf/