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;
}
} }