canvas 多种形状绘图方法

function canvasUploadImg(image,imageName,imgType,callbackfn){

var img_width = image.width;
var img_height = image.height;
var canvas = document.getElementById("crop_canvas");
if(canvas== null){
canvas = document.createElement('canvas');
canvas.setAttribute("id",'crop_canvas');
var o = document.body;
var div = document.createElement('div');
div.style.display = "none";
o.appendChild(div);
div.appendChild(canvas);
}
var context = canvas.getContext("2d");
var x = $("#x").val(),y = $("#y").val(),w = $("#w").val(),
h = $("#h").val(),width = $("#width").val(),height = $("#height").val();
var rr = resetRatio(width, height, img_width, img_height);
var targetSize = getTargetSize(w*rr, h*rr,414,672);
canvas.width = targetSize.tw;
canvas.height = targetSize.th;
var srcSize = [x*rr, y*rr, w*rr, h*rr];
if(srcSize[0]<0) srcSize[0] = 0;
if(srcSize[1]<0) srcSize[1] = 0;
if(srcSize[2]>img_width) srcSize[2] = img_width;
if(srcSize[3]>img_height) srcSize[3] = img_height;
var tarSize = [0, 0, canvas.width,canvas.height];
var url ;
console.log("canvas@ w:"+canvas.width+" h:"+canvas.height);
console.log("image.onload@ x:"+x*rr+",y:"+y*rr+",w:"+w*rr+",h:"+h*rr+",x2:"+ 0+",y2:"+ 0+",w2:"+targetSize.tw+",h2:"+targetSize.th);
context.drawImage(image, srcSize[0],srcSize[1],srcSize[2],srcSize[3], tarSize[0], tarSize[1], tarSize[2], tarSize[3]);//这里取的是实际尺寸
//在图片裁剪重绘之后，添加切刀逻辑
//判断是否有切刀，如果有，则将切刀绘制到cut_canvas,将两个canvas做像素处理
//将cut_canvas中像素值满足条件(p[3]=)的点，与canvas中的对应点的p[3]值设为0(透明)
//console.log("有切刀？"+$(".jcrop-tracker").find("img").length);
if($(".jcrop-tracker").find("img").length>0){
var cutCanvas = document.getElementById("cut_canvas");
var cutContext = cutCanvas.getContext("2d");
cutCanvas.width = canvas.width;
cutCanvas.height = canvas.height;
var cutImg = new Image();
cutImg.crossOrigin = "";//"anonymous";
var cutImgSrc = $(".jcrop-tracker").find("img").attr("src");
cutImg.src = cutImgSrc+"?"+new Date().getTime();//使每次请求图片都是来自服务器而不是缓存
cutImg.onload = function(){
cutContext.drawImage(cutImg,0,0,cutImg.width,cutImg.height,0,0,canvas.width, canvas.height);
//像素级运算开始
var imgd = context.getImageData(0, 0, canvas.width, canvas.height);
var pix = imgd.data;
var imgd2 = cutContext.getImageData(0, 0, canvas.width, canvas.height);
var pix2 = imgd2.data;

for (var i = 0, n = pix2.length; i <n; i += 4)
{
if(pix2[i+3]!= 0 && pix2[i+3]< 128 && pix[i+3]!=0){
pix[i+3]=255-pix2[i+3];
}else if(pix2[i+3]== 128){
pix[i+3]=0;
}
//console.log(pix2[i] + "," + pix2[i+1] + "," + pix2[i+2] + "," + pix2[i+3]);
}
context.putImageData(imgd, 0, 0);
imgType = ".png";
imageName = imageName.toLowerCase();
imageName = imageName.replace(".jpg",".png");
url = canvas.toDataURL();
//console.log(canvas.toDataURL());
uploadImgBase64(imageName,url,callbackfn);
};
//切刀逻辑end
}else{
if(imgType.toLowerCase()==".png"){
url = canvas.toDataURL();
console.log(canvas.toDataURL());
}else{
url = canvas.toDataURL("image/jpeg");
console.log(canvas.toDataURL("image/jpeg"));
}
uploadImgBase64(imageName,url,callbackfn);
}

//所有图片按jpg处理，临时方案
/*imageName = imageName.toLowerCase();
imageName = imageName.replace("png","jpg");
url = canvas.toDataURL("image/jpeg");*/
}

 

function getTargetSize(tw,th,maxWidth,maxHeight){
if(tw/th>maxWidth/maxHeight&&tw>maxWidth){
th = th/tw*maxWidth;
tw = maxWidth;
}else if(tw/th<maxWidth/maxHeight&&th>maxHeight){
tw = tw/th*maxHeight;
th = maxHeight;
}
return {'tw':tw,'th':th};
}

function uploadImgBase64(imageName,url,callbackfn){
var data = {
'action' : 'UPLOADCANVAS',
'IMAGENAME':imageName,
'IMAGEDATA':url
//'currentElement':currentElement
};
Loading.show();
ajax({url:"/JDQW/AjaxChannel",data:data,success:function(json){
Loading.hide();
var id = $("#currentElement").val();
var filePath = json.FILEPATH;
var msg = json.MSG;
var picId = json.PIC_ID;
var pic={'id':picId,'path':filePath};
console.log("canvasUpload-msg:"+msg);
if(callbackfn){
callbackfn(id,pic,msg);
}
},
error: function(json){
jAlert("上传失败", "提示信息", "info");
}
});
}

//将$img jquery对象，修改为js对象
function uploadPicBase64($img,callbackfn,pltId){
var url = $($img).attr("src");
var imageName = $($img).data("name");
var id = $($img).parent().attr("id");
var data = {
'action' : 'UPLOADCANVAS',
'IMAGENAME':imageName,
'IMAGEDATA':url,
'PLTID':pltId
//'currentElement':currentElement
};
Loading.show();
ajax({url:"/JDQW/AjaxChannel",data:data,success:function(json){
Loading.hide();
//var id = $("#currentElement").val();
var filePath = json.FILEPATH;
var msg = json.MSG;
var picId = json.PIC_ID;
var pic={'id':picId,'path':filePath};
console.log("canvasUpload-msg:"+msg);
if(callbackfn){
callbackfn(id,pic,msg);
}
},
error: function(json){
jAlert("上传失败", "提示信息", "info");
}
});
}

function resetRatio(width, height, imgWidth, imgHeight) {
var ratio = 1;
// 先判断图片源的宽和高，是否是 宽》=高
//if (imgWidth >= imgHeight) {
//先判断是否按宽度放缩比例
//System.out.println((double)width/height+":"+(double)imgWidth/imgHeight);
if ( width/height <= imgWidth/imgHeight) {
// 再判断源宽》=最大宽度
if (imgWidth > width) {
ratio = imgWidth / width;
} else {
ratio = 1;
}
} else {
// 再判断源高》=最大高度
if (imgHeight > height) {
ratio = imgHeight / height;
} else {
ratio = 1;
}
}
return ratio;
}