JQuery MVC 圖片截圖是一種用于從圖片中截取出特定部分的工具。這種工具基于MVC設計模式，使得程序具有良好的擴展性和可維護性。下面將通過代碼示例來介紹此工具的使用。

//定義Model
var ImageModel = function(){
this.url = '';
this.width = 0;
this.height = 0;
}
//定義Controller
var ImageController = function(model, view){
this.model = model;
this.view = view;
this.view.on('submit', this.updateView.bind(this));
}
ImageController.prototype.updateView = function(data){
var self = this;
var image = new Image();
image.src = data.url;
image.onload = function(){
self.model.url = data.url;
self.model.width = this.width;
self.model.height = this.height;
self.view.render();
}
}
//定義View
var ImageView = function(model){
this.model = model;
this.$elem = $('#image');
this.$elem.on('submit', this.handleSubmit.bind(this));
}
ImageView.prototype.handleSubmit = function(e){
e.preventDefault();
var data = {
url: $('#url').val(),
x: parseInt($('#x').val()),
y: parseInt($('#y').val())
width: parseInt($('#width').val()),
height: parseInt($('#height').val())
};
this.trigger('submit', data);
}
ImageView.prototype.render = function(){
var $img = $('').attr('src', this.model.url);
var $canvas = $('').attr('width', this.model.width).attr('height', this.model.height);
var ctx = $canvas[0].getContext('2d');
ctx.drawImage($img[0], data.x, data.y, data.width, data.height, 0, 0, this.model.width, this.model.height);
this.$elem.html($canvas);
}
//使用示例
var model = new ImageModel();
var view = new ImageView(model);
var controller = new ImageController(model, view);

以上代碼演示了如何使用JQuery MVC 圖片截圖。首先定義了Model，用于存放圖片的相關信息；然后定義了Controller，負責控制數據的更新和View的渲染；最后定義了View，負責與用戶交互，以及將數據渲染到頁面上。

使用時，先創建一個Model實例，并將其傳入View和Controller中。然后在View中輸入要截取的部分的坐標和尺寸，點擊提交按鈕后，Controller會更新Model，并調用View的渲染方法，將截取后的圖片顯示在頁面上。

總體來說，JQuery MVC 圖片截圖是一種實用的工具，其良好的設計模式和易于擴展的特點，使得其在實際開發中使用也非常方便。