<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<style type="text/css">
    html, body {
        margin: 0;
        padding: 0;
        background: #f9f9f9;
        font-size: 13px;
    }

    .clear {
        *zoom: 1;
    }

        .clear:after {
            content: '';
            display: table;
            clear: both;
        }
</style>

<div>
    <form id="imageForm" style="display:block;">
        <div class="clear" style="margin:10px 0px;width:auto;height:35px;line-height:35px;">
            <div class="btnGet" style="float:left;width:100%;height:100%;background:#0aadff;color:#fff;text-align:center;cursor:pointer;">
                <span style="font-size:1.3rem;">一键生成心形相册</span>
            </div>
        </div>

        <div class="fileList" style="margin-top:10px;">

        </div>

        <div class="" style="margin-top:10px;width:100%;text-align:center;color:#555;">
            <div class="preImage clear"></div>
            <div id="btn" style="margin:0 auto;margin-top:10px;width:80%;height:50px;line-height:50px;color:#888;text-align:center;position:relative;">
                <div style="border:1px dashed #ccc;">
                    <span style="font-size:30px;">+</span>
                    <input class="image-file" name="file" type="file" multiple="multiple" style="opacity:0;width:100%;height:100%;position:absolute;top:0px;left:0px;" />
                </div>
            </div>
        </div>
        <div class="gifImage" style="display:none;width:100%;text-align:center;color:#555;position: fixed;background: rgba(0,0,0,0.6);top: 0;height: 100%;"></div>
    </form>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="文章有提供下载/jQuery/jquery.form.js"></script>
<script type="text/javascript">

    (function () {

        var param = {
            getImageColorUrl: 'http://localhost:5852/Image/LoveImage',
            x: 0,
            y: 0,
            width: 0,
            height: 0,
            imgLength: 0,
            flag:0,
            getImageColor: function () {

                if (param.flag) return;
                param.flag = 1;

                if ($(".image-file").val() == '') {

                    alert('请上传图片！');
                    return;
                }

                var data = { x: param.x, y: param.y, width: param.width, height: param.height };

                $(".btnGet span").html("图片图生成中...");

                $("#imageForm").ajaxSubmit({
                    url: param.getImageColorUrl,
                    data: data,
                    dataType: "json",
                    type: 'post',
                    success: function (d) {

                        param.flag = 0;

                        $(".btnGet span").html("一键生成心形图册");

                        if (d.c == 200) {

                            $(".gifImage").show().html('<img src="http://localhost:5852' + d.d.replace('//','/') + '" style="width:80%;margin:0 auto;margin: 50px;" /><div id="closeDiv" style="margin:0 auto;margin-top:10px;width:30%;padding:5 15px;background:#fff;border-radius:5px;">关闭</div>');

                            $("#closeDiv").click(function () {
                                $(".gifImage").hide();
                                $(".gifImage").html("");
                            });
                        }
                        else {

                            alert(d.m);
                        }
                    },
                    error: function () {

                        $(".btnGet span").html("一键生成心形图册");

                        param.flag = 0;
                    }
                });
            },
            imageColor: function () {

                $(".btnGet").click(function () {

                    if (param.imgLength < 2) {

                        alert('请上传两张以及以上的图片！');
                        return;
                    }

                    param.width = 0;
                    param.getImageColor();
                });
            },
            imageScan: function () { //图片预览

                param.previewImageMore({
                    idClass: ".image-file",
                    success: function (base64) {

                        param.imgLength = $(".image-file").length;

                        var html = '';

                        html += '<div style="float:left;width:25%;text-align:center;"><img class="item" src="' + base64 + '" style="width:90%;" /></div>'

                        $(".preImage").append(html);

                        $(".image-file").eq(length - 1).css("top", "-1000px");
                        $("#btn").append('<input class="image-file" name="file" type="file" multiple="multiple" style="opacity:0;width:100%;position:absolute;top:0px;left:0px;" />');
                    }
                });
            },
            previewImageMore: function (param) {

                $("body").off("change", param.idClass);
                $("body").on("change", param.idClass, function () {
                    var that = this;
                    if (typeof FileReader == 'undefined') alert("浏览器不支持FileReader接口");

                    var file = that.files; //选择图片，马上预览
                    for (var i = 0; i < file.length; i++) {
                        var _file = file[i];

                        var reader = new FileReader();
                        reader.readAsDataURL(_file);

                        reader.onload = function (e) {
                            
                            param.success(e.target.result); //base64
                        }
                    }
                });
            }
        };

        $(function () {

            param.imageColor();
            param.imageScan();
        });

    })();

</script>

【后端完整代码】

