我正在尝试使用 jcrop 实现此缩放插件,但收到类似“IndexSizeError:索引或大小为负数或大于允许量”的错误。
这是我正在使用的缩放插件的链接 http://www.doogal.co.uk/zoomable.php
请一些身体帮助我
这是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>