获取保存到MySQL数据库中的图像注释
Get image annotations saved into a MySQL db
我正在开发我在网上找到的这个jQuery插件，它允许用户在图像上添加一些注释。我一直在尝试重写它的部分内容，以便将有关图像的评论保存到MySQL数据库中。我正在使用javascript和php来帮助保存这些评论，但我运气不好。有人能提供一个或多个提示来帮助我吗？
这是我的代码：html:
<html>
<head>
<title>Image Annotations</title>
<style type="text/css" media="all">@import "css/annotation.css";</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.js"></script>
<script type="text/javascript" src="js/anno.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#toAnnotate").annotateImage({
getUrl: "php/getTag.php",
saveUrl: "php/saveTag.php",
deleteUrl: "php/deleteTag.php",
editable: true
});
});
</script>
</head>
<body>
<div>
<img id="toAnnotate" src="images/lab124.jpg" width="950" height="575" />
</div>
</body>
</html>
javascript（我认为问题出在createSaveButton部分）：
/// <reference path="jquery-1.2.6-vsdoc.js" />
(function($) {
/// <summary>
/// Creates annotations on the given image.
/// Images are loaded from the "getUrl" propety passed into the options.
/// </summary>
$.fn.annotateImage = function(options) {
var opts = $.extend({}, $.fn.annotateImage.defaults, options);
var image = this;
this.image = this;
this.mode = 'view';
// Assign defaults
this.getUrl = opts.getUrl;
this.saveUrl = opts.saveUrl;
this.deleteUrl = opts.deleteUrl;
this.editable = opts.editable;
this.useAjax = opts.useAjax;
this.notes = opts.notes;
// Add the canvas
/*
<div class="image-annotate-canvas">
<div class="image-annotate-view"></div>
<div class="image-annotate-edit">
<div class="image-annotate-edit-area"></div>
</div>
</div>
*/
this.canvas = $('<div class="image-annotate-canvas"><div class="image-annotate-view"></div><div class="image-annotate-edit"><div class="image-annotate-edit-area"></div></div></div>');
this.canvas.children('.image-annotate-edit').hide();
this.canvas.children('.image-annotate-view').hide();
this.image.after(this.canvas);
// Give the canvas and the container their size and background
this.canvas.height(this.height());
this.canvas.width(this.width());
this.canvas.css('background-image', 'url("' + this.attr('src') + '")');
this.canvas.children('.image-annotate-view, .image-annotate-edit').height(this.height());
this.canvas.children('.image-annotate-view, .image-annotate-edit').width(this.width());
// Add the behavior: hide/show the notes when hovering the picture
this.canvas.hover(function() {
if ($(this).children('.image-annotate-edit').css('display') == 'none') {
$(this).children('.image-annotate-view').show();
}
}, function() {
$(this).children('.image-annotate-view').hide();
});
this.canvas.children('.image-annotate-view').hover(function() {
$(this).show();
}, function() {
$(this).hide();
});
// load the notes
if (this.useAjax) {
$.fn.annotateImage.ajaxLoad(this);
} else {
$.fn.annotateImage.load(this);
}
// Add the "Add a note" button
/*
<a class="image-annotate-add" id="image-annotate-add" href="#">Add Note</a>
*/
if (this.editable) {
this.button = $('<a class="image-annotate-add" id="image-annotate-add" href="#">Add Note</a>');
this.button.click(function() {
$.fn.annotateImage.add(image);
});
this.canvas.after(this.button);
}
// Hide the original
this.hide();
return this;
}; // end of annotateImage
/**
* Plugin Defaults
**/
$.fn.annotateImage.defaults = {
getUrl: 'your-get.rails',
saveUrl: 'your-save.rails',
deleteUrl: 'your-delete.rails',
editable: true,
useAjax: true,
notes: new Array()
};
/// <summary>
/// Clears all existing annotations from the image.
/// </summary>
$.fn.annotateImage.clear = function(image) {
for (var i = 0; i < image.notes.length; i++) {
image.notes[image.notes[i]].destroy();
}
image.notes = new Array();
};
/// <summary>
/// Loads the annotations from the "getUrl" property passed in on the
/// options object.
/// </summary>
$.fn.annotateImage.ajaxLoad = function(image) {
$.getJSON(image.getUrl + '?ticks=' + $.fn.annotateImage.getTicks(), function(data) {
image.notes = data;
$.fn.annotateImage.load(image);
});
};
/// <summary>
/// Loads the annotations from the notes property passed in on the
/// options object.
/// </summary>
$.fn.annotateImage.load = function(image) {
for (var i = 0; i < image.notes.length; i++) {
image.notes[image.notes[i]] = new $.fn.annotateView(image, image.notes[i]);
}
};
/// <summary>
/// Gets a count of the ticks for the current date.
/// This is used to ensure that URLs are always unique and not cached by the browser.
/// </summary>
$.fn.annotateImage.getTicks = function() {
var now = new Date();
return now.getTime();
};
/// <summary>
/// Adds a note to the image.
/// </summary>
$.fn.annotateImage.add = function(image) {
if (image.mode == 'view') {
image.mode = 'edit';
// Create/prepare the editable note elements
var editable = new $.fn.annotateEdit(image);
$.fn.annotateImage.createSaveButton(editable, image);
$.fn.annotateImage.createCancelButton(editable, image);
}
};
/// <summary>
/// Creates a Save button on the editable note.
/// </summary>
$.fn.annotateImage.createSaveButton = function(editable, image, note) {
/*
<a class="image-annotate-edit-ok">OK</a>
*/
var ok = $('<a class="image-annotate-edit-ok">OK</a>');
ok.click(function() {
var form = $('#image-annotate-edit-form form');
var text = $('#image-annotate-text').val();
var left = editable.area.position().left;
var top = editable.area.position().top;
var height = editable.area.height();
var width = editable.area.width();
$.fn.annotateImage.appendPosition(form, editable)
image.mode = 'view';
alert(form.serialize());
// Save via AJAX
if (image.useAjax) {
$.ajax({
type: "POST",
url: image.saveUrl,
dataType: "json",
data: form.serialize(),
error: function(e) { alert("An error occurred saving that note.") },
success: function(data) {
if (data.annotation_id != undefined) {
editable.note.id = data.annotation_id;
}
}
});
}
// Add to canvas
if (note) {
note.resetPosition(editable, text);
} else {
editable.note.editable = true;
note = new $.fn.annotateView(image, editable.note)
note.resetPosition(editable, text);
image.notes.push(editable.note);
}
editable.destroy();
});
editable.form.append(ok);
};
/// <summary>
/// Creates a Cancel button on the editable note.
/// </summary>
$.fn.annotateImage.createCancelButton = function(editable, image) {
/*
<a class="image-annotate-edit-close">Cancel</a>
*/
var cancel = $('<a class="image-annotate-edit-close">Cancel</a>');
cancel.click(function() {
editable.destroy();
image.mode = 'view';
});
editable.form.append(cancel);
};
/// <summary>
/// Defines a annotation area.
/// </summary>
$.fn.annotateView = function(image, note) {
this.image = image;
this.note = note;
this.editable = (note.editable && image.editable);
// Add the area
this.area = $('<div class="image-annotate-area' + (this.editable ? ' image-annotate-area-editable' : '') + '"><div></div></div>');
image.canvas.children('.image-annotate-view').prepend(this.area);
// Add the note
this.form = $('<div class="image-annotate-note">' + note.text + '</div>');
this.form.hide();
image.canvas.children('.image-annotate-view').append(this.form);
this.form.children('span.actions').hide();
// Set the position and size of the note
this.setPosition();
// Add the behavior: hide/display the note when hovering the area
var annotation = this;
this.area.toggle/*hover*/(function() {
annotation.show();
}, function() {
annotation.hide();
});
};
/// <summary>
/// Edits the annotation.
/// </summary>
$.fn.annotateView.prototype.edit = function() {
if (this.image.mode == 'view') {
this.image.mode = 'edit';
var annotation = this;
// Create/prepare the editable note elements
var editable = new $.fn.annotateEdit(this.image, this.note);
$.fn.annotateImage.createSaveButton(editable, this.image, annotation);
// Add the delete button
/*
<a class="image-annotate-edit-delete">Delete</a>
*/
var del = $('<a class="image-annotate-edit-delete">Delete</a>');
del.click(function() {
var form = $('#image-annotate-edit-form form');
$.fn.annotateImage.appendPosition(form, editable)
if (annotation.image.useAjax) {
$.ajax({
url: annotation.image.deleteUrl,
data: form.serialize(),
error: function(e) { alert("An error occured deleting that note.") }
});
}
annotation.image.mode = 'view';
editable.destroy();
annotation.destroy();
});
editable.form.append(del);
$.fn.annotateImage.createCancelButton(editable, this.image);
}
};
php：
//insert a tag
$comment = $_POST['text'];
$left = $_POST['left'];
$top = $_POST['top'];
$height = $_POST['height'];
$width = $_POST['width'];
$sql = "INSERT INTO tag (text,left,top,height,width) VALUES ('$comment',$left,top,height,$width)";
//$sql = 'INSERT INTO tag (text,left,top,height,width) VALUES ('.$comment.','.$left.','.$top.','.$height.','.$width.')';
$qry = mysql_query($sql);
?>
我也一直在努力。我的数据库不允许我保存到列名为"left"的表中。我不得不将其更改为类似"left_pos"的内容。看看这是否有效，但让我们知道您收到的错误消息也有帮助。
相关文章：
- 如何使用url加载程序在webpack中导入多个图像
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 角度:在ng重复上切换图像
- 画廊图像未显示
- Phonegap-(安卓/iphone）多个图像的图像库出现问题
- Javascript排序的图像弹出窗口..可以't单独弹出
- 画布数据到图像
- Windows8应用程序(html&Javascript）:从图片库(除了文件选择器）显示图像的另一种方式
- 如何检查图像是否已注释
- jQuery 框架，用于将注释附加到图像，如 Facebook 或 Flickr
- 是否有一个 javascript 库可以在图像上注释并将注释另存为服务器中的图像
- 使用 alt 标签优雅地注释图像
- 是否可以使用图表内置方法将谷歌注释图表隐藏为 pdf/图像
- 当用户在这个工作javascript注释框中提交注释时，您将如何添加用户图像和名称
- 获取保存到MySQL数据库中的图像注释
- 如何在图像的特定点显示注释
- 用文本在画布上注释图像
- 灯箱中的图像标题/注释
- HTML5, JS, iOS phonegap应用上的图像注释
