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. 在web page中使鼠标右击失效的几种方法

    这里主要介绍两种方法,一种是使用js来处理,还有一种是在html属性中设置. 方法一:js 1: <script language="javascript"> docu ...

  2. PHP - __clone 对象克隆

    <?php /** * 此例子解释什么是深克隆. * 克隆学生类. */ class Student { public $name = '张三'; public $age = 12; //所属老 ...

  3. php上传文件,创建递归目录

    <?php $uid=$_REQUEST['uid']; $avatar = 'D:/avic/discuz/uc_server/data/avatar/'.get_avatar($uid, $ ...

  4. 使用MongoDB的开源项目(转)

    根据谷歌的搜索结果筛选出来的. 统计应用 counlty https://count.ly/ mongopress 开源CMS系统 http://www.mongopress.org/ Rubedo ...

  5. android平板Home键的监听

    关于android4.2平板Home键的监听 1.android4.0以上的平板Home键是不能屏蔽的,至少在应用层是这样.但是可以监听Home键的触发,主要是通过广播的监听来接受Hone键的触发广播 ...

  6. java--继承的一些笔记

    public class Person { public void display(){ System.out.println("Play Person..."); } stati ...

  7. WCF技术剖析之二十五: 元数据(Metadata)架构体系全景展现[元数据描述篇]

    原文:WCF技术剖析之二十五: 元数据(Metadata)架构体系全景展现[元数据描述篇] 在[WS标准篇]中我花了很大的篇幅介绍了WS-MEX以及与它相关的WS规范:WS-Policy.WS-Tra ...

  8. 基于visual Studio2013解决C语言竞赛题之0802图书信息查询

     题目 解决代码及点评 /* 功能:有一批图书,每本书有:书名(name),作者(author) , 编号(num),出版日期(date)四个数据, 希望输入后按书名的字母顺序将各书的记录排列好, ...

  9. GDSOI2015 task2 覆盖半径

    题目大意 一个\(n\times m\)的矩阵中有\(p\)个已经确定圆心的圆,并且每个格子有一定的分数,如果一个格子被任意一个或以上的圆覆盖,那么就可以得到这个格子的分数.现在求最小的半径,使得得分 ...

  10. USACO 2005 January Gold The Wedding Juicer

    题目 题目链接,我只在poj上找到了题目,usaco居然上不去. 大意就是说有一些\(1\times 1\times 1\)的小方块堆在一起,问最多能装多少水. 我们在一次测试中出了这题,由于我写水题 ...