diff --git a/src/controllers/constant.js b/src/controllers/constant.js
index 12739a5..5cfde4c 100644
--- a/src/controllers/constant.js
+++ b/src/controllers/constant.js
@@ -129,7 +129,8 @@ const gridHTML = function(){
                                                     <div id="luckysheet-dynamicArray-hightShow"></div>  
                                                     <div id="luckysheet-image-showBoxs">
                                                         <div id="luckysheet-modal-dialog-activeImage" class="luckysheet-modal-dialog" style="display:none;padding:0;position:absolute;z-index:300;">
-                                                            <div class="luckysheet-modal-dialog-content"></div>    
+                                                            <div class="luckysheet-modal-dialog-border" style="position:absolute;"></div> 
+                                                            <div class="luckysheet-modal-dialog-content"></div>  
                                                             <div class="luckysheet-modal-dialog-resize">
                                                                 <div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-lt" data-type="lt"></div>
                                                                 <div class="luckysheet-modal-dialog-resize-item luckysheet-modal-dialog-resize-item-mt" data-type="mt"></div>
@@ -155,6 +156,7 @@ const gridHTML = function(){
                                                         <div id="luckysheet-modal-dialog-cropping" class="luckysheet-modal-dialog" style="display:none;padding:0;position:absolute;z-index:300;">
                                                             <div class="cropping-mask"></div>
                                                             <div class="cropping-content"></div>
+                                                            <div class="luckysheet-modal-dialog-border" style="position:absolute;"></div>
                                                             <div class="luckysheet-modal-dialog-resize">
                                                                 <div class="resize-item lt" data-type="lt"></div> 
                                                                 <div class="resize-item mt" data-type="mt"></div> 
@@ -177,6 +179,7 @@ const gridHTML = function(){
                                                                 </span>
                                                             </div>
                                                         </div>
+                                                        <div class="img-list"></div>
                                                     </div>
                                                     <div class="luckysheet-cell-copy"></div>  
                                                     <div class="luckysheet-grdblkflowpush"></div>  \${flow} 
@@ -1262,7 +1265,7 @@ function menuToolBar (){
             ${toolbar.splitColumn}
         </div>
         <div class="luckysheetfulltoolbar" id="luckysheet-insertImg-btn-title">
-            插入图片
+            ${toolbar.insertImage}
             <input id="luckysheet-imgUpload" type="file" accept="image/*" style="display:none;">
         </div>`;
 } 
diff --git a/src/controllers/controlHistory.js b/src/controllers/controlHistory.js
index 0046ff4..764b554 100644
--- a/src/controllers/controlHistory.js
+++ b/src/controllers/controlHistory.js
@@ -3,6 +3,7 @@ import server from './server';
 import pivotTable from './pivotTable';
 import conditionformat from './conditionformat';
 import luckysheetPostil from './postil';
+import imageCtrl from './imageCtrl';
 import {zoomRefreshView,zoomNumberDomBind} from './zoom';
 import { createFilter, createFilterOptions, labelFilterOptionState } from './filter';
 import formula from '../global/formula';
@@ -337,6 +338,11 @@ const controlHistory = {
                 }
             }
         }
+        else if (ctr.type == "imageCtrl"){
+            imageCtrl.images = $.extend(true, {}, ctr.images);
+            imageCtrl.allImagesShow();
+            imageCtrl.ref();
+        }
         else if (ctr.type=="zoomChange"){
             Store.zoomRatio = ctr.zoomRatio;
             server.saveParam("all", ctr.currentSheetIndex, ctr.zoomRatio, { "k": "zoomRatio" });
@@ -576,6 +582,11 @@ const controlHistory = {
                 }
             }
         }
+        else if (ctr.type == "imageCtrl"){
+            imageCtrl.images = $.extend(true, {}, ctr.curImages);
+            imageCtrl.allImagesShow();
+            imageCtrl.ref();
+        }
         else if (ctr.type=="zoomChange"){
             Store.zoomRatio = ctr.curZoomRatio;
             server.saveParam("all", ctr.currentSheetIndex, ctr.curZoomRatio, { "k": "zoomRatio" });
diff --git a/src/controllers/handler.js b/src/controllers/handler.js
index b696df1..0ca6e26 100644
--- a/src/controllers/handler.js
+++ b/src/controllers/handler.js
@@ -243,6 +243,11 @@ export default function luckysheetHandler() {
         //有批注在编辑时
         luckysheetPostil.removeActivePs();
 
+        //图片 active/cropping
+        if($("#luckysheet-modal-dialog-activeImage").is(":visible") || $("#luckysheet-modal-dialog-cropping").is(":visible")){
+            imageCtrl.cancelActiveImgItem();
+        }
+
         //luckysheetautoadjustmousedown = 1;
         let mouse = mouseposition(event.pageX, event.pageY);
         if (mouse[0] >= Store.cellmainWidth - Store.cellMainSrollBarSize || mouse[1] >= Store.cellmainHeight - Store.cellMainSrollBarSize) {
@@ -1114,6 +1119,29 @@ export default function luckysheetHandler() {
         }
     });
 
+    //监听拖拽 
+    document.getElementById('luckysheet-cell-main').addEventListener('drop', function(e){
+        e.preventDefault();
+        e.stopPropagation();
+
+        let files = e.dataTransfer.files;
+
+        //拖拽插入图片
+        if(files.length == 1 && files[0].type.indexOf('image') > -1){
+            let render = new FileReader();
+            render.readAsDataURL(files[0]);
+
+            render.onload = function(event){
+                let src = event.target.result;
+                imageCtrl.inserImg(src);
+            }
+        }
+    }, false);
+    document.getElementById('luckysheet-cell-main').addEventListener('dragover', function(e){
+        e.preventDefault();
+        e.stopPropagation();
+    }, false);
+
     //表格mousemove
     $(document).on("mousemove.luckysheetEvent",function (event) {
         luckysheetPostil.overshow(event); //有批注显示
@@ -1949,29 +1977,48 @@ export default function luckysheetHandler() {
                 //image move
                 else if (imageCtrl.move) {
                     let mouse = mouseposition(event.pageX, event.pageY);
+
                     let x = mouse[0] + $("#luckysheet-cell-main").scrollLeft();
                     let y = mouse[1] + $("#luckysheet-cell-main").scrollTop();
 
-                    let myh = $("#luckysheet-modal-dialog-activeImage").outerHeight(),
-                        myw = $("#luckysheet-modal-dialog-activeImage").outerWidth();
+                    let imgItem = imageCtrl.images[imageCtrl.currentImgId];
+                    if(imgItem.isFixedPos){
+                        x = event.pageX;
+                        y = event.pageY;
+                    }
+
+                    let myh = $("#luckysheet-modal-dialog-activeImage").height(),
+                        myw = $("#luckysheet-modal-dialog-activeImage").width();
 
                     let top = y - imageCtrl.moveXY[1],
                         left = x - imageCtrl.moveXY[0];
 
-                    if (top < 0) {
-                        top = 0;
+                    let minTop = 0,
+                        maxTop = imageCtrl.currentWinH - myh - 42 - 6,
+                        minLeft = 0,
+                        maxLeft = imageCtrl.currentWinW - myw - 22 - 36;
+
+                    if(imgItem.isFixedPos){
+                        minTop = Store.infobarHeight + Store.toolbarHeight + Store.calculatebarHeight + Store.columeHeaderHeight;
+                        maxTop = minTop + Store.cellmainHeight - Store.cellMainSrollBarSize - myh;
+                        minLeft = Store.rowHeaderWidth;
+                        maxLeft = minLeft + Store.cellmainWidth - Store.cellMainSrollBarSize - myw;
                     }
 
-                    if (top + myh + 42 + 6 > imageCtrl.currentWinH) {
-                        top = imageCtrl.currentWinH - myh - 42 - 6;
+                    if (top < minTop) {
+                        top = minTop;
                     }
 
-                    if (left < 0) {
-                        left = 0;
+                    if (top > maxTop) {
+                        top = maxTop;
                     }
 
-                    if (left + myw + 22 + 36 > imageCtrl.currentWinW) {
-                        left = imageCtrl.currentWinW - myw - 22 - 36;
+                    if (left < minLeft) {
+                        left = minLeft;
+                    }
+
+                    if (left > maxLeft) {
+                        left = maxLeft;
                     }
 
                     $("#luckysheet-modal-dialog-activeImage").css({ "left": left, "top": top });
@@ -1979,8 +2026,10 @@ export default function luckysheetHandler() {
                 //image resize
                 else if (!!imageCtrl.resize) {
                     let mouse = mouseposition(event.pageX, event.pageY);
-                    let x = mouse[0] + $("#luckysheet-cell-main").scrollLeft();
-                    let y = mouse[1] + $("#luckysheet-cell-main").scrollTop();
+                    let scrollLeft = $("#luckysheet-cell-main").scrollLeft();
+                    let scrollTop = $("#luckysheet-cell-main").scrollTop();
+                    let x = mouse[0] + scrollLeft;
+                    let y = mouse[1] + scrollTop;
 
                     if (x < 0 || y < 0) {
                         return false;
@@ -1997,54 +2046,226 @@ export default function luckysheetHandler() {
                         width = resizeXY[2];
 
                     let resize = imageCtrl.resize;
+                    let imgItem = imageCtrl.images[imageCtrl.currentImgId];
 
-                    if (resize == "lm" || resize == "lt" || resize == "lb") {
-                        left = x;
-                        width = resizeXY[2] - leftchange;
+                    if(imgItem.isFixedPos){
+                        let minTop = Store.infobarHeight + Store.toolbarHeight + Store.calculatebarHeight + Store.columeHeaderHeight;
+                        let minLeft = Store.rowHeaderWidth;
 
-                        if (left > resizeXY[2] + resizeXY[4] - 60) {
-                            left = resizeXY[2] + resizeXY[4] - 60;
-                            width = resizeXY[2] - (resizeXY[2] + resizeXY[4] - 60 - resizeXY[0]);
+                        if(resize == 'lt'){//左上
+                            left = resizeXY[4] - resizeXY[6] + leftchange;
+
+                            if(left < minLeft){
+                                left = minLeft;
+                            }
+
+                            if(left > resizeXY[4] - resizeXY[6] + resizeXY[2] - 1){
+                                left = resizeXY[4] - resizeXY[6] + resizeXY[2] - 1;
+                            }
+
+                            width = resizeXY[4] - resizeXY[6] + resizeXY[2] - left;
+
+                            top = resizeXY[5] - resizeXY[7] + topchange;
+
+                            if(top < minTop){
+                                top = minTop;
+                            }
+
+                            if(top > resizeXY[5] - resizeXY[7] + resizeXY[3] - 1){
+                                top = resizeXY[5] - resizeXY[7] + resizeXY[3] - 1;
+                            }
+
+                            height = resizeXY[5] - resizeXY[7] + resizeXY[3] - top;
                         }
-                        else if (left <= 0) {
-                            left = 0;
-                            width = resizeXY[2] + resizeXY[0];
+                        else if(resize == 'lm'){//左中
+                            left = resizeXY[4] - resizeXY[6] + leftchange;
+
+                            if(left < minLeft){
+                                left = minLeft;
+                            }
+
+                            if(left > resizeXY[4] - resizeXY[6] + resizeXY[2] - 1){
+                                left = resizeXY[4] - resizeXY[6] + resizeXY[2] - 1;
+                            }
+
+                            width = resizeXY[4] - resizeXY[6] + resizeXY[2] - left;
+
+                            top = resizeXY[5] - resizeXY[7];
+                            height = resizeXY[3];
                         }
-                    }
+                        else if(resize == 'lb'){//左下
+                            left = resizeXY[4] - resizeXY[6] + leftchange;
 
-                    if (resize == "rm" || resize == "rt" || resize == "rb") {
-                        width = resizeXY[2] + leftchange;
+                            if(left < minLeft){
+                                left = minLeft;
+                            }
 
-                        if (width < 60) {
-                            width = 60;
+                            if(left > resizeXY[4] - resizeXY[6] + resizeXY[2] - 1){
+                                left = resizeXY[4] - resizeXY[6] + resizeXY[2] - 1;
+                            }
+
+                            width = resizeXY[4] - resizeXY[6] + resizeXY[2] - left;
+
+                            top = resizeXY[5] - resizeXY[7];
+
+                            height = resizeXY[3] + topchange;
+
+                            if(height < 1){
+                                height = 1;
+                            }
+
+                            if(height > minTop + Store.cellmainHeight - Store.cellMainSrollBarSize - top){
+                                height = minTop + Store.cellmainHeight - Store.cellMainSrollBarSize - top;
+                            }
                         }
-                        else if (width >= imageCtrl.currentWinW - resizeXY[4] - 22 - 36) {
-                            width = imageCtrl.currentWinW - resizeXY[4] - 22 - 36;
+                        else if(resize == 'rt'){//右上
+                            left = resizeXY[4] - resizeXY[6];
+
+                            width = resizeXY[2] + leftchange;
+
+                            if(width < 1){
+                                width = 1;
+                            }
+
+                            if(width > minLeft + Store.cellmainWidth - Store.cellMainSrollBarSize - left){
+                                width = minLeft + Store.cellmainWidth - Store.cellMainSrollBarSize - left;
+                            }
+
+                            top = resizeXY[5] - resizeXY[7] + topchange;
+
+                            if(top < minTop){
+                                top = minTop;
+                            }
+
+                            if(top > resizeXY[5] - resizeXY[7] + resizeXY[3] - 1){
+                                top = resizeXY[5] - resizeXY[7] + resizeXY[3] - 1;
+                            }
+
+                            height = resizeXY[5] - resizeXY[7] + resizeXY[3] - top;
                         }
-                    }
+                        else if(resize == 'rm'){//右中
+                            left = resizeXY[4] - resizeXY[6];
 
-                    if (resize == "mt" || resize == "lt" || resize == "rt") {
-                        top = y;
-                        height = resizeXY[3] - topchange;
+                            width = resizeXY[2] + leftchange;
 
-                        if (top > resizeXY[3] + resizeXY[5] - 60) {
-                            top = resizeXY[3] + resizeXY[5] - 60;
-                            height = resizeXY[3] - (resizeXY[3] + resizeXY[5] - 60 - resizeXY[1]);
+                            if(width < 1){
+                                width = 1;
+                            }
+
+                            if(width > minLeft + Store.cellmainWidth - Store.cellMainSrollBarSize - left){
+                                width = minLeft + Store.cellmainWidth - Store.cellMainSrollBarSize - left;
+                            }
+
+                            top = resizeXY[5] - resizeXY[7];
+                            height = resizeXY[3];
                         }
-                        else if (top <= 0) {
-                            top = 0;
-                            height = resizeXY[3] + resizeXY[1];
+                        else if(resize == 'rb'){//右下
+                            left = resizeXY[4] - resizeXY[6];
+
+                            width = resizeXY[2] + leftchange;
+
+                            if(width < 1){
+                                width = 1;
+                            }
+
+                            if(width > minLeft + Store.cellmainWidth - Store.cellMainSrollBarSize - left){
+                                width = minLeft + Store.cellmainWidth - Store.cellMainSrollBarSize - left;
+                            }
+
+                            top = resizeXY[5] - resizeXY[7];
+
+                            height = resizeXY[3] + topchange;
+
+                            if(height < 1){
+                                height = 1;
+                            }
+
+                            if(height > minTop + Store.cellmainHeight - Store.cellMainSrollBarSize - top){
+                                height = minTop + Store.cellmainHeight - Store.cellMainSrollBarSize - top;
+                            }
                         }
-                    }
+                        else if(resize == 'mt'){//中上
+                            left = resizeXY[4] - resizeXY[6];
+                            width = resizeXY[2];
 
-                    if (resize == "mb" || resize == "lb" || resize == "rb") {
-                        height = resizeXY[3] + topchange;
+                            top = resizeXY[5] - resizeXY[7] + topchange;
 
-                        if (height < 60) {
-                            height = 60;
+                            if(top < minTop){
+                                top = minTop;
+                            }
+
+                            if(top > resizeXY[5] - resizeXY[7] + resizeXY[3] - 1){
+                                top = resizeXY[5] - resizeXY[7] + resizeXY[3] - 1;
+                            }
+
+                            height = resizeXY[5] - resizeXY[7] + resizeXY[3] - top;
+                        }
+                        else if(resize == 'mb'){//中下
+                            left = resizeXY[4] - resizeXY[6];
+                            width = resizeXY[2];
+
+                            top = resizeXY[5] - resizeXY[7];
+
+                            height = resizeXY[3] + topchange;
+
+                            if(height < 1){
+                                height = 1;
+                            }
+
+                            if(height > minTop + Store.cellmainHeight - Store.cellMainSrollBarSize - top){
+                                height = minTop + Store.cellmainHeight - Store.cellMainSrollBarSize - top;
+                            }
+                        }
+                    }
+                    else{
+                        if (resize == "lm" || resize == "lt" || resize == "lb") {
+                            left = x;
+                            width = resizeXY[2] - leftchange;
+    
+                            if (left > resizeXY[2] + resizeXY[4] - 1) {
+                                left = resizeXY[2] + resizeXY[4] - 1;
+                                width = resizeXY[2] - (resizeXY[2] + resizeXY[4] - 1 - resizeXY[0]);
+                            }
+                            else if (left <= 0) {
+                                left = 0;
+                                width = resizeXY[2] + resizeXY[0];
+                            }
+                        }
+    
+                        if (resize == "rm" || resize == "rt" || resize == "rb") {
+                            width = resizeXY[2] + leftchange;
+    
+                            if (width < 1) {
+                                width = 1;
+                            }
+                            else if (width >= imageCtrl.currentWinW - resizeXY[4] - 22 - 36) {
+                                width = imageCtrl.currentWinW - resizeXY[4] - 22 - 36;
+                            }
+                        }
+    
+                        if (resize == "mt" || resize == "lt" || resize == "rt") {
+                            top = y;
+                            height = resizeXY[3] - topchange;
+    
+                            if (top > resizeXY[3] + resizeXY[5] - 1) {
+                                top = resizeXY[3] + resizeXY[5] - 1;
+                                height = resizeXY[3] - (resizeXY[3] + resizeXY[5] - 1 - resizeXY[1]);
+                            }
+                            else if (top <= 0) {
+                                top = 0;
+                                height = resizeXY[3] + resizeXY[1];
+                            }
                         }
-                        else if (height >= imageCtrl.currentWinH - resizeXY[5] - 42 - 6) {
-                            height = imageCtrl.currentWinH - resizeXY[5] - 42 - 6;
+    
+                        if (resize == "mb" || resize == "lb" || resize == "rb") {
+                            height = resizeXY[3] + topchange;
+    
+                            if (height < 1) {
+                                height = 1;
+                            }
+                            else if (height >= imageCtrl.currentWinH - resizeXY[5] - 42 - 6) {
+                                height = imageCtrl.currentWinH - resizeXY[5] - 42 - 6;
+                            }
                         }
                     }
 
@@ -2054,11 +2275,239 @@ export default function luckysheetHandler() {
                         "left": left, 
                         "top": top 
                     });
+                    
+                    let scaleX = width / imgItem.crop.width;
+                    let scaleY = height / imgItem.crop.height;
+                    let defaultWidth = Math.round(imgItem.default.width * scaleX);
+                    let defaultHeight = Math.round(imgItem.default.height * scaleY);
+                    let offsetLeft = Math.round(imgItem.crop.offsetLeft * scaleX);
+                    let offsetTop = Math.round(imgItem.crop.offsetTop * scaleY);
+                    
                     $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({
-                        "background-size": width + "px " + height + "px",
-                        "background-position": "0px 0px"
+                        "background-size": defaultWidth + "px " + defaultHeight + "px",
+                        "background-position": -offsetLeft + "px " + -offsetTop + "px"
                     })
                 }
+                //image cropChange
+                else if (!!imageCtrl.cropChange) {
+                    let mouse = mouseposition(event.pageX, event.pageY);
+                    let x = mouse[0] + $("#luckysheet-cell-main").scrollLeft();
+                    let y = mouse[1] + $("#luckysheet-cell-main").scrollTop();
+
+                    if (x < 0 || y < 0) {
+                        return false;
+                    }
+
+                    let cropChangeXY = imageCtrl.cropChangeXY;
+
+                    let topchange = y - cropChangeXY[1],
+                        leftchange = x - cropChangeXY[0];
+
+                    let imgItem = imageCtrl.images[imageCtrl.currentImgId];
+                    let cropChange = imageCtrl.cropChange;
+                    let width, height, offsetLeft, offsetTop;
+
+                    if(cropChange == 'lt'){//左上
+                        offsetLeft = imgItem.crop.offsetLeft + leftchange;
+
+                        if(offsetLeft < 0){
+                            offsetLeft = 0;
+                        }
+
+                        if(offsetLeft > imgItem.crop.width + imgItem.crop.offsetLeft - 1){
+                            offsetLeft = imgItem.crop.width + imgItem.crop.offsetLeft - 1;
+                        }
+
+                        width = imgItem.crop.width + imgItem.crop.offsetLeft - offsetLeft;
+
+                        offsetTop = imgItem.crop.offsetTop + topchange;
+
+                        if(offsetTop < 0){
+                            offsetTop = 0;
+                        }
+
+                        if(offsetTop > imgItem.crop.height + imgItem.crop.offsetTop - 1){
+                            offsetTop = imgItem.crop.height + imgItem.crop.offsetTop - 1;
+                        }
+
+                        height = imgItem.crop.height + imgItem.crop.offsetTop - offsetTop;
+                    }
+                    else if(cropChange == 'lm'){//左中
+                        offsetLeft = imgItem.crop.offsetLeft + leftchange;
+
+                        if(offsetLeft < 0){
+                            offsetLeft = 0;
+                        }
+
+                        if(offsetLeft > imgItem.crop.width + imgItem.crop.offsetLeft - 1){
+                            offsetLeft = imgItem.crop.width + imgItem.crop.offsetLeft - 1;
+                        }
+
+                        width = imgItem.crop.width + imgItem.crop.offsetLeft - offsetLeft;
+
+                        offsetTop = imgItem.crop.offsetTop;
+                        height = imgItem.crop.height;
+                    }
+                    else if(cropChange == 'lb'){//左下
+                        offsetLeft = imgItem.crop.offsetLeft + leftchange;
+
+                        if(offsetLeft < 0){
+                            offsetLeft = 0;
+                        }
+
+                        if(offsetLeft > imgItem.crop.width + imgItem.crop.offsetLeft - 1){
+                            offsetLeft = imgItem.crop.width + imgItem.crop.offsetLeft - 1;
+                        }
+
+                        width = imgItem.crop.width + imgItem.crop.offsetLeft - offsetLeft;
+
+                        offsetTop = imgItem.crop.offsetTop;
+
+                        height = imgItem.crop.height + topchange;
+                        
+                        if(height < 1){
+                            height = 1;
+                        }
+
+                        if(height > imgItem.default.height - offsetTop){
+                            height = imgItem.default.height - offsetTop;
+                        }
+                    }
+                    else if(cropChange == 'rt'){//右上
+                        offsetLeft = imgItem.crop.offsetLeft;
+
+                        width = imgItem.crop.width + leftchange;
+
+                        if(width < 1){
+                            width = 1;
+                        }
+
+                        if(width > imgItem.default.width - offsetLeft){
+                            width = imgItem.default.width - offsetLeft;
+                        }
+
+                        offsetTop = imgItem.crop.offsetTop + topchange;
+
+                        if(offsetTop < 0){
+                            offsetTop = 0;
+                        }
+
+                        if(offsetTop > imgItem.crop.height + imgItem.crop.offsetTop - 1){
+                            offsetTop = imgItem.crop.height + imgItem.crop.offsetTop - 1;
+                        }
+
+                        height = imgItem.crop.height + imgItem.crop.offsetTop - offsetTop;
+                    }
+                    else if(cropChange == 'rm'){//右中
+                        offsetLeft = imgItem.crop.offsetLeft;
+
+                        width = imgItem.crop.width + leftchange;
+
+                        if(width < 1){
+                            width = 1;
+                        }
+
+                        if(width > imgItem.default.width - offsetLeft){
+                            width = imgItem.default.width - offsetLeft;
+                        }
+
+                        offsetTop = imgItem.crop.offsetTop;
+                        height = imgItem.crop.height;
+                    }
+                    else if(cropChange == 'rb'){//右下
+                        offsetLeft = imgItem.crop.offsetLeft;
+
+                        width = imgItem.crop.width + leftchange;
+
+                        if(width < 1){
+                            width = 1;
+                        }
+
+                        if(width > imgItem.default.width - offsetLeft){
+                            width = imgItem.default.width - offsetLeft;
+                        }
+
+                        offsetTop = imgItem.crop.offsetTop;
+
+                        height = imgItem.crop.height + topchange;
+
+                        if(height < 1){
+                            height = 1;
+                        }
+
+                        if(height > imgItem.default.height - offsetTop){
+                            height = imgItem.default.height - offsetTop;
+                        }
+                    }
+                    else if(cropChange == 'mt'){//中上
+                        offsetLeft = imgItem.crop.offsetLeft;
+                        width = imgItem.crop.width;
+
+                        offsetTop = imgItem.crop.offsetTop + topchange;
+
+                        if(offsetTop < 0){
+                            offsetTop = 0;
+                        }
+
+                        if(offsetTop > imgItem.crop.height + imgItem.crop.offsetTop - 1){
+                            offsetTop = imgItem.crop.height + imgItem.crop.offsetTop - 1;
+                        }
+
+                        height = imgItem.crop.height + imgItem.crop.offsetTop - offsetTop;
+                    }
+                    else if(cropChange == 'mb'){//中下
+                        offsetLeft = imgItem.crop.offsetLeft;
+                        width = imgItem.crop.width;
+
+                        offsetTop = imgItem.crop.offsetTop;
+
+                        height = imgItem.crop.height + topchange;
+
+                        if(height < 1){
+                            height = 1;
+                        }
+
+                        if(height > imgItem.default.height - offsetTop){
+                            height = imgItem.default.height - offsetTop;
+                        }
+                    }
+
+                    let left = imgItem.default.left + offsetLeft;
+                    let top = imgItem.default.top + offsetTop;
+
+                    if(imgItem.isFixedPos){
+                        left = imgItem.fixedLeft + offsetLeft;
+                        top = imgItem.fixedTop + offsetTop;
+                    }
+
+                    $("#luckysheet-modal-dialog-cropping").show().css({
+                        "width": width,
+                        "height": height,
+                        "left": left,
+                        "top": top
+                    });
+        
+                    $("#luckysheet-modal-dialog-cropping .cropping-mask").css({
+                        "width": imgItem.default.width,
+                        "height": imgItem.default.height,
+                        "background-image": "url(" + imgItem.src + ")",
+                        "left": -offsetLeft,
+                        "top": -offsetTop
+                    })
+        
+                    $("#luckysheet-modal-dialog-cropping .cropping-content").css({
+                        "background-image": "url(" + imgItem.src + ")",
+                        "background-size": imgItem.default.width + "px " + imgItem.default.height + "px",
+                        "background-position": -offsetLeft + "px " + -offsetTop + "px"
+                    })
+
+                    imageCtrl.cropChangeObj = {
+                        width: width,
+                        height: height,
+                        offsetLeft: offsetLeft,
+                        offsetTop: offsetTop
+                    }
+                }
                 else if (luckysheetPostil.move) {
                     let mouse = mouseposition(event.pageX, event.pageY);
                     let x = mouse[0] + $("#luckysheet-cell-main").scrollLeft();
@@ -2356,6 +2805,11 @@ export default function luckysheetHandler() {
             imageCtrl.resizeImgItem();
         }
 
+        //image cropChange
+        if (imageCtrl.cropChange) {
+            imageCtrl.cropChangeImgItem();
+        }
+
         //批注框 移动
         if (luckysheetPostil.move) {
             luckysheetPostil.move = false;
@@ -3576,34 +4030,11 @@ export default function luckysheetHandler() {
 
         render.onload = function(event){
             let src = event.target.result;
-
-            let rowIndex = Store.luckysheet_select_save[0].row_focus;
-            let colIndex = Store.luckysheet_select_save[0].column_focus;
-            let left = colIndex == 0 ? 0 : Store.visibledatacolumn[colIndex - 1];
-            let top = rowIndex == 0 ? 0 : Store.visibledatarow[rowIndex - 1];
-
-            let image = new Image();
-            image.onload = function(){
-                let width = image.width,
-                    height = image.height;
-
-                let img = {
-                    src: src,
-                    left: left,
-                    top: top,
-                    originWidth: width,
-                    originHeight: height
-                }
-
-                imageCtrl.addImgItem(img);
-                $("#luckysheet-imgUpload").val("");
-            }
-            image.src = src;
+            imageCtrl.inserImg(src);
+            $("#luckysheet-imgUpload").val("");
         }
     });
 
-    
-
     //冻结行列
     $("#luckysheet-freezen-btn-horizontal").click(function () {
         if ($.trim($(this).text()) == locale().freezen.freezenCancel) {
@@ -3945,6 +4376,19 @@ export default function luckysheetHandler() {
                 clipboardData = e.originalEvent.clipboardData;
             }
 
+            //复制的是图片
+            if(clipboardData.files.length == 1 && clipboardData.files[0].type.indexOf('image') > -1){
+                let render = new FileReader();
+                render.readAsDataURL(clipboardData.files[0]);
+
+                render.onload = function(event){
+                    let src = event.target.result;
+                    imageCtrl.inserImg(src);
+                }
+
+                return;
+            }
+
             let txtdata = clipboardData.getData("text/html");
 
             //如果标示是qksheet复制的内容，判断剪贴板内容是否是当前页面复制的内容
diff --git a/src/controllers/imageCtrl.js b/src/controllers/imageCtrl.js
index c4fe94a..88f34d1 100644
--- a/src/controllers/imageCtrl.js
+++ b/src/controllers/imageCtrl.js
@@ -1,12 +1,16 @@
-import { 
-    rowLocation, 
-    colLocation, 
-    mouseposition 
-} from '../global/location';
+import { mouseposition } from '../global/location';
+import server from './server';
+import luckysheetsizeauto from './resize';
+import { modelHTML } from './constant';
+import { getSheetIndex } from '../methods/get';
 import { setluckysheet_scroll_status } from '../methods/set';
+import { replaceHtml } from '../utils/util';
+import Store from '../store';
+import locale from '../locale/locale';
 
 const imageCtrl = {
     imgItem: {
+        type: '3',  //1移动并调整单元格大小 2移动并且不调整单元格的大小 3不要移动单元格并调整其大小
         src: '',  //图片url
         originWidth: null,  //图片原始宽度
         originHeight: null,  //图片原始高度
@@ -21,16 +25,51 @@ const imageCtrl = {
             height: null,  //图片裁剪后 高度
             offsetLeft: 0,  //图片裁剪后离未裁剪时 左边的位移
             offsetTop: 0,  //图片裁剪后离未裁剪时 顶部的位移
+        },
+        isFixedPos: false,  //固定位置
+        fixedLeft: null,  //固定位置 左位移
+        fixedTop: null,  //固定位置 右位移
+        border: {
+            width: 0,  //边框宽度
+            radius: 0,  //边框半径
+            style: 'solid',  //边框类型
+            color: '#000',  //边框颜色
         }
     },
     images: null,
     currentImgId: null,
     currentWinW: null,
     currentWinH: null,
-    resize: null,
+    resize: null,  
     resizeXY: null,
     move: false,
     moveXY: null,
+    cropChange: null,  
+    cropChangeXY: null,
+    cropChangeObj: null,
+    inserImg: function(src){
+        let rowIndex = Store.luckysheet_select_save[0].row_focus || 0;
+        let colIndex = Store.luckysheet_select_save[0].column_focus || 0;
+        let left = colIndex == 0 ? 0 : Store.visibledatacolumn[colIndex - 1];
+        let top = rowIndex == 0 ? 0 : Store.visibledatarow[rowIndex - 1];
+
+        let image = new Image();
+        image.onload = function(){
+            let width = image.width,
+                height = image.height;
+
+            let img = {
+                src: src,
+                left: left,
+                top: top,
+                originWidth: width,
+                originHeight: height
+            }
+
+            imageCtrl.addImgItem(img);
+        }
+        image.src = src;
+    },
     generateRandomId: function(prefix) {
         if(prefix == null){
             prefix = "img";
@@ -49,22 +88,245 @@ const imageCtrl = {
         return prefix + "_" + mid + "_" + time;
     },
     modelHtml: function(id, imgItem) {
+        let _this = this;
+
         let src = imgItem.src;
+        let imgItemParam = _this.getImgItemParam(imgItem);
 
-        let width = imgItem.default.width,
-            height = imgItem.default.height,
-            left = imgItem.default.left,
-            top = imgItem.default.top;
+        let width = imgItemParam.width;
+        let height = imgItemParam.height;
+        let left = imgItemParam.left;
+        let top = imgItemParam.top;
+        let position = imgItemParam.position;
 
-        return  `<div id="${id}" class="luckysheet-modal-dialog luckysheet-modal-dialog-image" style="width:${width}px;height:${height}px;padding:0;position:absolute;left:${left}px;top:${top}px;z-index:200;">
-                    <div class="luckysheet-modal-dialog-content">
-                        <img src="${src}" style="width:100%;height:100%;" />
+        return  `<div id="${id}" class="luckysheet-modal-dialog luckysheet-modal-dialog-image" style="width:${width}px;height:${height}px;padding:0;position:${position};left:${left}px;top:${top}px;z-index:200;">
+                    <div class="luckysheet-modal-dialog-content" style="width:100%;height:100%;overflow:hidden;position:relative;">
+                        <img src="${src}" style="position:absolute;width:${imgItem.default.width}px;height:${imgItem.default.height}px;left:${-imgItem.crop.offsetLeft}px;top:${-imgItem.crop.offsetTop}px;" />
                     </div>
+                    <div class="luckysheet-modal-dialog-border" style="border:${imgItem.border.width}px ${imgItem.border.style} ${imgItem.border.color};border-radius:${imgItem.border.radius}px;position:absolute;left:${-imgItem.border.width}px;right:${-imgItem.border.width}px;top:${-imgItem.border.width}px;bottom:${-imgItem.border.width}px;"></div>
                 </div>`;
     },
+    getSliderHtml: function() {
+        let imageText = locale().imageText;
+
+        return `<div id="luckysheet-modal-dialog-slider-imageCtrl" class="luckysheet-modal-dialog-slider luckysheet-modal-dialog-slider-imageCtrl" style="display:block;">
+                    <div class="luckysheet-modal-dialog-slider-title">
+                        <span>${imageText.imageSetting}</span>
+                        <span class="luckysheet-model-close-btn" title="${imageText.close}">
+                            <i class="fa fa-times" aria-hidden="true"></i>
+                        </span>
+                    </div>
+                    <div class="luckysheet-modal-dialog-slider-content">
+                        <div class="slider-box">
+                            <div class="slider-box-title">${imageText.conventional}</div>
+                            <div class="slider-box-radios">
+                                <div class="radio-item">
+                                    <input type="radio" id="imgItemType1" name="imgItemType" value="1">
+                                    <label for="imgItemType1">${imageText.moveCell1}</label>
+                                </div>
+                                <div class="radio-item">
+                                    <input type="radio" id="imgItemType2" name="imgItemType" value="2">
+                                    <label for="imgItemType2">${imageText.moveCell2}</label>
+                                </div>
+                                <div class="radio-item">
+                                    <input type="radio" id="imgItemType3" name="imgItemType" value="3">
+                                    <label for="imgItemType3">${imageText.moveCell3}</label>
+                                </div>
+                            </div>
+                            <div class="slider-box-checkbox">
+                                <input type="checkbox" id="imgItemIsFixedPos">
+                                <label for="imgItemIsFixedPos">${imageText.fixedPos}</label>
+                            </div>
+                        </div>
+                        <div class="slider-box">
+                            <div class="slider-box-title">${imageText.border}</div>
+                            <div class="slider-box-borderConfig">
+                                <div class="border-item">
+                                    <label>${imageText.width}</label>
+                                    <input type="number" id="imgItemBorderWidth" min="0">
+                                </div>
+                                <div class="border-item">
+                                    <label>${imageText.radius}</label>
+                                    <input type="number" id="imgItemBorderRadius" min="0">
+                                </div>
+                                <div class="border-item">
+                                    <label>${imageText.style}</label>
+                                    <select id="imgItemBorderStyle">
+                                        <option value="solid">${imageText.solid}</option>
+                                        <option value="dashed">${imageText.dashed}</option>
+                                        <option value="dotted">${imageText.dotted}</option>
+                                        <option value="double">${imageText.double}</option>
+                                    </select>
+                                </div>
+                                <div class="border-item">
+                                    <label>${imageText.color}</label>
+                                    <div id="imgItemBorderColor" class="imgItemBorderColor">
+                                        <span></span>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>`;
+    },
+    sliderHtmlShow: function() {
+        let _this = this;
+
+        $("#luckysheet-modal-dialog-slider-imageCtrl").remove();
+
+        let sliderHtml = _this.getSliderHtml();
+        $("body").append(sliderHtml);
+        luckysheetsizeauto();
+
+        let imgItem = _this.images[_this.currentImgId];
+
+        //类型
+        let type = imgItem.type;
+        $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemType" + type).prop("checked", true);
+
+        //固定位置
+        let isFixedPos = imgItem.isFixedPos;
+        $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemIsFixedPos").prop("checked", isFixedPos);
+
+        //边框宽度
+        let border = imgItem.border;
+        $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderWidth").val(border.width);
+        $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderRadius").val(border.radius);
+        $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderStyle").val(border.style);
+        $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderColor span").css("background-color", border.color).attr("title", border.color);
+    
+        _this.init();
+    },
+    colorSelectDialog: function(currenColor){
+        const _locale = locale();
+        const locale_button = _locale.button;
+        const locale_toolbar = _locale.toolbar;
+
+        $("#luckysheet-modal-dialog-mask").show();
+        $("#luckysheet-imageCtrl-colorSelect-dialog").remove();
+
+        $("body").append(replaceHtml(modelHTML, { 
+            "id": "luckysheet-imageCtrl-colorSelect-dialog", 
+            "addclass": "luckysheet-imageCtrl-colorSelect-dialog", 
+            "title": "图片边框颜色选择", 
+            "content": `<div class="currenColor">
+                            当前颜色：<span title="${currenColor}" style="background-color:${currenColor}"></span>
+                        </div>
+                        <div class="colorshowbox"></div>`, 
+            "botton":  `<button id="luckysheet-imageCtrl-colorSelect-dialog-confirm" class="btn btn-primary">确定</button>
+                        <button class="btn btn-default luckysheet-model-close-btn">取消</button>`, 
+            "style": "z-index:100003" 
+        }));
+        let $t = $("#luckysheet-imageCtrl-colorSelect-dialog")
+                .find(".luckysheet-modal-dialog-content")
+                .css("min-width", 300)
+                .end(), 
+            myh = $t.outerHeight(), 
+            myw = $t.outerWidth();
+        let winw = $(window).width(), winh = $(window).height();
+        let scrollLeft = $(document).scrollLeft(), scrollTop = $(document).scrollTop();
+        $("#luckysheet-imageCtrl-colorSelect-dialog").css({ 
+            "left": (winw + scrollLeft - myw) / 2, 
+            "top": (winh + scrollTop - myh) / 3 
+        }).show();
+        
+        //初始化选择颜色插件
+        $("#luckysheet-imageCtrl-colorSelect-dialog").find(".colorshowbox").spectrum({
+            showPalette: true,
+            showPaletteOnly: true,
+            preferredFormat: "hex",
+            clickoutFiresChange: false,
+            showInitial: true,
+            showInput: true,
+            flat: true,
+            hideAfterPaletteSelect: true,
+            showSelectionPalette: true,
+            showButtons: false,//隐藏选择取消按钮
+            maxPaletteSize: 8,
+            maxSelectionSize: 8,
+            color: currenColor,
+            cancelText: locale_button.cancel,
+            chooseText: locale_toolbar.confirmColor,
+            togglePaletteMoreText: locale_toolbar.customColor,
+            togglePaletteLessText: locale_toolbar.collapse,
+            togglePaletteOnly: true,
+            clearText: locale_toolbar.clearText,
+            noColorSelectedText: locale_toolbar.noColorSelectedText,
+            localStorageKey: "spectrum.textcolor" + server.gridKey,
+            palette: [
+                ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
+                ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
+                ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
+                ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
+                ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
+                ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
+                ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
+                ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
+            ],
+            move: function(color){
+                if (color != null) {
+                    color = color.toHexString();
+                }
+                else {
+                    color = "#000";
+                }
+
+                $("#luckysheet-imageCtrl-colorSelect-dialog .currenColor span").css("background-color", color).attr("title", color);
+            }
+        });
+    },
     init: function() {
         let _this = this;
 
+        //关闭
+        $("#luckysheet-modal-dialog-slider-imageCtrl .luckysheet-model-close-btn").click(function () {
+            $("#luckysheet-modal-dialog-slider-imageCtrl").hide();
+            luckysheetsizeauto();
+        });
+
+        //常规
+        $("#luckysheet-modal-dialog-slider-imageCtrl").off("change.radio").on("change.radio", ".radio-item input[type=radio][name=imgItemType]", function() {
+            _this.configChange("type", this.value);
+        })
+
+        //固定位置
+        $("#luckysheet-modal-dialog-slider-imageCtrl").off("change.checkbox").on("change.checkbox", ".slider-box-checkbox input[type=checkbox]", function() {
+            _this.configChange("fixedPos", this.checked);
+        })
+
+        //边框宽度
+        $("#luckysheet-modal-dialog-slider-imageCtrl").off("change.borderWidth").on("change.borderWidth", "#imgItemBorderWidth", function() {
+            _this.configChange("border-width", this.valueAsNumber);
+        })
+
+        //边框半径
+        $("#luckysheet-modal-dialog-slider-imageCtrl").off("change.borderRadius").on("change.borderRadius", "#imgItemBorderRadius", function() {
+            _this.configChange("border-radius", this.valueAsNumber);
+        })
+
+        //边框样式
+        $("#luckysheet-modal-dialog-slider-imageCtrl").off("change.borderStyle").on("change.borderStyle", "#imgItemBorderStyle", function() {
+            _this.configChange("border-radius", this.value);
+        })
+
+        //边框颜色 选择
+        $("#luckysheet-modal-dialog-slider-imageCtrl").off("click.color").on("click.color", "#imgItemBorderColor", function() {
+            let currenColor = $(this).find("span").attr("title");
+            _this.colorSelectDialog(currenColor);
+        })
+
+        //边框选择颜色 确定 
+        $(document).off("click.selectColorConfirm").on("click.selectColorConfirm", "#luckysheet-imageCtrl-colorSelect-dialog-confirm", function(){
+            let $parent = $(this).parents("#luckysheet-imageCtrl-colorSelect-dialog");
+            $("#luckysheet-modal-dialog-mask").hide();
+            $parent.hide();
+
+            let currenColor = $parent.find(".currenColor span").attr("title");
+            $("#luckysheet-modal-dialog-slider-imageCtrl #imgItemBorderColor span").css("background-color", currenColor).attr("title", currenColor);
+
+            _this.configChange("border-color", currenColor);            
+        });
+
         //image active
         $("#luckysheet-image-showBoxs").off("mousedown.active").on("mousedown.active", ".luckysheet-modal-dialog-image", function(e) {
             $(this).hide();
@@ -73,24 +335,20 @@ const imageCtrl = {
             _this.currentImgId = id;
 
             let item = _this.images[id];
+            let imgItemParam = _this.getImgItemParam(item);
 
-            let width = item.default.width,
-                height = item.default.height,
-                left = item.default.left,
-                top = item.default.top;
-
-            if(item.crop.width != width || item.crop.height != height){
-                width = item.crop.width;
-                height = item.crop.height;
-                left = left + item.crop.offsetLeft;
-                top = top + item.crop.offsetTop;
-            }
+            let width = imgItemParam.width;
+            let height = imgItemParam.height;
+            let left = imgItemParam.left;
+            let top = imgItemParam.top;
+            let position = imgItemParam.position;
         
             $("#luckysheet-modal-dialog-activeImage").show().css({
                 "width": width,
                 "height": height,
                 "left": left,
-                "top": top
+                "top": top,
+                "position": position
             });
 
             $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({
@@ -99,29 +357,38 @@ const imageCtrl = {
                 "background-position": -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px"
             })
 
+            $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border").css({
+                "border-width": item.border.width,
+                "border-style": item.border.style,
+                "border-color": item.border.color,
+                "border-radius": item.border.radius,
+                "left": -item.border.width,
+                "right": -item.border.width,
+                "top": -item.border.width,
+                "bottom": -item.border.width,
+            })
+
+            _this.sliderHtmlShow();
+
             e.stopPropagation();
         })
 
         //image move
         $("#luckysheet-modal-dialog-activeImage").off("mousedown.move").on("mousedown.move", ".luckysheet-modal-dialog-content", function(e) {
+            if(!$("#luckysheet-modal-dialog-slider-imageCtrl").is(":visible")){
+                _this.sliderHtmlShow();
+            }
+            
             _this.move = true;
             
             _this.currentWinW = $("#luckysheet-cell-main")[0].scrollWidth;
             _this.currentWinH = $("#luckysheet-cell-main")[0].scrollHeight;
-            
-            let scrollTop = $("#luckysheet-cell-main").scrollTop(), 
-                scrollLeft = $("#luckysheet-cell-main").scrollLeft();
 
             let offset = $("#luckysheet-modal-dialog-activeImage").offset();
-            let position = $("#luckysheet-modal-dialog-activeImage").position();
 
             _this.moveXY = [
                 e.pageX - offset.left, 
                 e.pageY - offset.top, 
-                position.left, 
-                position.top, 
-                scrollLeft, 
-                scrollTop
             ];
 
             setluckysheet_scroll_status(true);
@@ -162,54 +429,168 @@ const imageCtrl = {
             e.stopPropagation();
         })
 
-        //image crop
-        $("#luckysheet-modal-dialog-activeImage").off("mousedown.crop").on("mousedown.crop", ".luckysheet-modal-controll-crop", function(e) {
-            $("#luckysheet-modal-dialog-activeImage").hide();
+        //image croppingEnter
+        $("#luckysheet-modal-dialog-activeImage").off("mousedown.croppingEnter").on("mousedown.croppingEnter", ".luckysheet-modal-controll-crop", function(e) {
+            _this.croppingEnter();
+            e.stopPropagation();
+        })
 
-            let item = _this.images[_this.currentImgId];
+        //image croppingExit
+        $("#luckysheet-modal-dialog-cropping").off("mousedown.croppingExit").on("mousedown.croppingExit", ".luckysheet-modal-controll-crop", function(e) {
+            _this.croppingExit();
+            e.stopPropagation();
+        })
 
-            let width = item.default.width,
-                height = item.default.height,
-                left = item.default.left,
-                top = item.default.top;
+        //image crop change
+        $("#luckysheet-modal-dialog-cropping").off("mousedown.cropChange").on("mousedown.cropChange", ".resize-item", function(e) {
+            _this.cropChange = $(this).data("type");
 
-            if(item.crop.width != width || item.crop.height != height){
-                width = item.crop.width;
-                height = item.crop.height;
-                left = left + item.crop.offsetLeft;
-                top = top + item.crop.offsetTop;
-            }
-        
-            $("#luckysheet-modal-dialog-cropping").show().css({
-                "width": width,
-                "height": height,
-                "left": left,
-                "top": top
-            });
-
-            $("#luckysheet-modal-dialog-cropping .cropping-mask").css({
-                "width": item.default.width,
-                "height": item.default.height,
-                "background-image": "url(" + item.src + ")",
-                "left": -item.crop.offsetLeft,
-                "top": -item.crop.offsetTop
-            })
+            let scrollTop = $("#luckysheet-cell-main").scrollTop(), 
+                scrollLeft = $("#luckysheet-cell-main").scrollLeft();
+            let mouse = mouseposition(e.pageX, e.pageY);
+            let x = mouse[0] + scrollLeft;
+            let y = mouse[1] + scrollTop;
 
-            $("#luckysheet-modal-dialog-cropping .cropping-content").css({
-                "background-image": "url(" + item.src + ")",
-                "background-size": item.default.width + "px " + item.default.height + "px",
-                "background-position": -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px"
-            })
+            _this.cropChangeXY = [
+                x, 
+                y
+            ];
 
+            setluckysheet_scroll_status(true);
+            
             e.stopPropagation();
         })
 
         //image delete
-        $("#luckysheet-modal-dialog-activeImage").off("mousedown.delete").on("mousedown.delete", ".luckysheet-modal-controll-del", function(e) {
+        $("#luckysheet-image-showBoxs").off("mousedown.delete").on("mousedown.delete", ".luckysheet-modal-controll-del", function(e) {
             _this.removeImgItem();
+            e.stopPropagation();
         })
 
     },
+    configChange: function(type, value){
+        let _this = this;
+
+        let imgItem = _this.images[_this.currentImgId];
+
+        switch(type){
+            case "type":
+                imgItem.type = value;
+                break;
+            case "fixedPos":
+                imgItem.isFixedPos = value;
+
+                let imgItemParam = _this.getImgItemParam(imgItem);
+                let width = imgItemParam.width;
+                let height = imgItemParam.height;
+                let left = imgItemParam.left;
+                let top = imgItemParam.top;
+                let position = imgItemParam.position;
+            
+                $("#luckysheet-modal-dialog-activeImage").show().css({
+                    "width": width,
+                    "height": height,
+                    "left": left,
+                    "top": top,
+                    "position": position
+                });
+                break;
+            case "border-width":
+                imgItem.border.width = value;
+                $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border").css({
+                    "border-width": value,
+                    "left": -value,
+                    "right": -value,
+                    "top": -value,
+                    "bottom": -value
+                });
+                break;
+            case "border-radius":
+                imgItem.border.radius = value;
+                $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border").css("border-radius", value);
+                break;
+            case "border-style":
+                imgItem.border.style = value;
+                $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border").css("border-style", value);
+                break;
+            case "border-color":
+                imgItem.border.color = value;
+                $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-border").css("border-color", value);
+                break;
+        }
+        
+        _this.ref();
+    },
+    getImgItemParam(imgItem){
+        let isFixedPos = imgItem.isFixedPos;
+
+        let width = imgItem.default.width,
+            height = imgItem.default.height,
+            left = imgItem.default.left,
+            top = imgItem.default.top;
+
+        if(imgItem.crop.width != width || imgItem.crop.height != height){
+            width = imgItem.crop.width;
+            height = imgItem.crop.height;
+            left += imgItem.crop.offsetLeft;
+            top += imgItem.crop.offsetTop;
+        }
+
+        let position = 'absolute';
+        if(isFixedPos){
+            position = 'fixed';
+            left = imgItem.fixedLeft + imgItem.crop.offsetLeft;
+            top = imgItem.fixedTop + imgItem.crop.offsetTop;
+        }
+
+        return {
+            width: width,
+            height: height,
+            left: left,
+            top: top,
+            position: position
+        }
+    },
+    cancelActiveImgItem: function(){
+        let _this = this;
+
+        $("#luckysheet-modal-dialog-activeImage").hide();
+        $("#luckysheet-modal-dialog-cropping").hide();
+        $("#luckysheet-modal-dialog-slider-imageCtrl").hide();
+
+        let imgItem = _this.images[_this.currentImgId];
+        let imgItemParam = _this.getImgItemParam(imgItem);
+
+        let width = imgItemParam.width;
+        let height = imgItemParam.height;
+        let left = imgItemParam.left;
+        let top = imgItemParam.top;
+        let position = imgItemParam.position;
+
+        $("#" + _this.currentImgId).show().css({
+            "width": width,
+            "height": height,
+            "left": left,
+            "top": top,
+            "position": position
+        });
+        $("#" + _this.currentImgId + " img").css({
+            "width": imgItem.default.width,
+            "height": imgItem.default.height,
+            "left": -imgItem.crop.offsetLeft,
+            "top": -imgItem.crop.offsetTop
+        });
+        $("#" + _this.currentImgId + " .luckysheet-modal-dialog-border").css({
+            "border-width": imgItem.border.width,
+            "border-style": imgItem.border.style,
+            "border-color": imgItem.border.color,
+            "border-radius": imgItem.border.radius,
+            "left": -imgItem.border.width,
+            "right": -imgItem.border.width,
+            "top": -imgItem.border.width,
+            "bottom": -imgItem.border.width,
+        })
+    },
     addImgItem: function(img) {
         let _this = this;
 
@@ -240,12 +621,19 @@ const imageCtrl = {
         imgItem.crop.width = width;
         imgItem.crop.height = height;
 
+        let scrollTop = $("#luckysheet-cell-main").scrollTop(), 
+            scrollLeft = $("#luckysheet-cell-main").scrollLeft();
+
+        imgItem.fixedLeft = img.left - scrollLeft + Store.rowHeaderWidth;
+        imgItem.fixedTop = img.top - scrollTop + Store.infobarHeight + Store.toolbarHeight + Store.calculatebarHeight + Store.columeHeaderHeight;
+
         let id = _this.generateRandomId();
         let modelHtml = _this.modelHtml(id, imgItem);
 
-        $("#luckysheet-image-showBoxs").append(modelHtml);
+        $("#luckysheet-image-showBoxs .img-list").append(modelHtml);
 
         _this.images[id] = imgItem;
+        _this.ref();
 
         _this.init();
     },
@@ -254,29 +642,229 @@ const imageCtrl = {
 
         _this.move = false;
 
-        let position = $("#luckysheet-modal-dialog-activeImage").position();
-        _this.images[_this.currentImgId].left = position.left;
-        _this.images[_this.currentImgId].top = position.top;
+        let obj = $("#luckysheet-modal-dialog-activeImage")[0];
+        let item = _this.images[_this.currentImgId];
+
+        if(item.isFixedPos){
+            item.fixedLeft = obj.offsetLeft - item.crop.offsetLeft;
+            item.fixedTop = obj.offsetTop - item.crop.offsetTop;
+        }
+        else{
+            item.default.left = obj.offsetLeft - item.crop.offsetLeft;
+            item.default.top = obj.offsetTop - item.crop.offsetTop;
+        }
+
+        _this.ref();
     },
     resizeImgItem: function() {
         let _this = this;
 
         _this.resize = null;
 
-        let position = $("#luckysheet-modal-dialog-activeImage").position();
-        let width = $("#luckysheet-modal-dialog-activeImage").outerWidth();
-        let height = $("#luckysheet-modal-dialog-activeImage").outerHeight();
+        let obj = $("#luckysheet-modal-dialog-activeImage")[0];
+
+        let item = _this.images[_this.currentImgId];
+        let scaleX = obj.clientWidth / item.crop.width;
+        let scaleY = obj.clientHeight / item.crop.height;
+
+        item.default.width = Math.round(item.default.width * scaleX);
+        item.default.height = Math.round(item.default.height * scaleY);
+
+        item.crop.width = Math.round(item.crop.width * scaleX);
+        item.crop.height = Math.round(item.crop.height * scaleY);
+        item.crop.offsetLeft = Math.round(item.crop.offsetLeft * scaleX);
+        item.crop.offsetTop = Math.round(item.crop.offsetTop * scaleY);
+
+        if(item.isFixedPos){
+            item.fixedLeft = obj.offsetLeft;
+            item.fixedTop = obj.offsetTop;
+        }
+        else{
+            item.default.left = obj.offsetLeft - item.crop.offsetLeft;
+            item.default.top = obj.offsetTop - item.crop.offsetTop;
+        }
+
+        _this.ref();
+    },
+    croppingEnter: function() {
+        let _this = this;
+        _this.cropping = true;
+
+        $("#luckysheet-modal-dialog-activeImage").hide();
+        $("#luckysheet-modal-dialog-slider-imageCtrl").hide();
+
+        let item = _this.images[_this.currentImgId];
+        let imgItemParam = _this.getImgItemParam(item);
+
+        let width = imgItemParam.width;
+        let height = imgItemParam.height;
+        let left = imgItemParam.left;
+        let top = imgItemParam.top;
+        let position = imgItemParam.position;
+    
+        $("#luckysheet-modal-dialog-cropping").show().css({
+            "width": width,
+            "height": height,
+            "left": left,
+            "top": top,
+            "position": position
+        });
+
+        $("#luckysheet-modal-dialog-cropping .cropping-mask").css({
+            "width": item.default.width,
+            "height": item.default.height,
+            "background-image": "url(" + item.src + ")",
+            "left": -item.crop.offsetLeft,
+            "top": -item.crop.offsetTop
+        })
+
+        $("#luckysheet-modal-dialog-cropping .cropping-content").css({
+            "background-image": "url(" + item.src + ")",
+            "background-size": item.default.width + "px " + item.default.height + "px",
+            "background-position": -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px"
+        })
 
-        _this.images[_this.currentImgId].width = width;
-        _this.images[_this.currentImgId].height = height;
-        _this.images[_this.currentImgId].left = position.left;
-        _this.images[_this.currentImgId].top = position.top;
+        $("#luckysheet-modal-dialog-cropping .luckysheet-modal-dialog-border").css({
+            "border-width": item.border.width,
+            "border-style": item.border.style,
+            "border-color": item.border.color,
+            "border-radius": item.border.radius,
+            "left": -item.border.width,
+            "right": -item.border.width,
+            "top": -item.border.width,
+            "bottom": -item.border.width,
+        })
+    },
+    croppingExit: function() {
+        let _this = this;
+        _this.cropping = false;
+
+        $("#luckysheet-modal-dialog-cropping").hide();
+
+        let item = _this.images[_this.currentImgId];
+        let imgItemParam = _this.getImgItemParam(item);
+
+        let width = imgItemParam.width;
+        let height = imgItemParam.height;
+        let left = imgItemParam.left;
+        let top = imgItemParam.top;
+        let position = imgItemParam.position;
+
+        $("#luckysheet-modal-dialog-activeImage").show().css({
+            "width": width,
+            "height": height,
+            "left": left,
+            "top": top,
+            "position": position
+        });
+
+        $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({
+            "background-image": "url(" + item.src + ")",
+            "background-size": item.default.width + "px " + item.default.height + "px",
+            "background-position": -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px"
+        })
+    },
+    cropChangeImgItem: function() {
+        let _this = this;
+
+        _this.cropChange = null;
+
+        let item = _this.images[_this.currentImgId];
+        item.crop.width = _this.cropChangeObj.width;
+        item.crop.height = _this.cropChangeObj.height;
+        item.crop.offsetLeft = _this.cropChangeObj.offsetLeft;
+        item.crop.offsetTop = _this.cropChangeObj.offsetTop;
+
+        _this.ref();
     },
     removeImgItem: function() {
         let _this = this;
+        
+        $("#luckysheet-modal-dialog-activeImage").hide();
+        $("#luckysheet-modal-dialog-cropping").hide();
+        $("#luckysheet-modal-dialog-slider-imageCtrl").hide();
+        $("#" + _this.currentImgId).remove();
 
         delete _this.images[_this.currentImgId];
+        _this.currentImgId = null;
+
+        _this.ref();
+    },
+    allImagesShow: function() {
+        let _this = this;
+        
         $("#luckysheet-modal-dialog-activeImage").hide();
+        $("#luckysheet-modal-dialog-cropping").hide();
+        $("#luckysheet-modal-dialog-slider-imageCtrl").hide();
+        $("#luckysheet-image-showBoxs .img-list").empty();
+
+        if(_this.images == null){
+            return;
+        }
+
+        for(let imgId in _this.images){
+            let imgItem = _this.images[imgId];
+            let modelHtml = _this.modelHtml(imgId, imgItem);
+            $("#luckysheet-image-showBoxs .img-list").append(modelHtml);
+        }
+    },
+    moveChangeSize: function(rc, index, changeSize) {
+        let _this = this;
+        let images = $.extend(true, {}, _this.images);
+
+        if(rc == "row"){
+            let row = Store.visibledatarow[index], 
+                row_pre = index - 1 == -1 ? 0 : Store.visibledatarow[index - 1];
+            
+            
+        }
+        else if(rc == "column"){
+            let col = Store.visibledatacolumn[index], 
+                col_pre = index - 1 == -1 ? 0 : Store.visibledatacolumn[index - 1];
+
+            for(let imgId in images){
+                let imgItem = images[imgId];
+                let imgItemParam = _this.getImgItemParam(imgItem);
+                let type = imgItem.type;
+
+                if(type == "1"){
+                    if(imgItemParam.left >= col){
+                        imgItem.default.left = imgItemParam.left + changeSize - item.crop.offsetLeft;
+                    }
+                    else{
+                        if(imgItemParam.left + imgItemParam.width > col){
+                            let scaleX = obj.clientWidth / item.crop.width;
+                        }
+                        else{
+
+                        }
+                    }
+                }
+                else if(type == "2"){
+
+                }
+            }
+        }
+    },
+    ref: function() {
+        let _this = this;
+
+        let file = Store.luckysheetfile[getSheetIndex(Store.currentSheetIndex)];
+        let images = _this.images;
+
+        if (Store.clearjfundo) {
+            Store.jfundo = [];
+
+            Store.jfredo.push({
+                "type": "imageCtrl",
+                "sheetIndex": Store.currentSheetIndex,
+                "images": file.images == null ? null : $.extend(true, {}, file.images),
+                "curImages": images
+            });
+        }
+
+        file.images = $.extend(true, {}, images);
+        server.saveParam("all", Store.currentSheetIndex, file.images, { "k": "images" });
     },
 }
 
diff --git a/src/controllers/rowColumnOperation.js b/src/controllers/rowColumnOperation.js
index f36900e..f8b039c 100644
--- a/src/controllers/rowColumnOperation.js
+++ b/src/controllers/rowColumnOperation.js
@@ -1,6 +1,7 @@
 
 import pivotTable from './pivotTable';
 import luckysheetPostil from './postil';
+import imageCtrl from './imageCtrl';
 import menuButton from './menuButton';
 import server from './server';
 import { selectHightlightShow, luckysheet_count_show,selectHelpboxFill } from './select';
@@ -42,6 +43,11 @@ export function rowColumnOperationInitial(){
         //有批注在编辑时
         luckysheetPostil.removeActivePs();
 
+        //图片 active/cropping
+        if($("#luckysheet-modal-dialog-activeImage").is(":visible") || $("#luckysheet-modal-dialog-cropping").is(":visible")){
+            imageCtrl.cancelActiveImgItem();
+        }
+
         let mouse = mouseposition(event.pageX, event.pageY);
         let y = mouse[1] + $("#luckysheet-rows-h").scrollTop();
 
@@ -423,6 +429,11 @@ export function rowColumnOperationInitial(){
         //有批注在编辑时
         luckysheetPostil.removeActivePs();
 
+        //图片 active/cropping
+        if($("#luckysheet-modal-dialog-activeImage").is(":visible") || $("#luckysheet-modal-dialog-cropping").is(":visible")){
+            imageCtrl.cancelActiveImgItem();
+        }
+
         let mouse = mouseposition(event.pageX, event.pageY);
         let x = mouse[0] + $(this).scrollLeft();
 
@@ -810,6 +821,11 @@ export function rowColumnOperationInitial(){
     $("#luckysheet-rows-change-size").mousedown(function (event) {
         //有批注在编辑时
         luckysheetPostil.removeActivePs();
+
+        //图片 active/cropping
+        if($("#luckysheet-modal-dialog-activeImage").is(":visible") || $("#luckysheet-modal-dialog-cropping").is(":visible")){
+            imageCtrl.cancelActiveImgItem();
+        }
         
         $("#luckysheet-input-box").hide();
         $("#luckysheet-rows-change-size").css({ "opacity": 1 });
@@ -850,6 +866,11 @@ export function rowColumnOperationInitial(){
         //有批注在编辑时
         luckysheetPostil.removeActivePs();
 
+        //图片 active/cropping
+        if($("#luckysheet-modal-dialog-activeImage").is(":visible") || $("#luckysheet-modal-dialog-cropping").is(":visible")){
+            imageCtrl.cancelActiveImgItem();
+        }
+
         $("#luckysheet-input-box").hide();
         $("#luckysheet-cols-change-size").css({ "opacity": 1 });
 
diff --git a/src/controllers/sheetmanage.js b/src/controllers/sheetmanage.js
index 995a77a..15f6b08 100644
--- a/src/controllers/sheetmanage.js
+++ b/src/controllers/sheetmanage.js
@@ -17,6 +17,7 @@ import luckysheetConfigsetting from './luckysheetConfigsetting';
 import pivotTable from './pivotTable';
 import luckysheetsizeauto from './resize';
 import luckysheetPostil from './postil';
+import imageCtrl from './imageCtrl';
 import luckysheetFreezen from './freezen';
 import { createFilterOptions, labelFilterOptionState } from './filter';
 import { selectHightlightShow, selectionCopyShow } from './select';
@@ -861,7 +862,12 @@ const sheetmanage = {
         formula.execFunctionGroupData = null;
         window.luckysheet_getcelldata_cache = null;
 
+        //批注
         luckysheetPostil.buildAllPs(Store.flowdata);
+        
+        //图片
+        imageCtrl.images = file.images;
+        imageCtrl.allImagesShow();
 
         this.sheetParamRestore(file, Store.flowdata);
 
diff --git a/src/css/luckysheet-core.css b/src/css/luckysheet-core.css
index 777039e..bc9d4f2 100644
--- a/src/css/luckysheet-core.css
+++ b/src/css/luckysheet-core.css
@@ -2922,7 +2922,7 @@ fieldset[disabled] a.btn {
     display: none;
     left: 0px;
     top: 0px;
-    z-index: 1004;
+    z-index: 1010;
 }
 
 
@@ -6188,7 +6188,7 @@ fieldset[disabled] a.btn {
     display: none;
     left: 0px;
     top: 0px;
-    z-index: 1004;
+    z-index: 1010;
 }
 
 
@@ -6454,6 +6454,7 @@ fieldset[disabled] a.btn {
     left: 0;
     bottom: 0;
     right: 0;
+    pointer-events: all;
 }
 #luckysheet-modal-dialog-cropping .resize-item{
     width: 0;
@@ -6614,4 +6615,77 @@ fieldset[disabled] a.btn {
     border-left: 2px solid #fff;
     border-right: 2px solid #fff;
     border-top: 2px solid #fff;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .luckysheet-modal-dialog-slider-content{
+    background-color: #fff;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box{
+    border-bottom: 1px solid #E1E4E8;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .slider-box-title{
+    padding: 10px 20px;
+    font-weight: 600;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .slider-box-radios{
+    padding: 10px 30px;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .radio-item{
+    margin-bottom: 10px;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .radio-item:last-child{
+    margin-bottom: 0;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .radio-item input{
+    vertical-align: sub;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .slider-box-checkbox{
+    padding: 10px 30px;
+    border-top: 1px solid #E1E4E8;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .slider-box-checkbox input{
+    vertical-align: middle;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .slider-box-borderConfig{
+    padding: 10px 30px;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .border-item{
+    margin-bottom: 10px;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .border-item:last-child{
+    margin-bottom: 0;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .border-item label{
+    display: inline-block;
+    width: 40px;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .border-item input{
+    width: 130px;
+    padding: 5px;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .border-item .imgItemBorderColor{
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    padding: 2px;
+    border: 1px solid #E1E4E8;
+    vertical-align: middle;
+    cursor: pointer;
+}
+#luckysheet-modal-dialog-slider-imageCtrl .slider-box .border-item .imgItemBorderColor span{
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+#luckysheet-imageCtrl-colorSelect-dialog .currenColor{
+    font-size: 12px;
+    margin-bottom: 5px;
+}
+#luckysheet-imageCtrl-colorSelect-dialog .currenColor span{
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: solid 1px #d0d0d0;
+    margin-left: 5px;
+    margin-bottom: -5px;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/locale/en.js b/src/locale/en.js
index 6897422..fb0dd08 100644
--- a/src/locale/en.js
+++ b/src/locale/en.js
@@ -45,6 +45,7 @@ export default {
         chart: 'Chart',
         screenshot: 'Screenshot',
         splitColumn: 'Split text',
+        insertImage: 'Insert image',
 
         clearText:"Clear color",
         noColorSelectedText:"No color is selected",
@@ -582,6 +583,24 @@ export default {
         tipNoMulti:"Cannot perform this operation on multiple selection areas, please select a single area and try again",
         tipNoMultiColumn:"Only one column of data can be converted at a time. The selected area can have multiple rows but not multiple columns. Please try again after selecting a single column range",
     },
+    imageText:{
+        imageSetting: 'Image setting',
+        close: 'Close',
+        conventional: 'Conventional',
+        moveCell1: 'Move and resize cells',
+        moveCell2: 'Move and do not resize the cell',
+        moveCell3: 'Do not move and resize the cell',
+        fixedPos: 'Fixed position',
+        border: 'Border',
+        width: 'Width',
+        radius: 'Radius',
+        style: 'Style',
+        solid: 'Solid',
+        dashed: 'Dashed',
+        dotted: 'Dotted',
+        double: 'Double',
+        color: 'Color',
+    },
     punctuation:{
         "tab":"Tab",
         "semicolon":"semicolon",
diff --git a/src/locale/zh.js b/src/locale/zh.js
index 6efde0d..fd18cb7 100644
--- a/src/locale/zh.js
+++ b/src/locale/zh.js
@@ -45,6 +45,7 @@ export default {
         chart: '图表',
         screenshot: '截图',
         splitColumn: '分列',
+        insertImage: '插入图片',
 
         clearText:"清除颜色选择",
         noColorSelectedText:"没有颜色被选择",
@@ -598,6 +599,24 @@ export default {
         tipNoMulti:"不能对多重选择区域执行此操作，请选择单个区域，然后再试",
         tipNoMultiColumn:"一次只能转换一列数据，选定区域可以有多行，但不能有多列，请在选定单列区域以后再试",
     },
+    imageText:{
+        imageSetting: '图片设置',
+        close: '关闭',
+        conventional: '常规',
+        moveCell1: '移动并调整单元格大小',
+        moveCell2: '移动并且不调整单元格的大小',
+        moveCell3: '不要移动单元格并调整其大小',
+        fixedPos: '固定位置',
+        border: '边框',
+        width: '宽度',
+        radius: '半径',
+        style: '样式',
+        solid: '实线',
+        dashed: '虚线',
+        dotted: '点状',
+        double: '双线',
+        color: '颜色',
+    },
     punctuation:{
         "tab":"Tab 键",
         "semicolon":"分号",