$(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
vargray;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
vargray;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 = $("" + filter.name + "");
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 = newFormData();
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= newImage();
img.src=url;
img.οnlοad= 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);
})//定位选择工具
functionsetPicker() {
$("#picker").css({
width: config.pickerSize+ "px", height: config.pickerSize + "px",
top: config.y, left: config.x
});//重绘蒙版
draw(context, canvasConfig.img, canvasConfig.size);
}//绘制canvas中的图片和蒙版
functiondraw(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,宽度,高度
functionpathRect(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中的尺寸
functiongetFixedSize(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 };
}
});