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

canvas 多种形状绘图方法的更多相关文章

  1. html --- canvas --- javascript --- 绘图方法

    Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像. 如有疑问请访问链接:http://javascript.ruanyifeng.com/htmlapi/canvas.html < ...

  2. Canvas绘图方法和图像处理方法(转)

    转自:http://javascript.ruanyifeng.com/htmlapi/canvas.html 概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它 ...

  3. 如何使用canvas进行2d绘图

    canvas 的 2D context 可以绘制简单的 2D 图形.它的 2D context 坐标开始于 <canvas> 元素的左上角,原点坐标是(0,0).所有的坐标值都基于这个原点 ...

  4. HTML5 canvas 在线画笔绘图工具(三)

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  5. Java Graphics2D类的绘图方法

    Graphics2D继承自Graphics,它扩展了Graphics的绘图功能,拥有更强大的二维图形处理能力,提供对几何形状.坐标转换.颜色管理以及文字布局等更精确的控制. Graphics2D定义了 ...

  6. HTML5 canvas 在线画笔绘图工具(一)

    HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...

  7. Java知多少(98)Graphics类的绘图方法

    Graphics类提供基本绘图方法,Graphics2D类提供更强大的绘图能力.本节讲解Graphics类,下节讲解Graphics2D. Graphics类提供基本的几何图形绘制方法,主要有:画线段 ...

  8. Java知多少(99)Graphics2D类的绘图方法

    Java语言在Graphics类提供绘制各种基本的几何图形的基础上,扩展Graphics类提供一个Graphics2D类,它拥用更强大的二维图形处理能力,提供.坐标转换.颜色管理以及文字布局等更精确的 ...

  9. 十一. 图形、图像与多媒体5.Graphics2D类的绘图方法

    Java语言在Graphics类提供绘制各种基本的几何图形的基础上,扩展Graphics类提供一个Graphics2D类,它拥用更强大的二维图形处理能力,提供.坐标转换.颜色管理以及文字布局等更精确的 ...

随机推荐

  1. 卸载了PL/SQL Developer,说一下与Toad for Oracle的对照

    曾经一直用PL/SQL Developer来管理Oracle.发现真的使用起来非常不方便.打开非常卡,并且界面左上角总是多出那个框,怎么都无法设置默认隐藏掉. 唯一让人认为非常值得的就是有一个美化工具 ...

  2. 工作需要稍微研究了一下Hyper-V

    Hyper-V是指微软的虚拟化技术,底层用得Hypervisior好像没有特殊的名字 虚拟化市场占有率前三:VMWare,Hyper-V,Citrix Citrix的XenServer今年彻底开源,原 ...

  3. TCP/IP之TCP连接的建立与中止状态分析

    TCP连接的建立可以简单的称为三次握手,而连接的中止则可以叫做四次握手. 1.连接的建立: c端发起请求同步(用SYN段等于1的TCP报文),确认某个端口是否监听: s端应答(用ACK段等于1的TCP ...

  4. git 使用过程(二、创建版本库)

    1.显示当前git所在操作文件路径 命令:pwd  2.改变当前操作路径 命令:cd /e/神马神马的,如果想到当前文件夹的某个子目录下,可以直接输入命令:cd 子目录名称,这样就可以了. 3.创建一 ...

  5. php - 微信 - 缓存access_token类。

    可扩展性很强. <?php namespace LaneWeChat\Core; /** * 微信Access_Token的获取与过期检查 * Created by Lane. * User: ...

  6. 写一个方法完成如下功能,判断从文本框textbox1输入的一个字符,如果是数字则求该数字的阶乘,如果是小写字条,则转换为大写,大写字符不变,结果在文本框textbox2中显示

    窗体设计: 代码: using System; using System.Collections.Generic; using System.ComponentModel; using System. ...

  7. BZOJ 1597: [Usaco2008 Mar]土地购买( dp + 斜率优化 )

    既然每块都要买, 那么一块土地被另一块包含就可以不考虑. 先按长排序, 去掉不考虑的土地, 剩下的土地长x递增, 宽y递减 dp(v) = min{ dp(p)+xv*yp+1 } 假设dp(v)由i ...

  8. [转]Mysql自动备份并保存近15天记录脚本

    本脚本主要现实在CentOS中实现对MySQL数据库的备份和保留最近十五天的备份文件.避免太多无用陈旧的备份占用空间. #!/bin/bash id='root' #用户名 pwd='123123' ...

  9. python _thread模块使用

    python关于线程管理的有2个类,_thread(在2.x的版本中叫thread)和threading. # encoding: UTF-8 import thread import time   ...

  10. wget -r -nc -np "http://www.zhihu.com/"

    下载网站所有 -r,  --recursive          specify recursive download. -nc, --no-clobber              skip dow ...