Browse Source

feat(api add): image

insertImage deleteImage getImageOption

fix #270
master
wpxp123456 5 years ago
parent
commit
16131b2776
  1. 50
      docs/zh/guide/api.md
  2. 5
      src/controllers/imageCtrl.js
  3. 1
      src/controllers/sheetmanage.js
  4. 287
      src/global/api.js

50
docs/zh/guide/api.md

@ -2437,6 +2437,48 @@ Luckysheet针对常用的数据操作需求,开放了主要功能的API,开
------------
## 图片
### insertImage(src, [setting])
- **参数**
- {String} [src]: 图片src
- {PlainObject} [setting]: 可选参数
+ {Number} [order]: 工作表下标;默认值为当前工作表下标
+ {Number} [rowIndex]: 要插入图片的单元格行下标;默认为当前选区聚焦单元格行下标 || 0
+ {Number} [colIndex]: 要插入图片的单元格列下标;默认为当前选区聚焦单元格列下标 || 0
+ {Function} [success]: 操作结束的回调函数
- **说明**
在指定的工作表中指定单元格位置插入图片
### deleteImage([setting])
- **参数**
- {PlainObject} [setting]: 可选参数
+ {Number} [order]: 工作表下标;默认值为当前工作表下标
+ {String | Array} [idList]: 要删除图片的id集合,也可为字符串`"all"`,all为所有的字符串;默认为`"all"`
+ {Function} [success]: 操作结束的回调函数
- **说明**
删除指定工作表中的图片
### getImageOption([setting])
- **参数**
- {PlainObject} [setting]: 可选参数
+ {Number} [order]: 工作表下标;默认值为当前工作表下标
+ {Function} [success]: 操作结束的回调函数
- **说明**
获取指定工作表的图片配置
## 工作表保护
@ -2500,14 +2542,14 @@ Luckysheet针对常用的数据操作需求,开放了主要功能的API,开
### changLang([lang])
- **说明**
传入目标语言,切换到对应的语言界面
- **参数**
+ {String} [lang]: 语言类型;暂支持`"zh"`、`"en"`、`"es"`;默认为`"zh"`;
- **说明**
传入目标语言,切换到对应的语言界面
### getRangeByTxt([txt])
- **说明**

5
src/controllers/imageCtrl.js

