预览图像和画布

因为每次附加新图像时，document.ready事件都会触发并将一个新的mousedown处理程序附加到画布。

$.fn.canvasAreaDraw = function (options) {
    this.each(function (index, element) {
        init.apply(element, [index, element, options]);
    });
}
var init = function (index, input, options) {
    var points, activePoint, settings;
    var $reset, $canvas, ctx, image;
    var draw, mousedown, stopdrag, move, resize, reset, resot, rightclick, record, previewImage;
    mousedown = function (e) {
        console.log('mousedown');  
        console.log(points);
        console.log(points.length);
        var x, y, dis, lineDis, insertAt = points.length;
        e.preventDefault();
        if (!e.offsetX) {
            e.offsetX = (e.pageX - $(e.target).offset().left);
            e.offsetY = (e.pageY - $(e.target).offset().top);
        }
        x = e.offsetX;
        y = e.offsetY;
        points.splice(insertAt, 0, Math.round(x), Math.round(y));
        activePoint = insertAt;
        $(this).on('mousemove', move);
        record();
        return false;
    };
    record = function () {
        $(input).val(points.join(','));
    };
    settings = $.extend({
        imageUrl: $(this).attr('data-image-url')
    }, options);
    points = [];  //I expected this to reset the points list!!!, but no.... 
    if (!$(this).is('canvas')) {
        $canvas = $('<canvas>');
    } else {
        $canvas = $(this);
    }
    ctx = $canvas[0].getContext('2d');
    image = new Image();
    $(this).prev().prev().val('');
    resize = function () {
        $canvas.attr('height', image.height).attr('width', image.width);
        draw();
    };
    if (settings.imageUrl) {
        image.src = settings.imageUrl;
    } else {
        image.src = options;
    }
    $canvas.css({
        background: 'url(' + image.src + ')'
    });
    $(input).after('<br>', $canvas);
    $(document).ready(function () {
        alert('attaching a new mousedown event!');
        $canvas.on('mousedown', mousedown);
    });
};
//LOAD IMAGE
previewImage = function () {
    var aux = $(this).prev();
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            aux.canvasAreaDraw(e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
    }
}
$(document).ready(function () {
    $('.canvas-area').canvasAreaDraw();
    $('.imgInp').on('change', previewImage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="canvas-area" data-image-url="http://www.ziiweb.com/images/logo.png"></textarea>
    <input type='file' class="imgInp" id="jander" />

解决方案是将事件附加到其他地方，或者使用标志。

$.fn.canvasAreaDraw = function (options) {
    this.each(function (index, element) {
        init.apply(element, [index, element, options]);
    });
}
var init = function (index, input, options) {
    var points, activePoint, settings;
    var $reset, $canvas, ctx, image;
    var draw, mousedown, stopdrag, move, resize, reset, resot, rightclick, record, previewImage;
    mousedown = function (e) {
        console.log('mousedown');  
        console.log(points);
        console.log(points.length);
        var x, y, dis, lineDis, insertAt = points.length;
        e.preventDefault();
        if (!e.offsetX) {
            e.offsetX = (e.pageX - $(e.target).offset().left);
            e.offsetY = (e.pageY - $(e.target).offset().top);
        }
        x = e.offsetX;
        y = e.offsetY;
        points.splice(insertAt, 0, Math.round(x), Math.round(y));
        activePoint = insertAt;
        $(this).on('mousemove', move);
        record();
        return false;
    };
    record = function () {
        $(input).val(points.join(','));
    };
    settings = $.extend({
        imageUrl: $(this).attr('data-image-url')
    }, options);
    points = [];  //I expected this to reset the points list!!!, but no.... 
    if (!$(this).is('canvas')) {
        $canvas = $('<canvas>');
    } else {
        $canvas = $(this);
    }
    ctx = $canvas[0].getContext('2d');
    image = new Image();
    $(this).prev().prev().val('');
    resize = function () {
        $canvas.attr('height', image.height).attr('width', image.width);
        draw();
    };
    if (settings.imageUrl) {
        image.src = settings.imageUrl;
    } else {
        image.src = options;
    }
    $canvas.css({
        background: 'url(' + image.src + ')'
    });
    $(input).after('<br>', $canvas);
    $(document).ready(function () {
      if(first){
        alert('attaching a new mousedown event!');
     first= false;
        
        $canvas.on('mousedown', mousedown);
}
    });
};
var first = true;
//LOAD IMAGE
previewImage = function () {
    var aux = $(this).prev();
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            aux.canvasAreaDraw(e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
    }
}
$(document).ready(function () {
    $('.canvas-area').canvasAreaDraw();
    $('.imgInp').on('change', previewImage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="canvas-area" data-image-url="http://www.ziiweb.com/images/logo.png"></textarea>
    <input type='file' class="imgInp" id="jander" />