Hello friends! I've a requirement where I've to validate images with few criteria using
AngularJs. Below are the criteria:
i) Check image white background
ii) Image should contain only text - No logo attached or external images to it or watermark
iii) The image should fill-up 80% of the container like if that's a T-Shirt product image, then the image should cover at least 80% of that image container (JPEG, PNG)
I was only able to validate the white background and would expect some ideas or suggestions from the experts how would I implement the next two criteria. Anyone worked or has experience on the topics written above, share your valuable advises on it. Thanks.
Helping others is to provide help to yourself. Mark as answer, if the solution helps.
According to your description, as far as i know, about the first and the second needs are not so easy to achieve, but about the third needs, i make a sample in jQuery, please check:
Sample Code:
<head runat="server">
<title></title>
<style>
#box {
height: 150px;
width: 150px;
border: 1px solid red;
}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
$(function () {
debugger;
// define container size:
var parentel = $("#Image1").parent();
var parwidth = parentel.width();
var parheight = parentel.height();
var pararea = parwidth * parheight;
// define image size:
var imageel = $("#Image1");
var imagewidth = imageel.width();
var imageheight = imageel.height();
var imagearea = imagewidth * imageheight;
var ratio = (imagearea / pararea).toFixed(2);
alert(ratio * 100 + "%");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="box">
<asp:Image ID="Image1" runat="server" ImageUrl="QRCode.jpg" AlternateText="QRCode" />
</div>
</form>
</body>
Result:
Best Regards,
Eric Du
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Participant
1778 Points
838 Posts
Validate An Image With Criteria
Nov 11, 2017 04:06 PM|TechView|LINK
Hello friends! I've a requirement where I've to validate images with few criteria using AngularJs. Below are the criteria:
i) Check image white background
ii) Image should contain only text - No logo attached or external images to it or watermark
iii) The image should fill-up 80% of the container like if that's a T-Shirt product image, then the image should cover at least 80% of that image container (JPEG, PNG)
I was only able to validate the white background and would expect some ideas or suggestions from the experts how would I implement the next two criteria. Anyone worked or has experience on the topics written above, share your valuable advises on it. Thanks.
TechView
Contributor
6680 Points
2715 Posts
Re: Validate An Image With Criteria
Nov 13, 2017 08:31 AM|Eric Du|LINK
Hi TechView,
According to your description, as far as i know, about the first and the second needs are not so easy to achieve, but about the third needs, i make a sample in jQuery, please check:
Sample Code:
<head runat="server"> <title></title> <style> #box { height: 150px; width: 150px; border: 1px solid red; } </style> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> <script> $(function () { debugger; // define container size: var parentel = $("#Image1").parent(); var parwidth = parentel.width(); var parheight = parentel.height(); var pararea = parwidth * parheight; // define image size: var imageel = $("#Image1"); var imagewidth = imageel.width(); var imageheight = imageel.height(); var imagearea = imagewidth * imageheight; var ratio = (imagearea / pararea).toFixed(2); alert(ratio * 100 + "%"); }); </script> </head> <body> <form id="form1" runat="server"> <div id="box"> <asp:Image ID="Image1" runat="server" ImageUrl="QRCode.jpg" AlternateText="QRCode" /> </div> </form> </body>Result:
Best Regards,
Eric Du
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.