in my application i am uploading the image into database. before it is store in the database, i want to do image management like decreasing size and decreasing height and width of the image. can u help me. is there any source code or any reference please.
What codebehind language are you using?
I find 4guysfromrolla to be a good ASP.NET reference, try this article for starters:
https://web.archive.org/web/20211020111640/https://www.4guysfromrolla.com/articles/012203-1.aspx
If you're talking about something like creating a thumbnail image. the Image() class will let you scale an existing image up or down. YMMV.
You want to be looking at the System.Drawing name space for manipulating images with ASP.NET. You can load any supported image file type (i.e. jpg, gif, png, etc) using Image.FromFile(), Image.FromStream(), etc. From there you use the Drawing Graphics context to manipulate the image. To give you a flavour here is my resize image function:
// Creates a re-sized image from the SourceFile provided that retails the same aspect ratio of the SourceImage.
// - If either the width or height dimensions is not provided then the resized image will use the
// proportion of the provided dimension to calculate the missing one.
// - If both the width and height are provided then the resized image will have the dimensions provided
// with the sides of the excess portions clipped from the center of the image.
public static Image ResizeImage(Image sourceImage, int? newWidth, int? newHeight)
{
bool doNotScale = newWidth == null || newHeight == null; ;
if (newWidth == null)
{
newWidth = (int)(sourceImage.Width * ((float)newHeight / sourceImage.Height));
}
else if (newHeight == null)
{
newHeight = (int)(sourceImage.Height * ((float)newWidth) / sourceImage.Width);
}
var targetImage = new Bitmap(newWidth.Value, newHeight.Value);
Rectangle srcRect;
var desRect = new Rectangle(0, 0, newWidth.Value, newHeight.Value);
if (doNotScale)
{
srcRect = new Rectangle(0, 0, sourceImage.Width, sourceImage.Height);
}
else
{
if (sourceImage.Height > sourceImage.Width)
{
// clip the height
int delta = sourceImage.Height - sourceImage.Width;
srcRect = new Rectangle(0, delta / 2, sourceImage.Width, sourceImage.Width);
}
else
{
// clip the width
int delta = sourceImage.Width - sourceImage.Height;
srcRect = new Rectangle(delta / 2, 0, sourceImage.Height, sourceImage.Height);
}
}
using (var g = Graphics.FromImage(targetImage))
{
g.SmoothingMode = SmoothingMode.HighQuality;
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.DrawImage(sourceImage, desRect, srcRect, GraphicsUnit.Pixel);
}
return targetImage;
}
You can either use the image class or a 3rd party DLL such as ASPJPEG. A few ASPJPEG samples can be found here. I do a lot of image processing and my host reliablesite supports this dll on their servers.
Related
I have profile photo of users stored in Firebase and I want to know how I can create a marker with the user's profile photo with an orange border.
I tried some code from the internet and it works but the measurements seem to be wrong and I don't know what I'm doing wrong.
The code I used:
fun setMarkerPhoto(user:User, location: Location){
var bitmapFinal : Bitmap?
if(hasProfilePhoto){
/*val options = RequestOptions()
options.centerCrop()*/
Glide.with(this)
.asBitmap()
/*.apply(options)*/
.centerCrop()
.load(user.image)
.into(object : CustomTarget<Bitmap>(){
override fun onResourceReady(resource: Bitmap, transition: com.bumptech.glide.request.transition.Transition<in Bitmap>?) {
bitmapFinal = createUserBitmapFinal(resource)
markerOptions
.position(LatLng(location!!.latitude, location!!.longitude))
.title("Current Location")
.snippet(address)
.icon(BitmapDescriptorFactory.fromBitmap(bitmapFinal))
mCurrentMarker = googleMap.addMarker(markerOptions)
}
override fun onLoadCleared(placeholder: Drawable?) {
TODO("Not yet implemented")
}
})
}else{
markerOptions
.position(LatLng(mLastLocation!!.latitude, mLastLocation!!.longitude))
.title("Current Location")
.snippet(address)
.icon(BitmapDescriptorFactory.fromBitmap(smallMarker))
mCurrentMarker = googleMap.addMarker(markerOptions)
}
}
private fun createUserBitmapFinal(bitmapInicial: Bitmap?): Bitmap? {
var result: Bitmap? = null
try {
result = Bitmap.createBitmap(150,150, Bitmap.Config.ARGB_8888) //change the size of the placeholder
result.eraseColor(Color.TRANSPARENT)
val canvas = Canvas(result)
val drawable: Drawable = resources.getDrawable(R.drawable.ic_pickup)
drawable.setBounds(0, 0, 150,150) //change the size of the placeholder, but you need to maintain the same proportion of the first line
drawable.draw(canvas)
val roundPaint = Paint(Paint.ANTI_ALIAS_FLAG)
val bitmapRect = RectF()
canvas.save()
if (bitmapInicial != null) {
val shader =
BitmapShader(bitmapInicial, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
val matrix = Matrix()
val scale: Float = 200 / bitmapInicial.width.toFloat() //reduce or augment here change the size of the original bitmap inside the placehoder.
// But you need to adjust the line bitmapRect with the same proportion
matrix.postTranslate(5f, 5f)
matrix.postScale(scale, scale)
roundPaint.shader = shader
shader.setLocalMatrix(matrix)
bitmapRect[10f, 10f, 104f+10f]=104f+10f //change here too to change the size
canvas.drawRoundRect(bitmapRect, 56f, 56f, roundPaint)
}
I didn't really understand how to perfectly fit the bitmap image inside the placeholder. My marker looked like this:
also the image wasn't being center cropped even though I mentioned that it should be in the code, where it says Glide.centerCrop()
Also, I'm using GeoFire to display markers of users in a specified radius of the user and for now I can display a simple marker but I want the marker to have that user's profile photo too! How can I do it?
GeoFire Code:
val geoQuery: GeoQuery = geoFire.queryAtLocation(GeoLocation(location.latitude, location.longitude), 0.5)
geoQuery.addGeoQueryEventListener(object : GeoQueryEventListener {
override fun onKeyEntered(key: String, location: GeoLocation) {
println(String.format("Key %s entered the search area at [%f,%f]", key, location.latitude, location.longitude))
Log.i("key entered","User found around you")
val aroundYou = LatLng(location.latitude, location.longitude)
if (markerList != null) {
for (marker in markerList) {
marker.remove()
}
}
otherMarkerOptions
.position(aroundYou)
.title("Current Location")
//.snippet(address)
.icon(BitmapDescriptorFactory.fromBitmap(smallMarker)) //This is a simple marker but i want it to have the user's profile photo
markerList.add(googleMap.addMarker(otherMarkerOptions))
//}
}
Thank you in advance
Edit:
In the line: val drawable: Drawable = resources.getDrawable(R.drawable.ic_pickup)
It's this png:
I want to insert the profile photo of the user on that drawable file and if the user doesn't have a profile photo then only the drawable photo will be visible.
You get the code to transform the bitmap from my code in another question in StrackOverflow. As I mentioned there, I can´t teste the code because i´m only working with flutter right now.
But looking ate your code I might try this:
Add this function:
fun dp(value: Float): Int {
return if (value == 0f) {
0
} else Math.ceil(resources.displayMetrics.density * value.toDouble()).toInt()
}
in your lines:
result = Bitmap.createBitmap(150,150, Bitmap.Config.ARGB_8888);
drawable.setBounds(0, 0, 150,150);
change to:
result = Bitmap.createBitmap(dp(62f), dp(76f), Bitmap.Config.ARGB_8888);
drawable.setBounds(0, 0, dp(150f), dp(150f)) ;
let me know the results.
I posted this other topic, got some gentle replies, but although the answers resolved the quality side of the question they created another issue with the image size in kb.
Asp.net image resizing quality
Here is the issue.
I have a 2MB image that I want to reduce to 480px width.
I used three different ways to resize it:
1) On Fileupload ran this code:
System.IO.Stream st = FileUploadPost.PostedFile.InputStream;
myImage = System.Drawing.Image.FromStream(st);
thumb = myImage.GetThumbnailImage(newWidth, newHeight, null, System.IntPtr.Zero);
thumb.Save(myPath);
Benefits: Size in kb becomes small (around 80Kb).
Downside: Visual quality is horrible
2) On Fileupload ran this code (solution provided on the mentioned post):
Bitmap newImg = new Bitmap(newWidth, newHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);
Graphics newGraphic = Graphics.FromImage(newImg);
newGraphic.DrawImage(myImage, 0, 0, newWidth, newHeight);
newGraphic.Dispose();
newImg.Save(myPath);
Benefits: Visual quality is good
Downside: Size continues very big (around 400kb)
3) Used Windows Paint software and "manually" reduced the image to 480px width
Benefits: Benefits of both 1) and 2) -> Visual quality is good and size is reduced to around 80kb
Question is:
What is the code that reproduces item 3 behaviour (good visual quality and smaller size in kb)?
Thanks
Try one of these:
Bitmap newImg = new Bitmap(newWidth, newHeight, System.Drawing.Imaging.PixelFormat.Format16bppRgb555);
Graphics newGraphic = Graphics.FromImage(newImg);
newGraphic.DrawImage(myImage, 0, 0, newWidth, newHeight);
newGraphic.Dispose();
newImg.Save(myPath);
or
Bitmap newImg = new Bitmap(newWidth, newHeight, System.Drawing.Imaging.PixelFormat.Format16bppArgb1555);
Graphics newGraphic = Graphics.FromImage(newImg);
newGraphic.DrawImage(myImage, 0, 0, newWidth, newHeight);
newGraphic.Dispose();
newImg.Save(myPath);
or
Bitmap newImg = new Bitmap(newWidth, newHeight, System.Drawing.Imaging.PixelFormat.Format8bppIndexed);
Graphics newGraphic = Graphics.FromImage(newImg);
newGraphic.DrawImage(myImage, 0, 0, newWidth, newHeight);
newGraphic.Dispose();
newImg.Save(myPath);
This should only slightly degrade the quality and drastically reduce the size, Im not sure which one would be better though.
Here are a whole bunch of other options to try as well:
http://msdn.microsoft.com/en-us/library/system.drawing.imaging.pixelformat%28v=vs.110%29.aspx
protected void Page_Load(object sender, EventArgs e)
{
//BR**
string filePath = "";//Source file path with image name
int CompressLevel = 50;//Image compression leve as per our requirement
string DestintionPath = "";//Destination file path
string Filename = "";//Output image name to save in destination path
Stream bmpStream = System.IO.File.Open(filePath, System.IO.FileMode.Open);
Bitmap bmp1 = new Bitmap(bmpStream);
ImageCodecInfo jpgEncoder = GetEncoder(ImageFormat.Jpeg);
System.Drawing.Imaging.Encoder myEncoder = System.Drawing.Imaging.Encoder.Quality;
EncoderParameters myEncoderParameters = new EncoderParameters(1);
EncoderParameter myEncoderParameter = new EncoderParameter(myEncoder, CompressLevel);
myEncoderParameters.Param[0] = myEncoderParameter;
bmp1.Save(DestintionPath + "\\" + Filename, jpgEncoder, myEncoderParameters);
//BR**
bmpStream.Close();
string lblmsg = "Compressed Sucessfully with Compression Level { " + CompressLevel.ToString() + " }";
}
private ImageCodecInfo GetEncoder(ImageFormat format)
{
/*/ Hope this will work.Thanks in advance /*/
ImageCodecInfo[] codecs = ImageCodecInfo.GetImageDecoders();
foreach (ImageCodecInfo codec in codecs)
{
if (codec.FormatID == format.Guid)
{
return codec;
}
}
return null;
}
Bit of a strange question and I don't know whether anyone will have come across this one before.
We have a ASP.net page generating physical thumbnail jpeg files on a filesystem and copying fullsize images to a different location. So we input one image and we get a complete copy in one location and a small image 102*68 in a different location.
We're currently looking to finally move away from IIS6 on Server 2003 to IIS7.5 on Server 2008R2, except there's on problem.
On the old system (so IIS6/Server 2003) the black borders are removed and the image stays at the correct ration. On the new system (IIS7.5/Server 2008) the thumbnails are rendered exactly as they exist in the JPEG, with black borders, but this makes the thumbnail slightly squashed and obviously includes ugly black borders.
Anyone know why this might be happening? I've done a google and can't seem to find out which behaviour is "correct". My gut tells me that the new system is correctly rendering the thumbnail as it exists, but I don't know.
Anyone have any suggestions how to solve the problem?
I think as suggested it is the .net differences. not IIS.
Just re write your code, your save a lot of time, very simple thing to do.
Here is a image handler i wrote a while ago that re draws any image to your settings.
public class image_handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// set file
string ImageToDraw = context.Request.QueryString["FilePath"];
ImageToDraw = context.Server.MapPath(ImageToDraw);
// Grab images to work on's true width and height
Image ImageFromFile = Image.FromFile(ImageToDraw);
double ImageFromFileWidth = ImageFromFile.Width;
double ImageFromFileHeight = ImageFromFile.Height;
ImageFromFile.Dispose();
// Get required width and work out new dimensions
double NewHeightRequired = 230;
if (context.Request.QueryString["imageHeight"] != null)
NewHeightRequired = Convert.ToDouble(context.Request.QueryString["imageHeight"]);
double DivTotal = (ImageFromFileHeight / NewHeightRequired);
double NewWidthValue = (ImageFromFileWidth / DivTotal);
double NewHeightVale = (ImageFromFileHeight / DivTotal);
NewWidthValue = ImageFromFileWidth / (ImageFromFileWidth / NewWidthValue);
NewHeightVale = ImageFromFileHeight / (ImageFromFileHeight / NewHeightVale);
// Set new width, height
int x = Convert.ToInt16(NewWidthValue);
int y = Convert.ToInt16(NewHeightVale);
Bitmap image = new Bitmap(x, y);
Graphics g = Graphics.FromImage(image);
Image thumbnail = Image.FromFile(ImageToDraw);
// Quality Control
g.InterpolationMode = InterpolationMode.HighQualityBicubic;
g.SmoothingMode = SmoothingMode.HighQuality;
g.PixelOffsetMode = PixelOffsetMode.HighQuality;
g.CompositingQuality = CompositingQuality.HighQuality;
g.DrawImage(thumbnail, 0, 0, x, y);
g.Dispose();
image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
image.Dispose();
}
public bool IsReusable
{
get
{
return true;
}
}
I want to change the size of my image in asp.net proportionally, the problem is that I can't get the actual size of the image which is loaded from database. here is the code:
imgAvatar.ImageUrl = "~/Modules/FileViewer.ashx?id=" + o.EventID;
double r = imgAvatar.Width.Value / 300.00;
imgAvatar.Width = new Unit(300, UnitType.Pixel);
imgAvatar.Height = new Unit(imgAvatar.Height.Value / r, UnitType.Pixel);
but the imgAvatar.Width.Value is always 0.0.
what would you suggest to me?
Do not set width and height. The rendered IMG tag will be sized to the size of downloaded image.
However, if the image is too large you might have a problem. In that case, use CSS to set max:
max-width: 300px;
max-height: 300px;
I might have misunderstand the question, considering my answer above. Anyways, the way I see that done would be similar to this:
System.Drawing.Image image = System.Drawing.Image.FromFile(this.Server.MapUrl("~/image path here"));
// sorry if the above line doesn't compile; writing from memory, use intellisense to find these classes/methods
// image.Width and image.Height will work here
Takes the size of the image with Bitmap and calls the below function to resize
Bitmap myBitmap;
string fileName = "foreverAlone.jpg";
myBitmap = new Bitmap(fileName);
Size newSize = NewImageSize(myBitmap.Height, myBitmap.Width, 100);//myBitMap.Height and myBitMap.Width is how you take the original size
Check BitMap class here Bitmap Class - MSDN Article
This code returns new size of the image, and image quality remains the same -no reduce-, FormatSize parameter decides the new size.
public Size NewImageSize(int OriginalHeight, int OriginalWidth, double FormatSize)
{
Size NewSize;
double tempval;
if (OriginalHeight > FormatSize && OriginalWidth > FormatSize)
{
if (OriginalHeight > OriginalWidth)
tempval = FormatSize / Convert.ToDouble(OriginalHeight);
else
tempval = FormatSize / Convert.ToDouble(OriginalWidth);
NewSize = new Size(Convert.ToInt32(tempval * OriginalWidth), Convert.ToInt32(tempval * OriginalHeight));
}
else
NewSize = new Size(OriginalWidth, OriginalHeight);
return NewSize;
}
I have created a Sprite in Actionscript and rendered it to a Flex Canvas. Suppose:
var fooShape:Sprite = new FooSpriteSubclass();
fooCanvas.rawChildren.addChild(myshape);
//Sprite shape renders on screen
fooShape.rotation = fooNumber;
This will rotate my shape, but seems to rotate it around the upper-left
point of its parent container(the canvas).
How can I force the Sprite to rotate about is own center point? I could obviously
write code to calculate the rotation, and then have it re-render, but I think there
must be a built-in way to do this, and certainly do not want to 'reinvent the wheel'
if possible.
I am using FlexBuilder, and therefore do not have access to the full Flash API.
Thank you much!
The following steps are required to rotate objects based on a reference point (using Matrix object and getBounds):
Matrix translation (moving to the reference point)
Matrix rotation
Matrix translation (back to original position)
For example to rotate an object 90 degrees around its center:
// Get the matrix of the object
var matrix:Matrix = myObject.transform.matrix;
// Get the rect of the object (to know the dimension)
var rect:Rectangle = myObject.getBounds(parentOfMyObject);
// Translating the desired reference point (in this case, center)
matrix.translate(- (rect.left + (rect.width/2)), - (rect.top + (rect.height/2)));
// Rotation (note: the parameter is in radian)
matrix.rotate((90/180)*Math.PI);
// Translating the object back to the original position.
matrix.translate(rect.left + (rect.width/2), rect.top + (rect.height/2));
Key methods used:
Matrix.rotate
Matrix.translate
DisplayObject.getBounds
Didn't have much luck with the other examples. This one worked for me. I used it on a UIComponent.
http://www.selikoff.net/2010/03/17/solution-to-flex-image-rotation-and-flipping-around-center/
private static function rotateImage(image:Image, degrees:Number):void {
// Calculate rotation and offsets
var radians:Number = degrees * (Math.PI / 180.0);
var offsetWidth:Number = image.contentWidth/2.0;
var offsetHeight:Number = image.contentHeight/2.0;
// Perform rotation
var matrix:Matrix = new Matrix();
matrix.translate(-offsetWidth, -offsetHeight);
matrix.rotate(radians);
matrix.translate(+offsetWidth, +offsetHeight);
matrix.concat(image.transform.matrix);
image.transform.matrix = matrix;
}
Actually I had to add this code to make above solutions work for me.
private var _rotateCount = 0;
var _origginalMatrix:Matrix=new Matrix();
.........
if (_rotateCount++ >= 360 / angleDegrees)
{
myObject.transform.matrix = _origginalMatrix;
_rotateCount = 0;
return;
}
var matrix:Matrix = myObject.transform.matrix;
....
Without that after some long time rotated object slowly moves somewhere right top.
An alternative solution is to put your object inside another View, move it so that your image's center is at the container's top-left corner, and then rotate the container.
import spark.components.*;
var myContainer:View = new View();
var myImage:Image = new Image();
myContainer.addElement(myImage);
myImage.x = myImage.width / -2;
myImage.y = myImage.height / -2;
addElement(myContainer);
myContainer.rotation = whateverAngle;
One issue might be that the width of the image isn't know at the moment it is created, so you might want to find a way around that. (Hardcode it, or see if myImage.preliminaryWidth works)
/**
* Rotates the object based on its center
* Parameters: #obj => the object to rotate
* # rotation => angle to rotate
* */
public function RotateAroundCenter(obj:Object, rotation:Number):void
{
var bound:Rectangle = new Rectangle();
// get the bounded rectangle of objects
bound = obj.getRect(this);
// calculate mid poits
var midx1:Number = bound.x + bound.width/2;
var midy1:Number = bound.y + bound.height/2;
// assign the rotation
obj.rotation = rotation;
// assign the previous mid point as (x,y)
obj.x = midx1;
obj.y = midy1;
// get the new bounded rectangle of objects
bound = obj.getRect(this);
// calculate new mid points
var midx2:Number = bound.x + bound.width/2;
var midy2:Number = bound.y + bound.height/2;
// calculate differnece between the current mid and (x,y) and subtract
//it to position the object in the previous bound.
var diff:Number = midx2 - obj.x;
obj.x -= diff;
diff = midy2 - obj.y;
obj.y -= diff;
}
//////////////////
Usage:
you can use the above function as described below,
var img:Canvas = new Canvas()
RotateAroundCenter(img, rotation);
This will help you
REf: http://subashflash.blogspot.in/2010/08/rotation-of-object-based-on-center.html
If you want to rotate around the center, merely center the asset inside your sprite by setting the internal assets x and y to half of the width and height of the asset. This swill center your content and allow it to rotate around a center point.
An example of runtime loaded assets is as follows:
var loader:Loader = new Loader():
var request:URLRequest = new URLRequest(path/to/asset.ext);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, _onLoaderComplete);
loader.load(request);
private function _onLoaderComplete(e:Event):void
{
var mc:MovieClip = e.target.content as MovieClip;
mc.x = -mc.width * 0.5;
mc.y = -mc.height * 0.5;
mc.rotation = 90;
addChild(mc);
}