图片裁剪 PhotoCropper-阿里云开发者社区

开发者社区> 橘子红了呐> 正文

图片裁剪 PhotoCropper

简介:
+关注继续查看

曾祥展

曾祥展

曾祥展

 

<script src="js/prototype.js" type="text/javascript"></script>    
<script src="js/scriptaculous.js?load=builder,dragdrop" type="text/javascript"></script>
<script src="js/cropper.js" type="text/javascript"></script>
<script type="text/javascript">
function onEndCrop( coords, dimensions ) {
    $( '<%=x1.ClientID%>' ).value = coords.x1;
    $( '<%=y1.ClientID%>' ).value = coords.y1;
    $( '<%=x2.ClientID%>' ).value = coords.x2;
    $( '<%=y2.ClientID%>' ).value = coords.y2;
    $( '<%=width.ClientID%>' ).value = dimensions.width;
    $( '<%=height.ClientID%>' ).value = dimensions.height;
}
Event.observe( 
    window, 
    'load', 
    function() { 
        new Cropper.ImgWithPreview( 
            '<%=imgSample.ClientID%>',
            {
                minWidth: 67, 
                minHeight: 86,
                onEndCrop: onEndCrop,
                displayOnInit: true 
            }
        ) 
    }
);         
</script>

 

 

 

    <div>  
        <asp:Image id="imgSample" runat="server" />
        <div id="previewArea"></div>
        <asp:Button ID="btnCrop" runat="server" Text="Crop Image" OnClick="btnCrop_Click" />
        <asp:Button ID="btnReset" runat="server" Text="Restart Demo" Visible="false" OnClick="btnReset_Click" />
         <br />    
        <input type="text" name="x1" id="x1" runat="server" style="visibility:hidden;"/>
        <input type="text" name="y1" id="y1" runat="server" style="visibility:hidden;"/>
        <input type="text" name="x2" id="x2" runat="server" style="visibility:hidden;"/>
        <input type="text" name="y2" id="y2" runat="server" style="visibility:hidden;"/>
        <input type="text" name="width" id="width" runat="server" style="visibility:hidden;"/>
        <input type="text" name="height" id="height" runat="server" style="visibility:hidden;"/>   
    </div>

 

 

 

 

 

using System;
using System.Web;
using System.IO;
using System.Web.UI;
using System.Drawing;
using System.Drawing.Imaging;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;


public partial class PhotoCropper : System.Web.UI.Page
{
    //原图
    private const string ORIG_SAMPLE_PHOTO_URL ="photos/2.jpg";
    //裁剪图
    private const string CROPPED_SAMPLE_PHOTO_URL = "photos/2Cropped.jpg";
 
protected void Page_Load(object sender, System.EventArgs e)
{
        if (!Page.IsPostBack)
        {
            loadPhoto(ORIG_SAMPLE_PHOTO_URL);
        }
        else
        {
            loadPhoto(CROPPED_SAMPLE_PHOTO_URL);
            btnCrop.Visible = !btnCrop.Visible;
            btnReset.Visible = !btnReset.Visible;
        }
}

    protected void loadPhoto(string url) 
    {
        imgSample.ImageUrl = url;
    }

    protected void btnCrop_Click(object sender, EventArgs e)
    {
        int iWidth = Convert.ToInt16(width.Value);
        int iHeight =  Convert.ToInt16(height.Value);
        int iX =  Convert.ToInt16(x1.Value);
        int iY =  Convert.ToInt16(y1.Value);

        //用字节流读取
        byte[] rawData = File.ReadAllBytes(Context.Server.MapPath(""+ORIG_SAMPLE_PHOTO_URL+""));

        byte[] newImage = CropImageFile(rawData, iWidth, iHeight, iX, iY);
  
        writeByteArrayToFile(newImage);
    }

    //重置
    protected void btnReset_Click(object sender, EventArgs e)
    {
        Response.Redirect("PhotoCropper.aspx", true);
    }

    //字节数组换成图片文件
    protected void writeByteArrayToFile(byte[] byteImage) {
        using (BinaryWriter binWriter =
        new BinaryWriter(File.Open(Context.Server.MapPath("" + CROPPED_SAMPLE_PHOTO_URL + ""), FileMode.Create)))
        {
            binWriter.Write(byteImage);
        }
    }

