So I have YouTube video thumbnails displayed on a website, but they seem to have letterboxing at the top and bottom. I need to crop this, but I can't just crop x many pixels because of the reponsive design.
How would I crop images dynamically based on their width? Would I have to do it using Javascript during resize? Or is there a simpler approach?
I had a similar issue. I solved it by drawing the image to a canvas, iterating through rows of pixels and checking if they were black. The first time a colored pixel was detected marked the edge of the letterbox. I used this information to crop the image and draw it to another canvas.
It's not a perfect solution, but it worked for me. I hope this helps.
You can use object-fit css but it's not full browser compatible, however a polyfill exist
Else you can use div with background-image and background-size with cover or contain, that have a better support
Related
I'm creating my portfolio, I drew some layout but now I've problem with code. As You can see on the image.
Visualisation:
the black area will be a photo
the white area will be a normal bacround color / maybe also image i'll see.
Full width scalable
I want to use background image that will be scalable and the problem is that I've no idea how to resolve problem with the links (grey field). Because I want link gaps to start at the end of the screen and end before the white background (at the boarder).
I was thinking about the image maps but it is not a good solution... Maybe You've got an idea.
I've found similiar problem (about positioning link gaps according to background position - scaleable) - Link is here - stackoverflow
Now I have the same problem like in the question above - it is working if I won't use proportional background scaling.
It's a tricky layout.. BUT! (I assume full-width scaleable and fixed aspect ratio)
Since you know the angle of the intersection of the areas will be the same. If you put your links at known y-axis percentages from top corner you will have a fixed precentage in the x-axis.
Then if you choose to go full browser width you could use 'position: fixed'(CSS) for the links together with scaling and top/bottom/left/right(CSS).
Otherwise i believe you could use relative positioning with the same principle.
Hope that will get you on your way!
Usually when an image is being resized in javascript or css3(using background-size), it will stretch an image from the center point. I need an image to be stretched and distorted from a single point that could be anywhere. It's going to be dynamic so I don't want to resort to using separate images.
Here's a pic that illustrates what I mean:
Hopefully there's an answer out there!
You have a few options to achieve this effect.
The "correct" way would be to use canvas to draw the image: Skewing images individually using canvas
Another way would be to fake the effect using the CSS transform skew.
http://developerdrive.com/demo/skewing_elements/skewing_elements.html
You would do this inside an element with "overflow: hidden" to make it look like a background image.
It's not even clear to me what you want from the image you're linking too. Do you want it distorted or not? And is the distortion uniform?
I'm going to guess whatever you're doing can be approximated by drawing an ever decreasing set of (or maybe rectangles) clipped from the center of a some image and drawing them onto a "canvas" (think generic term not html5 term) given new coordinates for the center of each clipping. There may be a faster way to draw this than redrawing parts of the image multiple times, it's just how I visualize it possibly working.. at least maybe in some mathematical sense.
I'm trying to use Raphael's VML functionality for generating a circle with an image (fix for IE8 that lacks border-radius).
My problem is that if I use
circle.attr({fill: 'url(image.jpg)'});
and my image is larger than the circle the image is only partially showed and I can't find a way to downscale the image to the diameter of the circle.
How can I do this?
Are you serious about fixing IE8 border-radius with RaphaelJS?
I would suggest something like css3pie and there is even question in SO about usage.
But still, if you want to use RaphaelJS, you will need to use Element.transform to scale your image and only afterwards, set up rounded corners effect with another element.
I need my site to be able to resize and crop an image based on the viewport on a browser. I've so far managed to dynamically resize it with an imagemap, but can't seem to crop it dynamically. I'd like it to crop and scale simultaneously without distorting an image. The image I'm using is 1920x1080 which is far bigger than most browsers so cropping the edges while scaling would make it appear similar on different browsers.
I use this jQuery plugin quite often. :)
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It sounds like you can already detect the viewport size somehow. You just need the CSS or javascript to crop an image. In that case, I'd recommend this article:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
You could
1) Use negative margins.
2) Absolute position the image in a smart way.
3) Use the CSS clip property.
I am experimenting with canvas as part of my HTML5 introduction. This constitutes as assignment work, but I am not asking for any help on the actual coursework at all.
I am trying to write a rendering engine, but having no luck because once the image is drawn on canvas it looks very distorted, and not at the right dimensions of the image itself.
I have made a animation engine that loads images into an array, and then iterates through them at a certain speed. This is not the problem, and I assume is not causing the issue as this was happening when I drawn an image to the canvas without the animation component.
I think this is natural behaviour for images to be scaled/skewed when the window is resized, so I conquered that by simply redrawing the whole thing once the window is resized.
The images I am using are isometric, and drawn at a pixel level. Would this cause the distortion? It seems setting the dimensions on the drawImage() function are not working are all. I am using JavaScript for the manipulation and rendering of the canvas.
I would normally try and work it out myself, but I do not have any time to ponder why because I have no idea why it is even scaling/skewing the image once it is drawn on the canvas. I cannot share the code for obvious reasons. I should also mention, the canvas's dimension is the total width of the viewport, as I am developing a game.
My question is: Has anyone encountered this and how would I correct it?
Thanks for your help.
Seems that you set dimensions of canvas with css.
Try defining them as html attributes. Example:
<canvas id="test" width="100" height="100">Fallback content</canvas>
Edit:
It will set width/height of canvas element to 100/100 pixels.
Yes, the problem was I was setting the canvas's dimensions with CSS. The canvas element is treated like an image, and I was actually scaling the canvas with CSS not resizing it. Thanks for the help. – Mark just now