CODEWITHSUNDEEP
c#csshtmlimage
Akshay
Akshay

Reputation: 11

Crop image in HTML5 CSS or C#.NET

I want to select area on image and then crop it in multiple parts and save these multiple images separately in a folder using HTMl CSS etc Please guide me how to select an area of image and divide it in multiple images like 10 rows and 3 columns so there will be 30 cropped images and will be saved seperately in a folder, I want to do this using HTMl CSS if web based applications and if not I can work with C# .NET for standalone application for this task

Upvotes: 1

Views: 305

Answers (2)

Alex
Alex

Reputation: 471

If using css, I would have thought your task with negative margins.

To begin, place your image to the parent element, for example in paragraph (tag <p>). Parental paragraph should be floating (floating) element (or a predetermined width). I note that on the elements with the attribute "full width" is not working.

Next we set negative margins for all four sides: top, right, bottom and left. Negative margins determine how cut off in every direction, our image is located in the parent section (paragraph <p>). We get only a portion of the original image - a scrap. Then, when we replace the parent property overflow to the hidden, we hide fields that are beyond our pruning. Objective achieved. You will, however, have to tinker with the values that specify the required dimensions exactly.

<p class="crop"><a href="#"><img src="img.jpg" /></a></p>



.crop {
    float: left;
    margin: .5em 10px .5em 0;
    overflow: hidden; /* this is important */
}
/* input values to crop the image: top, right, bottom, left */
.crop img {
    margin: -41px -156px -40px -30px;
}

Upvotes: 1

Stefan van de Laarschot
Stefan van de Laarschot

Reputation: 2163

Why are you not just using JQuery Cropper?

https://fengyuanchen.github.io/cropper/

Upvotes: 0

Related Questions