javascript - canvas裁切图片-PHP中文网问答

我把图片保存到canvas里了，然后用jscrop插件切图，
在onSelect里获取了他的坐标和大小，现在我想把他保存到另一个canvas里
但是drawImage里的第一个参数是保存的是images对象，我写成canvas对象报错，
要怎么改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{margin: 0;padding: 0;}
            .box{width:100%;overflow:hidden;margin: 0 auto;}
            .piclistbox{width: 50%;float: left;overflow: hidden;border: 1px solid red;box-sizing: border-box;height:600px;}
            .canvasbox{width: 50%;float:right;overflow: hidden;border: 1px solid red;box-sizing: border-box;height:600px;}
        </style>
        <script type="text/javascript" src="jquery-1.11.1.js" ></script>
        <script type="text/javascript" src="jquery.Jcrop.min.js" ></script>
    </head>

    <body>
        <p class="box">
        <p class="piclistbox"></p>
        <p class="canvasbox"></p>
        </p>
        <input type="button" value="裁切" class="btnpoptailor"></input>
    </body>
    <script type="text/javascript">
        
    var ADDPOST = (function(root, window) {
        root.picture = {
            createcanvas:function(picUrl){//创建一个canvas
                var _this = this;
                var getSingle = function(fn){
                    var result;
                    return function(){
                        return result || (result=fn.apply(this,arguments));
                    }
                }
                var createcanvasLayer = function(){
                    var canvas = $("<canvas id='pic_canvas' style='display:none'></canvas>");
                    $(".piclistbox").html(canvas);
                    return canvas;
                }
                
                var canvas_pic = getSingle(createcanvasLayer);
                
                $('.btnpoptailor').on('click',function(){
                    var canvasLayer = canvas_pic();
                    $(canvasLayer).show();
                    _this.simditorimg();
                })
            },
            simditorimg:function(){//把图片放到canvas里
                var canvas = document.getElementById('pic_canvas');
                var img = new Image();
                var _this = this;
                img.src = "http://img1.3lian.com/img013/v1/83/d/1.jpg";
                
                img.onload = function(){
                    
                    var ctx = canvas.getContext("2d");
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                    alert(img.width + ":" + img.height);
                    if(img.height > 400){
                       img.width *= 400 / img.height;
                       img.height = 400;
                    }                
                    if(img.width > 400){
                       img.height *= 400 / img.width;
                       img.width = 400;
                    }
                    canvas.width = img.width;
                    canvas.height = img.height;
                    
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); 
                    _this.jscrop();
                }
            },
            jscrop:function(){//裁切
                $('.piclistbox').Jcrop({
                      aspectRatio : 1/1,
                      bgColor: 'rgba(0,0,0,0.5)',
                    onChange: updatePreview,
                    onSelect: updatePreview
                });
                function updatePreview(c){//这里把裁切的保存到另一个canvas里，大神就是这里报错，等待处理？？？
                    var canvas = document.createElement('canvas');
                    var ss = document.getElementById('pic_canvas');
                    canvas.width = 640;
                    canvas.height = 640;
                    $(".canvasbox").append(canvas);
                    var ctx = canvas.getContext('2d');
                    ctx.drawImage(ss, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
                }
            }    
        }
        return root;
    }(ADDPOST || {}, typeof window !== 'undefined' ? window : this));


    $(function() {
        ADDPOST.picture.createcanvas();
    })
    </script>
</html>