ajax头像上传

html代码：

    <input id="fileinput" type="file" /><br />
    <br />
    <div id="canvasContainer">
        <canvas id="container"></canvas>
        <div id="picker">
            <div id="resize"></div>
        </div>
    </div>
    <br />
    <button id="bigger">原图放大</button>
    <button id="smaller">原图缩小</button>
    <p>结果：</p>
    <div>
        <canvas id="res1"></canvas>
        <canvas id="res2"></canvas>
        <canvas id="res3"></canvas>
        <button id="download">下载 </button>
        <button id="upload">上传 </button>
        (demo只上传/下载第一张图片)
        <div id="uploadres"></div>
    </div>
    <p>滤镜：</p>
    <div id="filters"></div>

jQuery操作代码：

        $(function () {
            var canvas = document.getElementById("container"),
                context = canvas.getContext("2d"),
                //文件服务器地址
                fileServer = "Handler.ashx",
                //适配环境，随时修改事件名称
                eventName = { down: "mousedown", move: "mousemove", up: "mouseup", click: "click" };
            //////////canvas尺寸配置
            var canvasConfig = {
                //容器canvas尺寸
                width: 500,
                height: 300,
                //原图放大/缩小
                zoom: 1,
                //图片对象
                img: null,
                //图片完整显示在canvas容器内的尺寸
                size: null,
                //图片绘制偏移，为了原图不移出框外，这个只能是负值or 0
                offset: { x: 0, y: 0 },
                //当前应用的滤镜
                filter: null
            }
            canvas.width = canvasConfig.width;
            canvas.height = canvasConfig.height;
            ///////////设置选择工具配置
            var config = {
                //图片选择框当前大小、最大大小、最小大小
                pickerSize: 100,
                minSize: 50,
                maxSize: 200,
                x: canvas.width / 2 - 100 / 2,
                y: canvas.height / 2 - 100 / 2
            }
            /////////////结果canvas配置
            var resCanvas = [$("#res1")[0].getContext("2d"), $("#res2")[0].getContext("2d"), $("#res3")[0].getContext("2d")];
            //结果canvas尺寸配置
            var resSize = [100, 50, 32]
            resSize.forEach(function (size, i) {
                $("#res" + (i + 1))[0].width = size;
                $("#res" + (i + 1))[0].height = size;
            });
            //////// 滤镜配置
            var filters = [];
            filters.push({
                name: "灰度", func: function (pixelData) {
                    //r、g、b、a
                    //灰度滤镜公式： gray=r*0.3+g*0.59+b*0.11
                    var gray;
                    for (var i = 0; i < canvasConfig.width * canvasConfig.height; i++) {
                        gray = pixelData[4 * i + 0] * 0.3 + pixelData[4 * i + 1] * 0.59 + pixelData[4 * i + 2] * 0.11;
                        pixelData[4 * i + 0] = gray;
                        pixelData[4 * i + 1] = gray;
                        pixelData[4 * i + 2] = gray;
                    }
                }
            });
            filters.push({
                name: "黑白", func: function (pixelData) {
                    //r、g、b、a
                    //黑白滤镜公式： 0 or 255
                    var gray;
                    for (var i = 0; i < canvasConfig.width * canvasConfig.height; i++) {
                        gray = pixelData[4 * i + 0] * 0.3 + pixelData[4 * i + 1] * 0.59 + pixelData[4 * i + 2] * 0.11;
                        if (gray > 255 / 2) {
                            gray = 255;
                        }
                        else {
                            gray = 0;
                        }
                        pixelData[4 * i + 0] = gray;
                        pixelData[4 * i + 1] = gray;
                        pixelData[4 * i + 2] = gray;
                    }
                }
            });
            filters.push({
                name: "反色", func: function (pixelData) {
                    for (var i = 0; i < canvasConfig.width * canvasConfig.height; i++) {
                        pixelData[i * 4 + 0] = 255 - pixelData[i * 4 + 0];
                        pixelData[i * 4 + 1] = 255 - pixelData[i * 4 + 1];
                        pixelData[i * 4 + 2] = 255 - pixelData[i * 4 + 2];
                    }
                }
            });
            filters.push({ name: "无", func: null });
            // 添加滤镜按钮
            filters.forEach(function (filter) {
                var button = $("<button>" + filter.name + "</button>");
                button.on(eventName.click, function () {
                    canvasConfig.filter = filter.func;
                    //重绘
                    draw(context, canvasConfig.img, canvasConfig.size);
                })
                $("#filters").append(button);
            });
            //下载生成的图片(只下载第一张)
            $("#download").on(eventName.click, function () {

                //将mime-type改为image/octet-stream，强制让浏览器直接download
                var _fixType = function (type) {
                    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                    var r = type.match(/png|jpeg|bmp|gif/)[0];
                    return 'image/' + r;
                };
                var saveFile = function (data, filename) {
                    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                    save_link.href = data;
                    save_link.download = filename;
                    var event = document.createEvent('MouseEvents');
                    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    save_link.dispatchEvent(event);
                };
                var imgData = $("#res1")[0].toDataURL("png");
                imgData = imgData.replace(_fixType("png"), 'image/octet-stream');//base64
                saveFile(imgData, "头像created on" + new Date().getTime() + "." + "png");
            });
            //上传图片
            $("#upload").on(eventName.click, function () {
                var imgData = $("#res1")[0].toDataURL("png");
                imgData = imgData.replace(/^data:image\/(png|jpg);base64,/, "");
                alert(fileServer);
                if (!fileServer) {
                    alert("请配置文件服务器地址");
                    return;
                }

                var blobBin = atob(imgData);
                var array = [];
                for (var i = 0; i < blobBin.length; i++) {
                    array.push(blobBin.charCodeAt(i));
                }
                var blob = new Blob([new Uint8Array(array)], { type: 'image/png' });
                var file = new File([blob], "userlogo.png", { type: 'image/png' });
                var formdata = new FormData();
                formdata.append("userlogo", file);
                $.ajax({
                    type: 'POST',
                    url: fileServer,
                    data: formdata,
                    processData: false,
                    contentType: false,
                    success: function (msg) {
                        $("#uploadres").text(JSON.stringify(msg));
                    }
                });
            });
            //绑定选择图片事件
            $("#fileinput").change(function () {
                var file = this.files[0],
                    URL = (window.webkitURL || window.URL),
                    url = URL.createObjectURL(file),
                    img = new Image();
                img.src = url;
                img.onload = function () {
                    canvasConfig.img = img;
                    canvasConfig.size = getFixedSize(img, canvas);
                    draw(context, img, canvasConfig.size);
                    setPicker();
                }

            });
            //移动选择框
            //绑定鼠标在选择工具上按下的事件
            $("#picker").on(eventName.down, function (e) {
                e.stopPropagation();
                var start = { x: e.clientX, y: e.clientY, initX: config.x, initY: config.y };
                $("#canvasContainer").on(eventName.move, function (e) {
                    // 将x、y限制在框内
                    config.x = Math.min(Math.max(start.initX + e.clientX - start.x, 0), canvasConfig.width - config.pickerSize);
                    config.y = Math.min(Math.max(start.initY + e.clientY - start.y, 0), canvasConfig.height - config.pickerSize);
                    setPicker();
                })
            });
            //原图移动事件
            $("#container").on(eventName.down, function (e) {
                e.stopPropagation();
                var start = { x: e.clientX, y: e.clientY, initX: canvasConfig.offset.x, initY: canvasConfig.offset.y };
                var size = canvasConfig.size;
                $("#canvasContainer").on(eventName.move, function (e) {
                    // 将x、y限制在框内
                    // 坐标<0  当图片大于容器  坐标>容器-图片   否则不能移动
                    canvasConfig.offset.x = Math.max(Math.min(start.initX + e.clientX - start.x, 0), Math.min(canvasConfig.width - size.width * canvasConfig.zoom, 0));
                    canvasConfig.offset.y = Math.max(Math.min(start.initY + e.clientY - start.y, 0), Math.min(canvasConfig.height - size.height * canvasConfig.zoom, 0));
                    //重绘蒙版
                    draw(context, canvasConfig.img, canvasConfig.size);
                })
            });
            //改变选择框大小事件
            $("#resize").on(eventName.down, function (e) {
                e.stopPropagation();
                var start = { x: e.clientX, init: config.pickerSize };
                $("#canvasContainer").on(eventName.move, function (e) {
                    config.pickerSize = Math.min(Math.max(start.init + e.clientX - start.x, config.minSize), config.maxSize);
                    $("#picker").css({ width: config.pickerSize, height: config.pickerSize });
                    draw(context, canvasConfig.img, canvasConfig.size);
                })
            });
            $(document).on(eventName.up, function (e) {
                $("#canvasContainer").unbind(eventName.move);
            })
            //原图放大、缩小
            $("#bigger").on(eventName.click, function () {
                canvasConfig.zoom = Math.min(3, canvasConfig.zoom + 0.1);
                //重绘蒙版
                draw(context, canvasConfig.img, canvasConfig.size);
            })
            $("#smaller").on(eventName.click, function () {
                canvasConfig.zoom = Math.max(0.4, canvasConfig.zoom - 0.1);
                //重绘蒙版
                draw(context, canvasConfig.img, canvasConfig.size);
            })

            // 定位选择工具
            function setPicker() {
                $("#picker").css({
                    width: config.pickerSize + "px", height: config.pickerSize + "px",
                    top: config.y, left: config.x
                });
                //重绘蒙版
                draw(context, canvasConfig.img, canvasConfig.size);
            }
            //绘制canvas中的图片和蒙版
            function draw(context, img, size) {
                var pickerSize = config.pickerSize,
                    zoom = canvasConfig.zoom,
                    offset = canvasConfig.offset;
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(img, 0, 0, img.width, img.height, offset.x, offset.y, size.width * zoom, size.height * zoom);
                //绘制挖洞后的蒙版
                context.save();
                context.beginPath();
                pathRect(context, config.x, config.y, pickerSize, pickerSize);
                context.rect(0, 0, canvas.width, canvas.height);
                context.closePath();
                context.fillStyle = "rgba(255,255,255,0.9)";
                context.fill();
                context.restore();
                //绘制结果
                var imageData = context.getImageData(config.x, config.y, pickerSize, pickerSize)
                resCanvas.forEach(function (resContext, i) {
                    resContext.clearRect(0, 0, resSize[i], resSize[i]);
                    resContext.drawImage(canvas, config.x, config.y, pickerSize, pickerSize, 0, 0, resSize[i], resSize[i]);
                    //添加滤镜效果
                    if (canvasConfig.filter) {
                        var imageData = resContext.getImageData(0, 0, resSize[i], resSize[i]);
                        var temp = resContext.getImageData(0, 0, resSize[i], resSize[i]);// 有的滤镜实现需要temp数据
                        canvasConfig.filter(imageData.data, temp);
                        resContext.putImageData(imageData, 0, 0, 0, 0, resSize[i], resSize[i]);
                    }
                });
            }
            //逆时针用路径自己来绘制矩形，这样可以控制方向，以便挖洞
            // 起点x，起点y，宽度，高度
            function pathRect(context, x, y, width, height) {
                context.moveTo(x, y);
                context.lineTo(x, y + height);
                context.lineTo(x + width, y + height);
                context.lineTo(x + width, y);
                context.lineTo(x, y);
            }
            // 根据图片和canvas的尺寸，确定图片显示在canvas中的尺寸
            function getFixedSize(img, canvas) {
                var cancasRate = canvas.width / canvas.height,
                    imgRate = img.width / img.height, width = img.width, height = img.height;
                if (cancasRate >= imgRate && img.height > canvas.height) {
                    height = canvas.height;
                    width = imgRate * height;
                }
                else if (cancasRate < imgRate && img.width > canvas.width) {
                    width = canvas.width;
                    height = width / imgRate;
                }
                return { width: width, height: height };
            }
        });

一般处理程序代码：

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.IO;

public class Handler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        //接收图片文件
        HttpPostedFile file = context.Request.Files["userlogo"];
        //设置图片保存路径
        string savePath = context.Server.MapPath("~/image/");
        //拼写图片名字
        string _imageName = DateTime.Now.ToString("yyyyMMddhhmmss") + Path.GetFileName(file.FileName);
        //保存
        string imageUrl = savePath +_imageName;
        string _imageExt = Path.GetExtension(file.FileName).ToLower();
        file.SaveAs(imageUrl);
        string result = "success";
        context.Response.Write(result);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}