html5 introduces a new element to contain images. what is that element?
Images are without a doubt the number one low-tech way to add together pizazz and color to an otherwise lackluster spider web folio. I can nevertheless remember my excitement upon creating my first mouseover image swap. It was similar reading a magazine, except one that reacted to my actions.
Mouseover furnishings notwithstanding, at that place were a number of limitations to using images in web pages, i of the about salient being that there was no way to semantically acquaintance an image with its caption. Well, that's all inverse with HTML5. In fact, yous won't believe some of the cracking things that yous can exercise with images now!
What's Out and What's In
The align, edge, hspace, and vspace layout attributes were deprecated in HTML 4.01, and are no longer supported in HTML5. However, alt, src, height, width, ismap, usemap, likewise as upshot-related attributes are even so live and well. There has too been talk of a longdesc aspect for use when the text in the paradigm is more than than can fit in the alt. The longdesc would provide a link to a page with a more detailed description. However, it is not supported by whatsoever browser at this time. The attributes that have been deprecated are those which could presumably be covered by CSS rules. The peak and width are still necessary because they tell the browser how much space to allocate on the page for the paradigm. You do ever include them right?
New Elements: Effigy and Figcaption
Getting back to the captions issue, HTML5 introduces two elements that work in tandem to add captions and other text details to diagrams, illustrations, photos, code examples, and pretty much whatsoever other visual element that you can recall of. Y'all'll besides be happy to know that they are supported by ALL the major browsers!
Here'south how it works: The <figure> element encloses both the prototype and explanation, if y'all include i. You run into, the <figcaption> element is optional, so you can have an image without one. I'k not certain what the advantage would exist to enclosing your epitome in a <figure> tag without a caption, only there is nothing stopping you from doing so. Merely one <figcaption> element may exist nested within a <figure>, although the <effigy> chemical element itself may comprise other child elements, such every bit <img> or <code>, and can appear earlier or afterward the content within the <figure>. Here's an instance:
<figure> <img id="robAtGreenfields" src="Rob_at_Greenfields.jpg" alt="Rob at Greenfields" width="342" height="514" style="border: 3px showtime grey;"> <figcaption fashion="clear: left;margin: .75em 0;text-align: center;font-mode: italic;line-height: 1.5em;" <br/>>I am an It adept, just I want to be a rock star! <br>Image courtesy of <a href="http://www.christopp.ca/habitation.htm">Chris Topp Photography</a></figcaption> </figure>
The Canvas Chemical element
The Canvas tag is a new HTML element which for drawing graphics using a scripting language such as JavaScript. It can be used to draw graphs, brand photograph compositions or fifty-fifty animations. Moreover, it'southward a great tool for creating centre-communicable paradigm filter effects.
Here'southward a functions to retrieve an image'due south pixels:
part getPixels(img) { var c = certificate.createElement('canvas'); with (c) { width = img.width; pinnacle = img.height; } var ctx = c.getContext('second'); ctx.drawImage(img); return ctx.getImageData(0,0,c.width,c.tiptop); }; The following code applies a grayscale filter on an paradigm:
function grayscale(img) { var d = getPixels(img).data; for (var i=0; i<d.length; i+=4) { var r = d[i]; var thou = d[i+ane]; var b = d[i+two]; // CIE luminance for the RGB var v = 0.2126*r + 0.7152*g + 0.0722*b; d[i] = d[i+1] = d[i+2] = v } return pixels; }; That's the bones code. The HTML5Rocks site has a more complete lawmaking listing to reach the grayscale and several other absurd image furnishings.
Cropping an Image
The key to cropping an image using the HTML5 Canvas is the drawImage() method. It accepts an paradigm object, plus six boosted parameters: sourceX, sourceY, sourceWidth, sourceHeight, destWidth and destHeight. Nosotros tin utilize these parameters to ascertain the exact location and size of a rectangle that we desire to ingather from the larger epitome:
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
Here's some code that uses the window and epitome'south onload events to display a cropped version of the in a higher place image when the folio loads. All you need is a <canvas> tag in which to put the image:
<script blazon="text/javascript"> window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var imageObj = new Image(); imageObj.onload = function(){ // describe cropped image var sourceX = 80; var sourceY = 0; var sourceWidth = 150; var sourceHeight = 270; var destWidth = sourceWidth; var destHeight = sourceHeight; var destX = canvas.width / 2 - destWidth / 2; var destY = canvas.peak / 2 - destHeight / 2; context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight); }; imageObj.src = "Rob_at_Greenfields.jpg"; }; </script> </caput> <body> <canvas id="myCanvas" width="578" height="400"></canvas> Determination
That'due south a mere taste of what yous tin practice with images. Other furnishings include elevate & drop, image resizing, cloning, inverting, animation, sharpening & blurring furnishings, and more! For instance, hither's an oscillating bubble animation that moves with amazingly fluidity! Call back to employ the Modernizr library to make sure that browsers back up the canvas object and its attributes. You may also want to recall of how to present the content to people using older browsers.
Source: https://www.htmlgoodies.com/html5/html5-image-attributes-and-features-explained/