@shijiu/jsview-vue 2.2.128 → 2.2.373

package/utils/JsViewVueTools/JsvDynamicCssStyle.js

@@ -3,6 +3,8 @@
  */
 
 /*!
+ * @file
+ *
  * 【模块 export 内容】
  * CssStyleSheet：面向对象类，CSS rule的操作器，用于添加和删除CssStyle，服务于JsvStyleClass
  *      接口：

package/utils/JsViewVueTools/JsvDynamicKeyFrames.ts

@@ -3,6 +3,8 @@
  */
 
 /*!
+ * @file
+ *
  * 【模块 export 内容】
  * getKeyFramesGroup: 函数，获取KeyFrame操作类 KeyFrameStyleSheet
  * KeyFrameStyleSheet：面向对象类，KeyFrames CSS rule的操作类，用于添加和删除KeyFrame

package/utils/JsViewVueTools/JsvImpactTracer.js

@@ -10,6 +10,8 @@
  */
 
 /*!
+ * @file
+ *
  * 【模块 export 内容】
  * createImpactTracer: 函数，创建碰撞跟踪对象
  * createImpactCallback: 函数，创建碰撞发生后的回调函数

package/utils/JsViewVueTools/JsvPreDownloader.ts

@@ -1,5 +1,6 @@
 /*! 
- *  JsvPreDownloader 通用下载器，可以在不同的环境中进行资源下载操作。
+ * @file JsvPreDownloader 通用下载器，可以在不同的环境中进行资源下载操作。
+ *
  *       JsvPreDownloader.download:实例方法，根据传入参数来下载资源。支持单个url或者url列表，返回Promise对象。
  *        参数:
  *        url {string | Array}:  (必填)图片url
@@ -74,7 +75,7 @@ abstract class JsvPreDownloaderBase {
           } else {
             this.downloadInner(url[i].url, url[i].netSetting, !!url[i].isImage)
               .then(
-                (info) => {
+                (info: any) => {
                   downloadResult[i] = {
                     succeed: true,
                     info: info,
@@ -82,7 +83,7 @@ abstract class JsvPreDownloaderBase {
                   workNumber += 1
                   check();
                 },
-                (errorInfo) => {
+                (errorInfo: any) => {
                   downloadResult[i] = {
                     succeed: false,
                     info: errorInfo,
@@ -119,7 +120,7 @@ class JsvPreDownloaderInJsView extends JsvPreDownloaderBase {
           netSetting,
           fileType: isImage ? "image" : "notImage",
         };
-        (window as any).jJsvInnerUtils.downloadResource(url, JSON.stringify(setting), (info) => {
+        (window as any).jJsvInnerUtils.downloadResource(url, JSON.stringify(setting), (info: any) => {
           try {
             const obj: CallbackInfo = JSON.parse(info);
             const result = JSON.parse(obj.info);

package/utils/JsViewVueTools/JsvRefTaker.js

@@ -1,7 +1,6 @@
 
 /*!
- *******************
- * JsvRefTaker模块
+ * @file JsvRefTaker模块
  * 
  * 用于解决 script setup 写法，不容易通过 this.$ref.xxxx 拿到子模块的句柄，
  * 但使用ref(null)的方式构筑的深度reactive对象又会严重影响element的内部处理性能的问题

package/utils/JsViewVueTools/JsvRuntimeBridge.js

@@ -1,3 +1,7 @@
+/*! 
+  @file JsvRuntimeBridge.js
+*/
+
 let feature_supports = null;
 
 let direct_call_map = {};
@@ -540,6 +544,62 @@ function unRegisterNetStateListener(callback){
     return direct_call("unRegisterNetStateListener", callback);
 }
 