    //裁剪
    protected byte[] CropImageFile(byte[] imageFile, int targetW, int targetH, int targetX, int targetY)
    {
        MemoryStream imgMemoryStream = new MemoryStream();
        System.Drawing.Image imgPhoto = System.Drawing.Image.FromStream(new MemoryStream(imageFile));

        Bitmap bmPhoto = new Bitmap(targetW, targetH, PixelFormat.Format24bppRgb);
        bmPhoto.SetResolution(72, 72);
   
        Graphics grPhoto = Graphics.FromImage(bmPhoto);
        grPhoto.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
        grPhoto.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        grPhoto.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;

        try
        {
            grPhoto.DrawImage(imgPhoto, new Rectangle(0, 0, targetW, targetH), targetX, targetY, targetW, targetH, GraphicsUnit.Pixel);
            bmPhoto.Save(imgMemoryStream, System.Drawing.Imaging.ImageFormat.Jpeg);
        }
        catch (Exception e)
        {
            throw e;
        }
        finally
        {
            imgPhoto.Dispose();
            bmPhoto.Dispose();
            grPhoto.Dispose();
        }
        return imgMemoryStream.GetBuffer();
    }

    //转换图片成子节流
    protected byte[] ConvertImageToByteArray(System.Drawing.Image imageToConvert )  
    {
        byte[] imgByteArray;
        try
        {
            using (MemoryStream imgMemoryStream = new MemoryStream())
            {               
                imageToConvert.Save(imgMemoryStream, ImageFormat.Jpeg);
                imgByteArray = imgMemoryStream.ToArray();
            }
        }
        catch (Exception e)
        {
            throw e;
        }
        return imgByteArray;
    }
}



    本文转自曾祥展博客园博客,原文链接:http://www.cnblogs.com/zengxiangzhan/archive/2010/01/04/1638780.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Croppic – 免费开源的 jQuery 图片裁剪插件
  Croppic 这款开源的 jQuery 图片裁剪插件能够满足网站开发人员各种不同的使用需要。只需要简单的上传图片,就可以实现你想要的图像缩放和裁剪功能。因为使用了 HTML5 FormData  对象,所以目前只支持 IE 10+、Chrome 和 Firefox 等现代浏览器。
940 0
Python爬虫入门教程 5-100 27270图片爬取
获取待爬取页面 今天继续爬取一个网站,http://www.27270.com/ent/meinvtupian/ 这个网站具备反爬,so我们下载的代码有些地方处理的也不是很到位,大家重点学习思路,有啥建议可以在评论的地方跟我说说。
1373 0
TF之NN:利用DNN算法(SGD+softmax+cross_entropy)对mnist手写数字图片识别训练集(TF自带函数下载)实现87.4%识别
TF之NN:利用DNN算法(SGD+softmax+cross_entropy)对mnist手写数字图片识别训练集(TF自带函数下载)实现87.4%识别
14 0
去掉CSDN使用MarkDown编辑器插入图片自动添加的水印
用了好多天的MarkDown编辑器了,蛮好用的。这个编辑器唯一的缺点就是在插入图片时会自作多情的给添加上CSDN的水印了。
1119 0
Android高仿微信图片选择功能的PhotoPicker
原文:Android高仿微信图片选择功能的PhotoPicker   类似于微信修改头像的功能基本上每个app都会有,以前公司开发的项目就有修改头像的功能,但是用的Android系统自带的图片选择器。用Android系统的图片选择器有个好处就是稳定,不会有什么问题。
863 0
Python爬虫入门教程 18-100 煎蛋网XXOO图片抓取
1.煎蛋网XXOO-写在前面 很高兴我这系列的文章写道第18篇了,今天写一个爬虫爱好者特别喜欢的网站煎蛋网http://jandan.net/ooxx,这个网站其实还是有点意思的,网站很多人写了N多的教程了,各种方式的都有,当然网站本身在爬虫爱好者的不断进攻下,也在不断的完善,反爬措施也很多,今天我用selenium在揍他一波。
2113 0
Python爬虫入门教程 6-100 蜂鸟网图片爬取之一
1. 蜂鸟网图片简介 国庆假日结束了,新的工作又开始了,今天我们继续爬取一个网站,这个网站为 http://image.fengniao.com/ ,蜂鸟一个摄影大牛聚集的地方,本教程请用来学习,不要用于商业目的,不出意外,蜂鸟是有版权保护的网站。
1388 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3227 0
2873
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载