Html Jcrop缩放功能_Html_Jcrop_Zooming

Html Jcrop缩放功能

html

Html Jcrop缩放功能,html,jcrop,zooming,Html,Jcrop,Zooming,我试图用jcrop实现这个缩放插件，但得到的错误如下 “IndexSizeError:索引或大小为负数或大于允许的数量” 这是我正在使用的zoom插件的链接请有人帮帮我下面是javascript代码 // For image zooming i am destroying the jcrop after zoom opertaion i am appending it. var jcrop_api; function imageZoom(operation) { // Destro

我试图用jcrop实现这个缩放插件，但得到的错误如下 “IndexSizeError:索引或大小为负数或大于允许的数量”

这是我正在使用的zoom插件的链接

请有人帮帮我

下面是javascript代码

// For image zooming i am destroying the jcrop after zoom opertaion i am appending it.
var jcrop_api;
function imageZoom(operation)
{
    // Destroy Jcrop widget, restore original state
    jcrop_api.destroy();

    // Making zoom operations
    $('#imageCrop').zoomable(operation);

    // intialzing jcrop
    initJcrop();
}


function initJcrop() {
    $('#imageCrop').Jcrop({
         setSelect: [ 0, 768, 1024, 0 ],
            onChange : updatePreview,
            onSelect : updatePreview
      }, function(){
        jcrop_api = this;
    });

}

// Updating the image preview at the time of image selection
function updatePreview(c) {
    // Updating co-ordinates
    $('#x').val(Math.round(c.x));
    $('#y').val(Math.round(c.y));
    $('#w').val(Math.round(c.w));
    $('#h').val(Math.round(c.h));
    if(parseInt(Math.round(c.w)) > 0) {
        // Show image preview
        var imageObj = document.getElementById("imageCrop");
        var canvas = $("#preview")[0];
        var context = canvas.getContext("2d");
        $("#preview").attr("height", Math.round(c.h));
        $("#preview").attr("width", Math.round(c.w));

        // Drawing the image to canvas
        context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, c.w, c.h);
    }
}
$(function(){
    // intialzing jcrop
    initJcrop();
});

HTML代码

<!DOCTYPE html>
<html lang="en-US" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Crop</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.doogal.co.uk/js/jquery.zoomable-1.1.js"></script>
<script type="text/javascript" src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" type="text/css" href="http://deepliquid.com/Jcrop/css/jquery.Jcrop.min.css">
</head>
<body>
<p>
    <input type="button" title="Zoom in" id="zoomin" onclick="imageZoom('zoomIn');"
        value="+ Zoom" role="button" />
    <input type="button" title="Zoom out" id="zoomout" onclick="imageZoom('zoomOut');"
         value="- Zoom" role="button" />
    <input type="button" title="Reset Zoom" id="zoomReset" onclick="imageZoom('reset');"
        value="Reset Zoom" role="button" />
</p>

<img id="imageCrop" src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg">
<br />
<h3>Preview</h3>
<canvas id="preview" width="1024" height="768"></canvas>

</body>
</html>


图像裁剪




预览

行动中