I have a class with a property that can be an Image (i.e. an IMG element) or a Canvas. When I serialize it to JSON, I need to convert this to a text string. If it is a Canvas, then I can call Canvas#toDataURL. But if it is an Image, I first need to draw it to a Canvas with Canvas#drawImage, then serialize that canvas with toDataURL.
So how do I determine if the object is a Canvas or an Image? (Since Canvas#drawImage is capable of accepting either Image or Canvas objects as an argument, there must be a way.)
I have seen that some programmers test for the existence of certain properties or functions to determine class, but I was wondering if there is a smarter way that won't break if the API presented by these objects changes.
Check if element is an Image <img /> using jQueryfind() method to check if the element in an image or with <img /> tag. Using the . attr() method I can get the src and id of each image. Change the value img to p and you will get the details about the paragraph (properties and text) inside the container.
I found out that when the canvas is empty all of the pixel data returns 0 in all index positions of the array. So I used that to detect if there is any 0 's or not and as the result I made it so it returns a boolean. If the canvas has been drawn on then it returns true and if it hasn't then it returns false .
The Canvas Size command is used for adding space around a photo or essentially cropping the image by reducing the available space. More Detail: For example, let's assume you have an image that is currently sized at 8-inches by 12-inches at 300 pixels per inch (2,400 by 3,600 pixels).
function isImage(i) {
return i instanceof HTMLImageElement;
}
If cross-window/frame compatibility is a concern you can check nodeName
:
var isImg = (element.nodeName.toLowerCase() === 'img');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With