extjs图片裁剪

Ext.onReady(function() {
    Ext.create('Ext.Container', {
        renderTo: Ext.getBody(),
        width: 600,
        height: 400,
        layout: 'fit',
        items: [{
            xtype: 'image',
            src: 'path/to/your/image.jpg',
            listeners: {
                afterrender: function(image) {
                    var canvas = document.createElement('canvas');
                    var ctx = canvas.getContext('2d');
                    var cropBox = Ext.create('Ext.BoxComponent', {
                        renderTo: Ext.getBody(),
                        width: 200,
                        height: 200,
                        style: 'position:absolute;border:1px solid red;',
                        listeners: {
                            afterrender: function(cropBox) {
                                canvas.width = cropBox.getWidth();
                                canvas.height = cropBox.getHeight();
                                ctx.drawImage(image.el.dom, cropBox.getX(), cropBox.getY());
                            }
                        }
                    });

                    image.getEl().on('mousemove', function(e) {
                        cropBox.setPosition(e.getX() - cropBox.getWidth() / 2, e.getY() - cropBox.getHeight() / 2);
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.drawImage(image.el.dom, cropBox.getX(), cropBox.getY());
                    });
                }
            }
        }]
    });
});