+function getSnId(){
+    return direct_call("getSnId");
+}
+
+function getEmmcCid(){
+    return direct_call("getEmmcCid");
+}
+
+/**
+ * android ContentProvider 查询接口，参数与返回值与官方接口相同。详情查看官方的 android.content.ContentProvider.query 接口
+ * @param {string} uri 
+ * @param {string} projection 
+ * @param {string} selection 
+ * @param {string[]} selectionArgs 
+ * @param {string} sortOrder 
+ * @returns 
+ */
+function providerQuery(uri,projection,selection,selectionArgs,sortOrder){
+    let jsonProjection = projection?JSON.stringify(projection):null
+    let jsonSelectionArgs = selectionArgs?JSON.stringify(selectionArgs):null
+    return direct_call("providerQuery",uri,jsonProjection,selection,jsonSelectionArgs,sortOrder);
+}
+
+/**
+ * android ContentProvider 插入接口，参数与返回值与官方接口相同。详情查看官方的 android.content.ContentProvider.insert 接口
+ * @param {string} uri 
+ * @param {object} contentValue 
+ * @returns 
+ */
+function providerInsert(uri,contentValue){
+    return direct_call("providerInsert",uri,contentValue?JSON.stringify(contentValue):null)
+}
+
+/**
+ * android ContentProvider 删除接口，参数与返回值与官方接口相同。详情查看官方的 android.content.ContentProvider.delete 接口
+ * @param {string} uri 
+ * @param {string} selection 
+ * @param {string[]} selectionArgs 
+ * @returns 
+ */
+function providerDelete(uri,selection,selectionArgs){
+    return direct_call("providerDelete",uri,selection,selectionArgs?JSON.stringify(selectionArgs):null)
+}
+
+/**
+ * android ContentProvider 更新接口，参数与返回值与官方接口相同。详情查看官方的 android.content.ContentProvider.update 接口
+ * @param {string} uri 
+ * @param {object} contentValue 
+ * @param {string} selection 
+ * @param {string[]} selectionArgs 
+ * @returns 
+ */
+function providerUpdate(uri,contentValue,selection,selectionArgs){
+    return direct_call("providerUpdate",uri,contentValue?JSON.stringify(contentValue):null,selection,selectionArgs?JSON.stringify(selectionArgs):null)
+}
+
 
 // 显示声明，可以提高执行速度和利用上编辑器的成员名提示功能
 const bridge = {
@@ -579,7 +639,13 @@ const bridge = {
     preDownloadSdk,
     getNetworkTypeStatusImmediate,
     registerNetStateListener,
-    unRegisterNetStateListener
+    unRegisterNetStateListener,
+    getSnId,
+    getEmmcCid,
+    providerQuery,
+    providerInsert,
+    providerDelete,
+    providerUpdate
 };
 
 export {

package/utils/JsViewVueTools/JsvStyleClass.js

@@ -3,6 +3,8 @@
  */
 
 /*!
+ * @file
+ *
  * 【模块 export 内容】
  * JsvStyleClass：面向对象类，定义一组可以复用的Style，模拟css中的.class的概念
  *      功能函数：(参数说明见函数本体)

package/utils/JsViewVueTools/JsvStyleSheetsDeclarer.js

@@ -1,5 +1,7 @@
 
 /*!
+ * @file
+ *
  * 【模块 export 内容】
  * JsvStyleSheetsDeclarer: 动态和删除全局的 CssStyle
  *      接口：

package/utils/JsViewVueTools/JsvTextTools.ts

@@ -0,0 +1,223 @@
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define.mjs";
+
+declare interface FontStyleDefine {
+  fontFamily: string,
+  fontSize: number,
+  fontStyle: string,
+  fontWeight: string
+}
+
+/*
+ * @Author: ChenChanghua
+ * @Date: 2022-11-29 14:26:20
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-02-02 10:20:45
+ * @Description: file content
+ */
+
+/*!
+ * 获取文字宽度, 一般用于测量文字宽度
+ *
+ * @param {string} text   文字
+ * @param {object} style  文字的css style
+ * @return {int} 文字宽度
+ **/
+const getTextWidth = (text: string, style: FontStyleDefine) => {
+  const textParams = {
+    str: text ? text : "",
+    font: style.fontFamily ? style.fontFamily : Forge.TextUtils.sDefaultFont,
+    size: style.fontSize ? style.fontSize : Forge.TextUtils.sDefaultFontSize,
+    italic: style.fontStyle === "italic" ? "italic" : "",
+    bold: style.fontWeight === "bold" ? "bold" : "",
+  };
+  return (window as any).PlatformUtils.GetTextWidth(textParams);
+};
+
+/*!
+ * @typedef {object} SliceInfo
+ * @property {int} start - 文字起始index
+ * @property {int} end - 文字结束index
+ * @property {int} width - 文字宽度
+ */
+
+/*!
+ * @typedef {object} TextInfo
+ * @property {int} totalWidth - 文字整体宽度
+ * @property {Array<SliceInfo>} sliceInfo - 每段文字的信息
+ */
+
+/*!
+ * 单行超长文字会切成多个div拼接, 由于jsview坐标的取整机制, 拼接出的width和文字width会产生误差, 此接口会返回拼接后的width
+ *
+ * @param {string} text   文字
+ * @param {object} style  文字的css style
+ * @return {TextInfo} 文字信息
+ **/
+const getOneLineTextDrawWidth = (text: string, style: FontStyleDefine) => {
+  if (text && typeof text != "string") {
+    text = "" + text; // 规避text为非字符串导致接口调用错误的问题
+  }
+  const info: Array<any> = (window as any).PlatformUtils.GetOneLineTextDrawWidth(
+    text ?? "",
+    style.fontFamily ?? Forge.TextUtils.sDefaultFont,
+    style.fontSize ?? Forge.TextUtils.sDefaultFontSize,
+    style.fontStyle === "italic" ? "italic" : "",
+    style.fontWeight === "bold" ? "bold" : "");
+  const result: {
+    totalWidth: number,
+    sliceInfo: Array<any>
+  } = {
+    totalWidth: info[0],
+    sliceInfo: [],
+  }
+  for (let i = 1; i < info.length; i += 3) {
+    result.sliceInfo.push({
+      start: info[i],
+      end: info[i + 1],
+      width: info[2 + 2],
+    })
+  }
+  return result;
+}
+
+const isRtl = (str: string) => {
+  //arabic
+  for (let i = 0; i < str.length; i++) {
+    let c = str.charCodeAt(i);
+    if (c != 32) {
+      if (c >= 0x0600 && c <= 0x06ff) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  }
+  return false;
+}
+
+
+
+declare interface RectSize {
+  width: number,
+  height: number,
+}
+
+declare interface PostionDefine {
+  x: number,
+  y: number
+}
+
+/**
+ * 获取光标的位置
+ *
+ * @public
+ * @func GetCursorPosition
+ * @memberof Forge.TextUtils
+ * @params {string} str	文字字符串
+ * @params {Forge.RectArea} max_rect
+ * @param {PackedFontParams} font_params	文本描述符(来源自 PackFontParams 函数)
+ * @param {PackedTextAttrs} text_attr  (来源自 PackTextAttrs 函数)
+ * @param {int} line_height
+ * @param {int} pos_x   光标的偏移
+ * @return {Object}	 光标的所在位置{x:0,y:0}
+ **/
+function GetCursorPosition(
+  str: string,
+  max_rect: RectSize,
+  font_params: PackedFontParams,
+  text_attr: PackedTextAttrs,
+  line_height: number,
+  cursor_offset: number
+): PostionDefine {
+  let api = (window as any).PlatformUtils?.GetCursorPosition.bind((window as any).PlatformUtils);
+
+  if (api) {
+    return api(str, max_rect, font_params, text_attr, line_height, cursor_offset);
+  } else {
+    return { x: 0, y: 0 }
+  }
+}
+
+class PackedFontParams {
+  public font?: string;  // font family name
+  public size?: number;  // font size
+  public bold?: string;  // ""/"bold"
+  public italic?: string; // ""/"italic"
+  public alignment?: string; // left / right /center
+  public textColour?: string;
+}
+
+/**k
+   * 创建文本描述符
+   *
+   * @public
+   * @func PackFontParam
+   * @param {string} font_family 			CSS字体名字，如“黑体 欧文”（支持多字体设置）
+   * @param {int} font_size
+   * @param {boolean} italic			是否为斜体
+   * @param {boolean} bold			是否加粗
+   * @param {string} alignment 		水平对齐方式，支持("left", "middle", "right", "justify")
+   * @param {string} text_color		文字颜色(format "#FFFFFF")
+   **/
+function PackFontParams(
+  font_family: string | null,
+  font_size: number,
+  bold: boolean,
+  italic: boolean,
+  alignment: string,
+  text_color: string | null): PackedFontParams {
+
+  let packed = new PackedFontParams();
+
+  if (!font_size) font_size = Forge.TextUtils.sDefaultFontSize;
+  if (!font_family) font_family = Forge.TextUtils.sDefaultFont;
+
+  packed.size = font_size;
+  packed.font = font_family!;
+  packed.italic = italic ? "italic" : "";
+  packed.bold = bold ? "bold" : "";
+
+  packed.alignment = (alignment && alignment.length > 0) ? alignment : "left";
+  packed.textColour = text_color ? text_color : Forge.TextUtils.sDefaultFontColor;
+
+  return packed;
+}
+
+declare interface PackedTextAttrs {
+  text_overflow: string;
+  word_wrap: string;
+}
+
+/**
+   * 创建文本区域描述符
+   *
+   * @public
+   * @func PackTextAttrs
+   * @param {String} text_overflow 超过描画边界时的处理方式：<br>
+   *     							"none" 按照文字宽度描画<br>
+   *     							"clip" 超出本分不显示（默认）<br>
+   *     							"ellipsis" 如果超出，则末尾显示“...”
+   *     							其余字符 当文字超出时，用此字符替换“...”的位置
+   * @param {String} word_wrap  设置自然换行规则<br>
+   *     							"none":“不折行”<br>
+   *     							"normal"：折行时，尽量不切断单词（仅支持英文单词）<br>
+   *     							"break_word"：不去识别单词，到达边缘就折行（执行效率高）
+   * @return {PackedTextAttrs} 文本区域描述符
+   **/
+function PackTextAttrs(text_overflow: string, word_wrap: string): PackedTextAttrs {
+  if (!text_overflow) text_overflow = "none";
+  if (!word_wrap) word_wrap = "none";
+
+  return { text_overflow: text_overflow, word_wrap: word_wrap };
+}
+
+const TextTools = {
+  getOneLineTextDrawWidth,
+  getTextWidth,
+  isRtl,
+  PackFontParams,
+  PackTextAttrs,
+  GetCursorPosition
+}
+
+export { getTextWidth, TextTools };

package/utils/JsViewVueTools/JsvTextureLoadTool.ts

@@ -0,0 +1,233 @@
+/**
+ * @file 
+ * 
+ * 内部组件
+ * 
+ * JsvTextureLoadTool: 对给定列表的图片资源进行后台预加载
+ * 特别注意: 在vue组件进行关联时，要在unmounted中进行对preload返回的句柄进行主动的release动作
+ * 
+ * @method 
+ *      preload
+ *          @param {Array(ItemSet)} preloadList
+ *          @param {Function} finishCallback
+*/
+
+import ForgeHandles from "./ForgeHandles";
+
+const CONST_FORMAT_TOKEN = 3349;
+class ItemSet {
+    public url: String | null;
+    public width: number;
+    public height: number;
+    public colorType: String;
+    public netSetting: any;
+    public isPosterImg: boolean;
+    public magicToken: number = CONST_FORMAT_TOKEN; // 用于规避非规定的输入值
+
+    /**
+     * @constructor
+     * @param {String} url  必填，图片的url，目前只支持 http:// 和 ./ 两个格式
+     * @param {number} width  选填，是否为了省内存而按照给定尺寸压缩图片
+     * @param {number} height  选填，是否为了省内存而按照给定尺寸压缩图片
+     * @param {String} color_type 选填，是否为了省内存而做成其他的图片解码格式
+     * @param {String} net_setting  选填，是否有特殊的网络header设置
+     * @param {boolean} is_poster_img 选填, 是否为统计为海报,海报有一套解码优先级处理
+     */
+    constructor(
+        url: String,
+        width: number = 0,
+        height: number = 0,
+        color_type: String = "RGBA_8888",
+        net_setting: any = null,
+        is_poster_img: boolean = false
+    ) {
+        if (!url || url.length == 0) {
+            console.warn("Error: url should not empty(null, \"\")");
+        }
+        this.url = url;
+        this.width = width;
+        this.height = height;
+        this.colorType = color_type;
+        this.netSetting = net_setting;
+        this.isPosterImg = is_poster_img;
+    }
+}
+
+class ItemStatus {
+    public loadStatus: boolean = false;
+    public listenerToken: number = -1;
+    public textureRef: any;
+
+    releaseResource() {
+        if (this.listenerToken != -1 && this.textureRef) {
+            this.textureRef.DisableBackgroundLoad();
+            this.textureRef.UnregisterLoadImageCallback(
+                this.listenerToken
+            );
+
+            this.listenerToken = -1;
+            this.textureRef = null;
+        }
+    }
+}
+
+class ListStatus {
+    public loadStatusList: Array<ItemStatus>;
+    public loadedInfoList: Array<any>;
+    public originDataList: Array<ItemSet>;
+    public loadingItemCount: number = 0;
+    public finishCallback: Function;
+
+    constructor(origin_data: Array<ItemSet>, finish_callback: Function) {
+        this.loadStatusList = new Array(origin_data.length).fill(null);
+        this.loadedInfoList = new Array(origin_data.length).fill(null);
+        this.originDataList = origin_data;
+        this.finishCallback = finish_callback;
+    }
+
+    onLoaded(index: number, loaded_info: any) {
+        let item_status = this.loadStatusList[index];
+        if (item_status && !item_status.loadStatus) {
+            item_status.loadStatus = true;
+            this.loadedInfoList[index] = loaded_info;
+            this.loadingItemCount--;
+            if (this.loadingItemCount == 0) {
+                this.finishCallback?.(this.loadedInfoList);
+            }
+        } else {
+            console.warn(`warn: url=${this.originDataList[index].url} already true`)
+        }
+    }
+
+    recycleResource() {
+        for (let item of this.loadStatusList) {
+            item?.releaseResource();
+        }
+    }
+}
+
+const _buildTextureRequest = (index: number, item_set: ItemSet, list_recorder: ListStatus): boolean => {
+    if (item_set.magicToken !== CONST_FORMAT_TOKEN) {
+        console.error(
+            "Error:format mismatch, data should comes from function buildPreloadInfo()"
+        );
+        return false;
+    }
+
+    const base_url = item_set.url;
+    let image_url = base_url;
+    if (base_url) {
+        if (base_url.startsWith("jsvtexturestore://")) {
+            // 直接加载，不需要跟踪
+            return false;
+        } else if (base_url.startsWith(".") || base_url?.startsWith("/")) {
+            // 相对路径，要根据jsview的api进行改造
+            if ((window as any).JsView) {
+                image_url = (((window as any).JsView as any).Dom as any).UrlRef(base_url).herf;
+            } else {
+                // Browser端不需要调整url
+            }
+        }
+
+        // 是否为指定size节省内存的texture
+        let target_size: { width: number, height: number } | null = null;
+        if (item_set.width !== 0 && item_set.height !== 0) {
+            target_size = { width: item_set.width, height: item_set.height };
+        }
+
+        let texture: any = ForgeHandles.TextureManager.GetImage2(
+            image_url,
+            false,
+            target_size,
+            item_set.colorType,
+            item_set.netSetting ?? "",
+            item_set.isPosterImg
+        );
+
+        if (!texture) {
+            console.error(
+                "Error: Preload view build texture failed for " + image_url
+            );
+            return false;
+        }
+
+        let item_status: ItemStatus = new ItemStatus();
+        list_recorder.loadStatusList[index] = item_status;
+
+        // 追加回调处理
+        item_status.listenerToken = texture.RegisterLoadImageCallback(null, (params: any) => {
+            console.log(`preload succeed ${item_set.url}, params:${JSON.stringify(params)}`);
+            list_recorder.loadStatusList[index].releaseResource();
+            list_recorder.onLoaded(index, params);
+        });
+        // 脱离view进行加载，
+        // 如果没有真实的view进行挂载很可能就会被快速地清理掉
+        // 但理论上，使用此组件的外部vue会对图片进行捆绑
+        texture.EnableBackgroundLoad();
+
+        // 记录textureRef，为了进行release时的释放动作
+        item_status.textureRef = texture;
+
+        return true;
+    } else {
+        return false;
+    }
+}
+
+const _readPreloadViewIdList = (
+    preload_list_data: Array<ItemSet> | null,
+    finish_callback: Function): ListStatus | null => {
+
+    if (!preload_list_data || preload_list_data?.length == 0) {
+        console.warn("empty list");
+        return null;
+    }
+
+    let ret_list_status: ListStatus = new ListStatus(preload_list_data, finish_callback);
+
+    // 直接在map前将为null的值删除掉
+    for (let i = 0; i < preload_list_data.length; i++) {
+        if (!preload_list_data[i] || !preload_list_data[i].url) {
+            continue;
+        }
+
+        if (_buildTextureRequest(i, preload_list_data[i], ret_list_status)) {
+            // 记录已经发送的texture请求
+            ret_list_status.loadingItemCount++;
+        } else {
+            // jsvtexturestore or build texture failed
+        }
+    }
+
+    if (ret_list_status.loadingItemCount == 0) {
+        // 无需要preload的内容
+        return null;
+    } else {
+        return ret_list_status;
+    }
+};
+
+/**
+ * 对给定的ItemSet进行preload加载，返回 ListStatus，
+ * 注意: 在vue的unmount处理中要调用ListStatus.recycleResource()进行资源回收
+ * 
+ * @function
+ * @param {ItemSet} preload_list_data  要加载资源的ItemSet列表
+ * @param {Function} finish_callback  全加载完成后的回调函数
+ * @returns {ListStatus}
+ */
+function preload(
+    preload_list_data: Array<ItemSet> | null,
+    finish_callback: Function): ListStatus | null {
+
+    return _readPreloadViewIdList(preload_list_data, finish_callback);
+}
+
+const JsvTextureLoadTool = {
+    preload,
+    ItemSet
+}
+
+export {
+    JsvTextureLoadTool
+}

package/utils/JsViewVueTools/JsvTextureStore/CapturedTexture/CapturedTexture.ts

@@ -1,5 +1,6 @@
 import ForgeHandles from "../../../JsViewVueTools/ForgeHandles";
 import { TextureBase } from "../Texture"
+import { FeatureNames, JsvUseFeature } from "../../FeatureActive";
 
 export type CapturedCallback = (
   textureAccessName: string,
@@ -19,6 +20,9 @@ export class CapturedTexture extends TextureBase {
     autoRecycle: boolean) {
     super(null);
 
+    // 激活引擎的功能支持
+    JsvUseFeature('JsvTextureStoreApi', FeatureNames.Capture2Texture);
+
     this._CaptureDiv = captureDiv;
     this._Callback = callback;
     this._AutoRecycle = autoRecycle;
@@ -45,7 +49,6 @@ export class CapturedTexture extends TextureBase {
 
         // 处理自动回收
         if (!this._AutoRecycle) {
-          this.textureRef.DisableAutoRecycle(); // 取消自动清理
           this.addToStore(); // 用TextureStore来跟进引用状态
         }
 

package/utils/JsViewVueTools/JsvTextureStore/JsvTextureStore.ts

@@ -1,5 +1,6 @@
 /*! 
- *  JsvTextureStoreApi
+ * @file JsvTextureStoreApi
+ *
  *      canvasTexture:
  *          创建texture(图片纹理)句柄, 通过 CanvasTexture 的API进行绘制, 使用注意以下几点
  *          a. commit() 接口调用之前可以任意绘制, commit之后就无法更改, commit之后才能使用, commit后绘制内容会被全局保存
@@ -26,7 +27,7 @@ let sJsvTextureConst = {
     BOTTOM: 4,
 }
 
-let sTextureStoreApi: Object = {
+let sTextureStoreApi = {
     /**
      * canvasTexture
      * 创建CanvasTexture句柄，执行commit()后, 获取访问名(访问名规则: 输入参数 baseName + 分配id)
@@ -59,8 +60,11 @@ let sTextureStoreApi: Object = {
      *                                      width: number,              // 截取div的宽
      *                                      height: number) => void     // 截取div的高
      * @param {boolean} autoRecycle 可选, 是否当无div/img引用时会自动释放
-     *                              为true的场景在callback收到资源名后, 需要使用完毕后调用 deleteTexture 手动释放
-     *                              在手动释放之前，可以赋给其他div/img来复用 
+     *                              true默认值: 此场景在回调时要立刻赋值给响应式变量控制template的节点立刻使用(并且不是v-if=false的节点),
+                                    否则会自动释放掉, 此时, texture当使用它的template节点从dom树中去掉的时候(v-if=false也算)会自动释放，
+                                    不需要主动调用deleteTexture释放.
+                                    false: 此场景在callback收到资源名后, 需要使用完毕后调用 deleteTexture 手动释放
+                                    在手动释放之前，可以赋给其他div/img来复用 
      * @return {CapturedTexture} 用于cancel的句柄，当cancel时，会清理对div和Callback的引用
      */
     capture2Texture: (