个人中心
gpt4 book ai didi

php - 将图像注释保存到 MySQL 数据库中

转载 作者：行者123 更新时间：2023-11-30 23:34:22 26 4
gpt4 key购买 nike

我正在开发我在网上找到的这个 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”之类的内容。看看这是否有效，但让我们知道您收到的错误消息类型也有帮助。

关于php - 将图像注释保存到 MySQL 数据库中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8868536/

26 4 0
文章推荐： python - mysql-python fetchrow 带来: TypeError: 'long' object is not callable
文章推荐： php - PHP 关联数组和 MySQL 数据的问题
文章推荐： php - 学校管理MySQL数据库设计
文章推荐： python - Python中如何检查和执行SQL语句
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com