wp上直接调用CameraCaptureTask,并没有参数设置截图大小,刚好项目需求要截成正方型,于是写了个仿系统截图的demo出来。
截图如下:
需要做的逻辑运算为:
1、初始化照片时:判断照片比例,如果相对页面比例太长或者太宽 ——>改变对图片进行缩放,使照片填充满整个截取框,并把缩放比例设置为最小缩放倍数等。
void FitImage(double h,double w)
{
////判断是否存在applicationbar
if (this.ApplicationBar != null)
{
pageheight -= 72;
}
//this.pageheight = this.ActualHeight;
//this.pagewidth = this.ActualWidth;
if (h / w > pageheight / pagewidth)
{
ImageY = pageheight;
ImageX = pageheight * w / h;
}
else
{
ImageX = pagewidth;
ImageY = pagewidth * h / w;
}
if (h > w)
{
if (resize / pageheight > w / h)
{
//太长,需要修改Scale(scale=resize*pixh/(pageh*pw))
minscale = img_composite.ScaleX = img_composite.ScaleY = resize * h / (pageheight * w);
}
else
{
minscale = resize / ImageX;
}
}
else
{
if (resize / pagewidth > h / w)
{
//太宽,需要修改Scale
minscale = img_composite.ScaleX = img_composite.ScaleY = resize * w / (pagewidth * h);
}
else
{
minscale = resize / ImageY;
}
}
}
2、左右移动时:根据照片缩放倍数,判断照片边沿等。
private void GestureListener_DragDelta(object sender, DragDeltaGestureEventArgs e)
{
//垂直偏移
if (img_composite.TranslateY >= (ImageY * img_composite.ScaleX - resize) / 2-0.01)
{
img_composite.TranslateY = (ImageY * img_composite.ScaleX - resize) / 2;
if (e.VerticalChange < 0)
img_composite.TranslateY += e.VerticalChange;
}
else if (img_composite.TranslateY <= -(ImageY * img_composite.ScaleX - resize) / 2 + 0.01)
{
img_composite.TranslateY = -(ImageY * img_composite.ScaleX - resize) / 2;
if (e.VerticalChange > 0)
img_composite.TranslateY += e.VerticalChange;
}
else
{
img_composite.TranslateY += e.VerticalChange;
}
//水平偏移
if (img_composite.TranslateX >= (ImageX * img_composite.ScaleX - resize) / 2 - 0.01)
{
img_composite.TranslateX = (ImageX * img_composite.ScaleX - resize) / 2;
if (e.HorizontalChange < 0)
img_composite.TranslateX += e.HorizontalChange;
}
else if (img_composite.TranslateX <= -(ImageX * img_composite.ScaleX - resize) / 2 + 0.01)
{
img_composite.TranslateX = -(ImageX * img_composite.ScaleX - resize) / 2;
if (e.HorizontalChange > 0)
img_composite.TranslateX += e.HorizontalChange;
}
else
{
img_composite.TranslateX += e.HorizontalChange;
}
//Debug.WriteLine("TranslateY:" + img_composite.TranslateY + ",e.VerticalChange:" + e.VerticalChange);
//Debug.WriteLine((ImageY * img_composite.ScaleX - resize) / 2);
}
private void GestureListener_DragCompleted(object sender, DragCompletedGestureEventArgs e)
{
if (img_composite.TranslateY > (ImageY * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateY = (ImageY * img_composite.ScaleX - resize) / 2;
}
else if (img_composite.TranslateY < -(ImageY * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateY = -(ImageY * img_composite.ScaleX - resize) / 2;
}
if (img_composite.TranslateX > (ImageX * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateX = (ImageX * img_composite.ScaleX - resize) / 2;
}
else if (img_composite.TranslateX < -(ImageX * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateX = -(ImageX * img_composite.ScaleX - resize) / 2;
}
}
3、缩放时:使照片缓慢自动回到中间,且边沿不越过裁剪框等。
private void GestureListener_PinchDelta(object sender, PinchGestureEventArgs e)
{
if (e.DistanceRatio <= 1 && img_composite.ScaleX <= (minscale+0.000001))
{
img_composite.ScaleX=img_composite.ScaleY = minscale;
return;
}
img_composite.ScaleX = img_composite.ScaleY = initialScale * e.DistanceRatio;
//缩放的同时让图片回到正中间
if (e.DistanceRatio < 1)
{
if (btimage.PixelHeight > btimage.PixelWidth)
{
if (resize / ImageY > btimage.PixelWidth / btimage.PixelHeight)
{
//太长,改水平偏移
img_composite.TranslateX = img_composite.TranslateX * (img_composite.ScaleX / minscale - 1);
//img_composite.TranslateY = initialTranslateY * e.DistanceRatio;
//修改垂直偏移
if (img_composite.TranslateY >= (ImageY * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateY = (ImageY * img_composite.ScaleX - resize) / 2;
}
else if (img_composite.TranslateY <= -(ImageY * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateY = -(ImageY * img_composite.ScaleX - resize) / 2;
}
}
}
else
{
if (resize / ImageX > btimage.PixelHeight / btimage.PixelWidth)
{
//太宽,改垂直偏移
img_composite.TranslateY = img_composite.TranslateY * (img_composite.ScaleX / minscale - 1);
//修改水平偏移
if (img_composite.TranslateX >= (ImageX * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateX = (ImageX * img_composite.ScaleX - resize) / 2;
}
else if (img_composite.TranslateX <= -(ImageX * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateX = -(ImageX * img_composite.ScaleX - resize) / 2;
}
}
}
}
Debug.WriteLine("ScaleY:" + img_composite.ScaleY + ",ScaleX:" + img_composite.ScaleX);
}
private void GestureListener_PinchStarted(object sender, PinchStartedGestureEventArgs e)
{
initialScale = img_composite.ScaleX;
}
private void GestureListener_PinchCompleted(object sender, PinchGestureEventArgs e)
{
if (img_composite.ScaleX <= minscale)
{
img_composite.ScaleX = img_composite.ScaleY = minscale;
}
//修改垂直偏移
if (img_composite.TranslateY >= (ImageY * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateY = (ImageY * img_composite.ScaleX - resize) / 2;
}
else if (img_composite.TranslateY <= -(ImageY * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateY = -(ImageY * img_composite.ScaleX - resize) / 2;
}
//修改水平偏移
if (img_composite.TranslateX >= (ImageX * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateX = (ImageX * img_composite.ScaleX - resize) / 2;
}
else if (img_composite.TranslateX <= -(ImageX * img_composite.ScaleX - resize) / 2)
{
img_composite.TranslateX = -(ImageX * img_composite.ScaleX - resize) / 2;
}
}
注:由于放大缩小过程中计算到照片宽高值虽然是double类型,但也会丢失了一很小的一些数据。并不是做到绝对准确,为此,在左右移动,和缩放过程中分别加入了0.01和0.000001,的容错范围。(不加的话,会出现拖放到边沿,或者缩放到最小时出现跳动现象)
4、点击剪切时,计算所要剪辑位置,大小。通过对image的clip属性设置RectangleGeometry,直接在页面显示裁剪后的图片。并通过WriteableBitmap获取到裁剪后的图片,并保存到本地媒体库。
void ClipImage()
{
//利用Rectangle建立RectangleGeometry指定要用來裁剪的大小
RectangleGeometry geo = new RectangleGeometry();
double x; double y;
x = ((ImageX * img_composite.ScaleX - resize) / 2 - img_composite.TranslateX) / img_composite.ScaleX;
y = ((ImageY * img_composite.ScaleX - resize) / 2 - img_composite.TranslateY) / img_composite.ScaleX;
redussize = resize / img_composite.ScaleX;
geo.Rect = new Rect(x, y, redussize, redussize);
// 對image進行裁剪
image.Clip = geo;
}
void WriteBitmap(Image element)
{
TranslateTransform t = new TranslateTransform();
t.X = -((ImageX * img_composite.ScaleX - resize) / 2 - img_composite.TranslateX) / img_composite.ScaleX;
t.Y = -((ImageY * img_composite.ScaleX - resize) / 2 - img_composite.TranslateY) / img_composite.ScaleX;
WriteableBitmap wBitmap = new WriteableBitmap((int)redussize, (int)redussize);
wBitmap.Render(element, t);
wBitmap.Invalidate();
string tempJPEG = "TempJPEG.jpg";
using (var iso = IsolatedStorageFile.GetUserStoreForApplication())
{
using (var fileStream = iso.OpenFile(tempJPEG, FileMode.Create, FileAccess.Write))
{
wBitmap.SaveJpeg(fileStream, wBitmap.PixelWidth, wBitmap.PixelHeight, 0, 100);
}
using (var imageStream = iso.OpenFile(tempJPEG, FileMode.Open, FileAccess.Read))
{
MediaLibrary mediaLibrary = new MediaLibrary();
Picture pic = mediaLibrary.SavePicture("SavedLogo.jpg", imageStream);
}
}
MessageBox.Show("保存成功!", "提示", MessageBoxButton.OK);
}
备注:
1、裁剪时,设置图片的clip属性除了方便显示到页面上,还有,得到clip的RectangleGeometry的编译量坐标点,和长宽时,我们也就很简单的得到了WriteableBitmap所要设置的参数。
2、WriteableBitmap截图时要记得调用wBitmap.Invalidate();方法,进行绘制。否则得到的只是一张全是黑色像素的图。
源代码请戳:http://files.cnblogs.com/fatlin/ImageCrop.rar
参考链接:http://www.dotblogs.com.tw/pou/archive/2013/06/24/105923.aspx