jquery实现截取pc图片_jquery截图插件，js截图裁剪图片Canvas截图

这不是用js定位坐标然后上传截图的方法，而是用canvas截图转换成base64编码上传的方法。

这个方法的截图是直接在前端将图片裁剪好生成图片的数据，在后端将数据转码后直接保存为图片格式的文件就可以了。用base64_encode(上传的图片数据)转码之后保存为图片文件就可以了。

下面是一个用 Canvas+JavascriptFileAPI实现一个图片剪切、滤镜处理、上传下载工具。注释都有，可改性非常强。用在实际项目里面没问题。

html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

get image

canvas{

border:solid thin #ccc;

cursor:pointer;

}

#canvasContainer{

position:relative;

}

#picker{

position:absolute;

border:solid thin #ccc;

cursor: move;

overflow:hidden;

z-index:2;

}

#resize{

width: 0;

height: 0;

border-bottom: 15px solid rgba(200,200,200,0.8);

border-left: 15px solid transparent;

right: 0;

bottom: 0;

position: absolute;

cursor: se-resize;

z-index:3;

}

$(function(){

var canvas=document.getElementById("container"),

context=canvas.getContext("2d"),

//文件服务器地址

fileServer=null,

//适配环境，随时修改事件名称

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