@ -52,8 +52,9 @@ const imageCtrl = {
inserImg: function(src){
let _this = this;
let rowIndex = Store.luckysheet_select_save[0].row_focus || 0;
let colIndex = Store.luckysheet_select_save[0].column_focus || 0;
let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1];
let rowIndex = last.row_focus || 0;
let colIndex = last.column_focus || 0;
let left = colIndex == 0 ? 0 : Store.visibledatacolumn[colIndex - 1];
let top = rowIndex == 0 ? 0 : Store.visibledatarow[rowIndex - 1];

1
src/controllers/sheetmanage.js

@ -960,6 +960,7 @@ const sheetmanage = {
luckysheetPostil.buildAllPs(Store.flowdata);
//图片
imageCtrl.currentImgId = null;
imageCtrl.images = file.images;
imageCtrl.allImagesShow();
imageCtrl.init();

287
src/global/api.js

@ -37,6 +37,7 @@ import { createFilterOptions } from '../controllers/filter';
import controlHistory from '../controllers/controlHistory';
import { zoomRefreshView, zoomNumberDomBind } from '../controllers/zoom';
import dataVerificationCtrl from "../controllers/dataVerificationCtrl";
import imageCtrl from '../controllers/imageCtrl';
import dayjs from "dayjs";
import {getRangetxt } from '../methods/get';
const IDCardReg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i;
@ -5865,6 +5866,292 @@ export function deleteDataVerification(options = {}) {
}
/**
* 在指定的工作表中指定单元格位置插入图片
* @param {String} src 图片src
* @param {Object} options 可选参数
* @param {Number} options.order 工作表下标默认值为当前工作表下标
* @param {Number} options.rowIndex 要插入图片的单元格行下标默认为0
* @param {Number} options.colIndex 要插入图片的单元格列下标默认为0
* @param {Function} options.success 操作结束的回调函数
*/
export function insertImage(src, options = {}){
let {
order = getSheetIndex(Store.currentSheetIndex),
rowIndex,
colIndex,
success
} = {...options}
let file = Store.luckysheetfile[order];
if(file == null){
return tooltip.info("The order parameter is invalid.", "");
}
if(file.index == Store.currentSheetIndex){
let last = Store.luckysheet_select_save[Store.luckysheet_select_save.length - 1];
if(rowIndex == null){
rowIndex = last.row_focus || 0;
}
if(rowIndex < 0){
rowIndex = 0;
}
if(rowIndex > Store.visibledatarow.length){
rowIndex = Store.visibledatarow.length;
}
if(colIndex == null){
colIndex = last.column_focus || 0;
}
if(colIndex < 0){
colIndex = 0;
}
if(colIndex > Store.visibledatacolumn.length){
colIndex = Store.visibledatacolumn.length;
}
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);
if (success && typeof success === 'function') {
success();
}
}
image.src = src;
}
else {
let images = file.images || {};
let config = file.config;
let zoomRatio = file.zoomRatio || 1;
let rowheight = file.row;
let visibledatarow = file.visibledatarow || [];
if(visibledatarow.length === 0){
let rh_height = 0;
for (let r = 0; r < rowheight; r++) {
let rowlen = Store.defaultrowlen;
if (config["rowlen"] != null && config["rowlen"][r] != null) {
rowlen = config["rowlen"][r];
}
if (config["rowhidden"] != null && config["rowhidden"][r] != null) {
visibledatarow.push(rh_height);
continue;
}
rh_height += Math.round((rowlen + 1) * zoomRatio);
visibledatarow.push(rh_height); //行的临时长度分布
}
}
let colwidth = file.column;
let visibledatacolumn = file.visibledatacolumn || [];
if(visibledatacolumn.length === 0){
let ch_width = 0;
for (let c = 0; c < colwidth; c++) {
let firstcolumnlen = Store.defaultcollen;
if (config["columnlen"] != null && config["columnlen"][c] != null) {
firstcolumnlen = config["columnlen"][c];
}
if(config["colhidden"] != null && config["colhidden"][c] != null){
visibledatacolumn.push(ch_width);
continue;
}
ch_width += Math.round((firstcolumnlen + 1)*zoomRatio);
visibledatacolumn.push(ch_width);//列的临时长度分布
}
}
if(rowIndex == null){
rowIndex = 0;
}
if(rowIndex < 0){
rowIndex = 0;
}
if(rowIndex > visibledatarow.length){
rowIndex = visibledatarow.length;
}
if(colIndex == null){
colIndex = 0;
}
if(colIndex < 0){
colIndex = 0;
}
if(colIndex > visibledatacolumn.length){
colIndex = visibledatacolumn.length;
}
let left = colIndex == 0 ? 0 : visibledatacolumn[colIndex - 1];
let top = rowIndex == 0 ? 0 : visibledatarow[rowIndex - 1];
let image = new Image();
image.onload = function(){
let img = {
src: src,
left: left,
top: top,
originWidth: image.width,
originHeight: image.height
}
let width, height;
let max = 400;
if(img.originHeight < img.originWidth){
height = Math.round(img.originHeight * (max / img.originWidth));
width = max;
}
else{
width = Math.round(img.originWidth * (max / img.originHeight));
height = max;
}
let imgItem = $.extend(true, {}, imageCtrl.imgItem);
imgItem.src = img.src;
imgItem.originWidth = img.originWidth;
imgItem.originHeight = img.originHeight;
imgItem.default.width = width;
imgItem.default.height = height;
imgItem.default.left = img.left;
imgItem.default.top = img.top;
imgItem.crop.width = width;
imgItem.crop.height = height;
let id = imageCtrl.generateRandomId();
images[id] = imgItem;
file.images = images;
if (success && typeof success === 'function') {
success();
}
}
image.src = src;
}
}
/**
* 删除指定工作表中的图片
* @param {Object} options 可选参数
* @param {Number} options.order 工作表下标默认值为当前工作表下标
* @param {String | Array} options.idList 要删除图片的id集合也可为字符串`"all"`all为所有的字符串默认为`"all"`
* @param {Function} options.success 操作结束的回调函数
*/
export function deleteImage(options = {}){
let {
order = getSheetIndex(Store.currentSheetIndex),
idList = 'all',
success
} = {...options}
let file = Store.luckysheetfile[order];
if(file == null){
return tooltip.info("The order parameter is invalid.", "");
}
let images = file.images;
if(images == null){
return tooltip.info("The worksheet has no pictures to delete.", "");
}
if(idList != 'all' && getObjType(idList) != 'array'){
return tooltip.info("The idList parameter is invalid.", "");
}
if(getObjType(idList) == 'array'){
idList.forEach(item => {
delete images[item];
})
}
else {
images = null;
}
file.images = images;
if(file.index == Store.currentSheetIndex){
if(imageCtrl.currentImgId != null && (idList == 'all' || idList.includes(imageCtrl.currentImgId))){
$("#luckysheet-modal-dialog-activeImage").hide();
$("#luckysheet-modal-dialog-cropping").hide();
$("#luckysheet-modal-dialog-slider-imageCtrl").hide();
}
imageCtrl.images = images;
imageCtrl.allImagesShow();
imageCtrl.init();
}
if (success && typeof success === 'function') {
success();
}
}
/**
* 获取指定工作表的图片配置
* @param {Object} options 可选参数
* @param {Number} options.order 工作表下标默认值为当前工作表下标
* @param {Function} options.success 操作结束的回调函数
*/
export function getImageOption(options = {}){
let {
order = getSheetIndex(Store.currentSheetIndex),
success
} = {...options}
let file = Store.luckysheetfile[order];
if(file == null){
return tooltip.info("The order parameter is invalid.", "");
}
setTimeout(function(){
if (success && typeof success === 'function') {
success();
}
}, 1)
return file.images;
}
/**
* data => celldata data二维数组数据转化成 {r, c, v}格式一维数组
*

Loading…
Cancel
Save