#region 心形图册
[HttpPost]
public JsonResult LoveImage(int maxSize = 520)
{
    try
    {
        maxSize = 400;

        #region 获取前端图片
        HttpRequestBase Request = new HttpRequestWrapper(System.Web.HttpContext.Current.Request);

        //获取web端form表单提交过来的图片
        HttpFileCollectionBase file = Request.Files; //Request.Files和Request.Files["file"]，加个中括号表示具体的一个了
        if (file == null)
        {
            return Json(r);
        }

        //有效图片判断
        List<Image> imageList = new List<Image>();
        int num = 0;
        foreach (string key in file.AllKeys)
        {
            HttpPostedFileBase item = file[num];
            num++;

            //保证图片最小高宽度为520px
            //取中间图片
            int newWidth = 0;
            int newHeight = 0;
            Image image = Image.FromStream(item.InputStream);
            if (image.Width > image.Height)
            {
                newHeight = maxSize;
                newWidth = (image.Width * newHeight) / image.Height;
            }
            else
            {
                newWidth = maxSize;
                newHeight = (image.Height * newWidth) / image.Width;
            }

            image = GetNewImageByWidthOrHeight(image, newWidth, newHeight);

            imageList.Add(image);
        }
        int count = imageList.Count;
        int currentIndex = 0;
        #endregion

        #region 创建底图 - 粉色背景
        int widthCount = 11;
        int heightCount = 10;
        int widthBg = widthCount * maxSize;
        int heightBg = heightCount * maxSize;
        Image backgroundImage = new Bitmap(widthBg, heightBg);

        using (Graphics graphics = Graphics.FromImage(backgroundImage)) //定义一个绘图对象
        {
            //Color color_a = ColorTranslator.FromHtml("#f7acbc");
            Color color_a = Color.FromArgb(255, ColorTranslator.FromHtml("#f7acbc")); //设置一定值的透明度，0~255，0=透明
            graphics.FillRectangle(new SolidBrush(color_a), new Rectangle(0, 0, widthBg, heightBg)); //给图片填充颜色
        }
        #endregion

        //叠加图片 - 根据坐标
        for(int y = 0; y < 10; y++)
        {
            for (int x = 0; x < 11; x++)
            {
                #region 按顺序叠加，循环叠加
                if ((y == 0 && x == 3) || (y == 0 && x == 7) ||
                    (y == 1 && (x >= 2 && x <= 4)) || (y == 1 && (x >= 6 && x <= 8)) ||
                    (y == 2 && (x >= 1 && x <= 9)) ||
                    (y == 3 && (x >= 0 && x <= 10)) ||
                    (y == 4 && (x >= 0 && x <= 10)) ||
                    (y == 5 && (x >= 1 && x <= 9)) ||
                    (y == 6 && (x >= 2 && x <= 8)) ||
                    (y == 7 && (x >= 3 && x <= 7)) ||
                    (y == 8 && (x >= 4 && x <= 6)) ||
                    (y == 9 && (x >= 5 && x <= 5))
                )
                {
                    Image image = imageList[currentIndex];
                    image = ImageHelper.CutImage(image, 0, 0, maxSize, maxSize);
                    using (Graphics graphics = Graphics.FromImage(backgroundImage))
                    {
                        int imageInBackgroundImage_x = x * maxSize;
                        int imageInBackgroundImage_y = y * maxSize;//第一行
                        Rectangle _r = new Rectangle(imageInBackgroundImage_x, imageInBackgroundImage_y, image.Width, image.Height); //叠图相对于底图的坐标

                        int imageSelf_x = 0; //相对叠图自己的坐标系x轴，假设宽度为50，那么设置x=50，那么相对于自己的体系，就超出了自己的宽度，就看不见了
                        int imageSelf_y = 0; //相对叠图自己的坐标系y轴
                        graphics.DrawImage(image, _r, imageSelf_x, imageSelf_y, image.Width, image.Height, GraphicsUnit.Pixel);
                    }

                    if (currentIndex >= (count - 1)) currentIndex = 0;
                    else currentIndex += 1;
                }
                #endregion
            }
        }

        //保存图片
        GetPathModel pathModel = CommonHelper.GetPathEx("LoveImage");
        backgroundImage.Save(pathModel.all);

        r.c = 200;
        r.d = pathModel.part;
    }
    catch (Exception ex)
    {
        LogHelper.Error(ex);
    }

    return Json(r);
}
#endregion

#region 图片的放大与缩小
public static Bitmap GetNewImageByWidthOrHeight(Image image, int width = 0, int height = 0)
{
    ImageInfoModel_Response _ImageInfoModel_Response = new ImageInfoModel_Response();
    Bitmap bitmap = null;

    try
    {
        int newHeight = 0;
        int newWidth = 0;

        if (width > 0)
        {
            newWidth = width;
            newHeight = newWidth * image.Height / image.Width;
        }
        else
        {
            newHeight = height;
            newWidth = newHeight * image.Width / image.Height;
        }

        bitmap = new Bitmap(newWidth, newHeight); //创建一定高宽度的矩形图片，默认是黑色背景

        using (Graphics graphics = Graphics.FromImage(bitmap)) //从指定的图片里进行绘制内容
        {
            //在指定位置并且按指定大小绘制指定的图片
            graphics.DrawImage(image, 0, 0, newWidth, newHeight);

            //保存当前状态
            graphics.Save();
        }
    }
    catch (Exception ex)
    {
        LogHelper.Error(ex);
    }

    return bitmap;
}
#endregion