Browse Source

fix: 修复图片在裁剪等情况下的加载显示问题

master
cdswyda 4 years ago
parent
commit
4b57f95208
  1. 7
      src/controllers/handler.js
  2. 19
      src/controllers/imageCtrl.js

7
src/controllers/handler.js

@ -3169,16 +3169,19 @@ export default function luckysheetHandler() {
"top": top "top": top
}); });
let imageUrlHandle = Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle'];
let imgSrc = typeof imageUrlHandle === 'function' ? imageUrlHandle(imgItem.src) : imgItem.src;
$("#luckysheet-modal-dialog-cropping .cropping-mask").css({ $("#luckysheet-modal-dialog-cropping .cropping-mask").css({
"width": imgItem.default.width, "width": imgItem.default.width,
"height": imgItem.default.height, "height": imgItem.default.height,
"background-image": "url(" + imgItem.src + ")", "background-image": "url(" + imgSrc + ")",
"left": -offsetLeft, "left": -offsetLeft,
"top": -offsetTop "top": -offsetTop
}) })
$("#luckysheet-modal-dialog-cropping .cropping-content").css({ $("#luckysheet-modal-dialog-cropping .cropping-content").css({
"background-image": "url(" + imgItem.src + ")", "background-image": "url(" + imgSrc + ")",
"background-size": imgItem.default.width + "px " + imgItem.default.height + "px", "background-size": imgItem.default.width + "px " + imgItem.default.height + "px",
"background-position": -offsetLeft + "px " + -offsetTop + "px" "background-position": -offsetLeft + "px " + -offsetTop + "px"
}) })

19
src/controllers/imageCtrl.js

@ -97,7 +97,8 @@ const imageCtrl = {
_this.addImgItem(img); _this.addImgItem(img);
} }
image.src = src; let imageUrlHandle = Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle'];
image.src = typeof imageUrlHandle === 'function' ? imageUrlHandle(src) : src;
}, },
generateRandomId: function(prefix) { generateRandomId: function(prefix) {
if(prefix == null){ if(prefix == null){
@ -773,16 +774,19 @@ const imageCtrl = {
"position": position "position": position
}); });
let imageUrlHandle = Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle'];
let imgSrc = typeof imageUrlHandle === 'function' ? imageUrlHandle(item.src) : item.src;
$("#luckysheet-modal-dialog-cropping .cropping-mask").css({ $("#luckysheet-modal-dialog-cropping .cropping-mask").css({
"width": item.default.width, "width": item.default.width,
"height": item.default.height, "height": item.default.height,
"background-image": "url(" + item.src + ")", "background-image": "url(" + imgSrc + ")",
"left": -item.crop.offsetLeft, "left": -item.crop.offsetLeft,
"top": -item.crop.offsetTop "top": -item.crop.offsetTop
}) })
$("#luckysheet-modal-dialog-cropping .cropping-content").css({ $("#luckysheet-modal-dialog-cropping .cropping-content").css({
"background-image": "url(" + item.src + ")", "background-image": "url(" + imgSrc + ")",
"background-size": item.default.width + "px " + item.default.height + "px", "background-size": item.default.width + "px " + item.default.height + "px",
"background-position": -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px" "background-position": -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px"
}) })
@ -820,9 +824,11 @@ const imageCtrl = {
"top": top, "top": top,
"position": position "position": position
}); });
let imageUrlHandle = Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle'];
let imgSrc = typeof imageUrlHandle === 'function' ? imageUrlHandle(item.src) : item.src;
$("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({ $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({
"background-image": "url(" + item.src + ")", "background-image": "url(" + imgSrc + ")",
"background-size": item.default.width + "px " + item.default.height + "px", "background-size": item.default.width + "px " + item.default.height + "px",
"background-position": -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px" "background-position": -item.crop.offsetLeft + "px " + -item.crop.offsetTop + "px"
}) })
@ -868,8 +874,11 @@ const imageCtrl = {
"position": position "position": position
}); });
let imageUrlHandle = Store.toJsonOptions && Store.toJsonOptions['imageUrlHandle'];
let imgSrc = typeof imageUrlHandle === 'function' ? imageUrlHandle(imgItem.src) : imgItem.src;
$("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({ $("#luckysheet-modal-dialog-activeImage .luckysheet-modal-dialog-content").css({
"background-image": "url(" + imgItem.src + ")", "background-image": "url(" + imgSrc + ")",
"background-size": imgItem.default.width + "px " + imgItem.default.height + "px", "background-size": imgItem.default.width + "px " + imgItem.default.height + "px",
"background-position": -imgItem.crop.offsetLeft + "px " + -imgItem.crop.offsetTop + "px" "background-position": -imgItem.crop.offsetLeft + "px " + -imgItem.crop.offsetTop + "px"
}) })

Loading…
Cancel
Save