纯js 编canvas处理图片， 涂鸦笔、画布图片内容旋转 放大缩小 裁剪框 。兼容ie9及以上 谷歌、360、火狐浏览器

新手发帖多多关照，主要是最近做的一个系统，网上资源多是多但是烦而杂，能利用上的实在是没有，该dome非常简单，主要功能为 涂鸦笔、画布图片内容旋转 放大缩小  裁剪框 外加一个打印功能。关键代码均用红字标出。

首先是涂鸦笔，像马赛克，主要利用canvas，主要是通过监听鼠标的坐标来控制涂鸦笔，

canvas.addEventListener('mousemove', function(evt) {
if(operation_type=="")return;
if(operation_type=="pencil"){
if(locked!=1)return ;
    var mousePos = getMousePos(canvas, evt);

cans.moveTo(last_x,last_y);
cans.lineTo(mousePos.x,mousePos.y);
    cans.strokeStyle = '#ccc';
cans.stroke();

last_x = mousePos.x;
last_y = mousePos.y;
}else{
if(locked!=1)return ;
    var mousePos = getMousePos(canvas, evt);
    canvas_div.style.width =  (mousePos.x - start_x) +"px";
    canvas_div.style.height =  (mousePos.y - start_y) +"px";

    //canvas_div.innerHTML ="x:"+mousePos.x+" y:"+mousePos.y;
}
    });

下面是鼠标松开的时候保存该涂鸦结果

canvas_div.addEventListener('mouseup', function(evt) {
    locked = 0;
    is_down = true;
    var mousePos = getMousePos(canvas, evt);
    var canvas_div_width = (mousePos.x - start_x );
    var canvas_div_height = (mousePos.y - start_y );
   
    var imageObj = new Image();
    imageObj.src = canvas.toDataURL("image/png");
   
document.getElementById("myCanvas2_div").innerHTML = "";
canvas2 = document.createElement("canvas");
canvas2.setAttribute("id","myCanvas2")
document.getElementById("myCanvas2_div").appendChild(canvas2);

var context = canvas2.getContext('2d');
canvas2.width = canvas_div_width;
canvas2.height = canvas_div_height;
context.drawImage(imageObj, start_x, start_y, canvas_div_width,canvas_div_height, 0, 0, canvas_div_width,canvas_div_height);
   
   
document.getElementById("img").src=canvas.toDataURL("image/png");

    canvas_div.style.width =  (mousePos.x - start_x) +"px";
    canvas_div.style.height =  (mousePos.y - start_y) +"px";
    });

下面是画布旋转的主要代码

function rotateImg(direction) {  
   
        var degree = 0;  
        var canvas = document.getElementById('myCanvas');  
        if (canvas == null)return;  
        //img的高度和宽度不能在img元素隐藏后获取，否则会出错  
        var height = canvas.height;  
        var width = canvas.width;  
          
        var imageObj = document.getElementById("img");
        
        var ctx = canvas.getContext('2d');  
        
        if (direction == 'left') {  
        degree = 270 * Math.PI / 180;
        canvas.width = height;  
            canvas.height = width;  
            ctx.rotate(degree);  
            ctx.drawImage(imageObj, -width, 0);  
        } else {  
        degree = 90 * Math.PI / 180;
            canvas.width = height;  
            canvas.height = width;  
            ctx.rotate(degree);  
            ctx.drawImage(imageObj, 0, -height);  
        }
        
document.getElementById("img").src=canvas.toDataURL("image/png");
    //这里有点小问题，不要紧，如果不加下面这段代码，旋转过后就不能涂鸦 ，笔者试了很多次都不知道为什么，若有大神知道，请留言~~~~
turnChange();

    } 

function turnChange(){
    canvas_div.style.display = "none";
    operation_type = "";
   
    var canvas = document.getElementById("myCanvas");
canvas.width = canvas.width*1;
canvas.height = canvas.height*1;

var imageObj = document.getElementById("img");
var context = canvas.getContext('2d');
   context.drawImage(imageObj,0,0,canvas.width,canvas.height);
document.getElementById("img").src=canvas.toDataURL("image/png");
    }

接下来是画布内容的放大缩小，比较简单

function getBigger(){
    canvas_div.style.display = "none";
    operation_type = "";
   
    var canvas = document.getElementById("myCanvas");
canvas.width = canvas.width*1.1;
canvas.height = canvas.height*1.1;

var imageObj = document.getElementById("img");
var context = canvas.getContext('2d');
context.drawImage(imageObj,0,0,canvas.width,canvas.height);
document.getElementById("img").src=canvas.toDataURL("image/png");
    }
    function getSmaller(){
    canvas_div.style.display = "none";
    operation_type = "";
   
    var canvas = document.getElementById("myCanvas");
canvas.width = canvas.width*0.9;
canvas.height = canvas.height*0.9;

var imageObj = document.getElementById("img");
var context = canvas.getContext('2d');
        context.drawImage(imageObj,0,0,canvas.width,canvas.height);
document.getElementById("img").src=canvas.toDataURL("image/png");
   }

源代码百度云网盘：http://yun.baidu.com/share/link?shareid=2676476037&uk=3578711918