@focus-teach/ui 1.0.54 → 1.0.55

package/package.json

@@ -2,7 +2,7 @@
   "name": "@focus-teach/ui",
   "packageName": "ui",
   "publishName": "@focus-teach/ui",
-  "version": "1.0.54",
+  "version": "1.0.55",
   "private": false,
   "main": "lib/ui.umd.min.js",
   "scripts": {
@@ -22,7 +22,9 @@
     "babel-loader": "^8.0.0",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.1",
+    "html2canvas": "^1.4.1",
     "lodash": "^4.17.21",
+    "md5": "^2.3.0",
     "qs": "^6.10.1",
     "sass": "^1.26.5",
     "sass-loader": "^10.1.1",

package/utils/common.js

@@ -132,7 +132,7 @@ export function getFirstNumber(itemNumber, type) {
         let match = itemNumber.match(/(\d+)(?:-(\d+))?/);
         let num1 = match[1];
         let num2 = match[2];
-        console.log(resultmatchchineseNum, num1, num2)
+        // console.log(resultmatchchineseNum, num1, num2)
         return resultmatchchineseNum ? num1 == num2 ? resultmatchchineseNum + num1 : itemNumber : num1 == num2 ? num1 : itemNumber
     }
 }
@@ -263,7 +263,7 @@ function loadImage({child,maxHeight,maxWidth}){//等待图片加载完成
           }else{
             try{
               let res = await Promise.all(promiseArr)
-              console.log('res is...',res)
+            //   console.log('res is...',res)
               resolve({width:res?.[0]?.width,height:res?.[0]?.height})
             }catch(err){
               setTimeout(()=>{
@@ -301,7 +301,7 @@ async function getCols(optionArr,TABLE_WIDTH,className){
                 let childNode = div.childNodes[j]
                 if(childNode.nodeName == 'IMG'){
                     let tempWidth = childNode?.style?.width || childNode.width
-                    console.log(tempWidth,className,'图片宽度');
+                    // console.log(tempWidth,className,'图片宽度');
                     let realWidth = String(tempWidth || '').includes('pt') ? ptToPx(parseFloat(tempWidth)) : parseFloat(tempWidth)
                     // 若图片不存在宽度，则随便给一个值，超过编辑器宽度即可，这里给了1000
                     if(!realWidth) {
@@ -312,15 +312,27 @@ async function getCols(optionArr,TABLE_WIDTH,className){
                 }else{
                     if(childNode.nodeName == '#text'){
                         width += getStringWidthNoImage(childNode.textContent,'text',className == 'options-mistake-print' ? '16px' : '14px',className == 'options-mistake-print' ? 'Avenir, Helvetica, Arial, sans-serif' : undefined)
-                        console.log(width,'文本节点宽度');
-                    }else{
+                        // console.log(width,'文本节点宽度');
+                    }else{//对应其他标签 优先处理是否里面有内嵌的图片
+                        let imgList = childNode.querySelectorAll('img')
+                        for(let k = 0; k < imgList.length; k++){
+                            let img = imgList[k]
+                            let tempWidth = img?.style?.width || img.width
+                            let realWidth = String(tempWidth || '').includes('pt') ? ptToPx(parseFloat(tempWidth)) : parseFloat(tempWidth)
+                            // 若图片不存在宽度，则随便给一个值，超过编辑器宽度即可，这里给了1000
+                            if(!realWidth) {
+                                let { width,height } = await loadImage({child:img,maxHeight:MAX_HEIGHT,maxWidth:TABLE_WIDTH})
+                                realWidth = width
+                            }
+                            width += realWidth || MAX_HEIGHT
+                        }
                         width += getStringWidthNoImage(childNode.outerHTML,'',className == 'options-mistake-print' ? '16px' : '14px',className == 'options-mistake-print' ? 'Avenir, Helvetica, Arial, sans-serif' : undefined)
-                        console.log(width,'其他标签宽度');
+                        // console.log(width,'其他标签宽度');
                     }
                 }
             }
             div?.remove?.()
-            console.log("带图片识别出来的宽",className,width);
+            // console.log("带图片识别出来的宽",className,width);
             // return width
             widthList.push(width)
         }else{
@@ -333,19 +345,22 @@ async function getCols(optionArr,TABLE_WIDTH,className){
 
     let find = factors.find(item=> maxWidth <= TABLE_WIDTH / item)
     find && (cols = find);
-    console.log('计算出来的表格列数=====>',cols,maxWidth);
+    // console.log('计算出来的表格列数=====>',cols,maxWidth);
     return cols
 }
 
 
-async function getOptionArr(optionArr,TABLE_WIDTH,className){
+async function getOptionArr(optionArr,TABLE_WIDTH,className,optionCount){
     let cols = await getCols(optionArr,TABLE_WIDTH,className);
+    if(optionCount){
+        cols = Math.min(cols,optionCount)
+    }
     let rows = Math.ceil(optionArr.length / cols);
     optionArr = Array.from({ length: rows }, (_, i) => optionArr.slice(i * cols, i * cols + cols));
     return optionArr
 }
 
-export async function generateTable(optionArr,option) {
+export async function generateTable(optionArr,optionCount) {
 
     let table = '<table border="0" class="ckeditor-table cke_show_border option-table" style="border-collapse: collapse; width: 100%;;border:none"><tbody>';
     // 后续有新增类型只需要添加宽度和对应的类名即可
@@ -394,7 +409,7 @@ export async function generateTable(optionArr,option) {
     // [[A,B],[C,D]]
     for(let i = 0; i < tableList.length; i++){
         let item = tableList[i]
-        let optionsTemp = await getOptionArr(optionArr,item.width,item.className);
+        let optionsTemp = await getOptionArr(optionArr,item.width,item.className,optionCount);
         optionsTemp.forEach((optionCols)=>{
             table += `<tr class="options-tr ${item.className}">`
             optionCols.forEach((item)=>{
@@ -438,7 +453,7 @@ function optionToTable(stem) {
             }
         })
     }
-    console.log(option,'option======');
+    // console.log(option,'option======');
     if(!option) return stem
     const reg = /([A-H])[.|、|．]\s*(.+?)(?=[A-H][.|、|．]|\s*$)/g;
     let optionArr = option.match(reg);
@@ -457,4 +472,193 @@ export function getUpdateTime(timeStr) {
     var oneTime = new Date(timeStr).getTime();
     var date = new Date(oneTime);
     return formatDate(date, "yyyy-MM-dd hh:mm");
-}
+}
+
+function extractTextAndImages(html) {
+    // 第一步：将img标签替换为特殊标记
+    const imgPlaceholder = '___IMG___';
+    const imgTags = [];
+    
+    const htmlWithPlaceholders = html.replace(/<img[^>]+>/gi, match => {
+      imgTags.push(match);
+      return imgPlaceholder;
+    });
+  
+    // 第二步：移除其他HTML标签
+    const textWithPlaceholders = htmlWithPlaceholders
+      .replace(/<[^>]+>/g, '') // 移除所有HTML标签
+      .replace(/&nbsp;/g, ' ') // 替换HTML实体
+      .replace(/&lt;/g, '<')
+      .replace(/&gt;/g, '>')
+      .replace(/&amp;/g, '&')
+      .replace(/&quot;/g, '"')
+      .replace(/\s+/g, ' ');  // 合并多个空格
+  
+    // 第三步：还原img标签
+    let index = 0;
+    const result = textWithPlaceholders.replace(new RegExp(imgPlaceholder, 'g'), () => {
+      return imgTags[index++] || '';
+    });
+    let dom = new DOMParser().parseFromString(result,'text/html')
+    let contentList = []
+    Array.from(dom?.body?.childNodes).map(item=>{
+        if(item.nodeName == 'IMG'){
+            contentList.push({type:'image',content:item.outerHTML,url:item.src})
+        }else{
+            contentList.push({type:'text',content:item.textContent})
+        }
+    })
+    return contentList;
+  }
+
+export async function textWithImageToBase64(text, options = {}) {
+    let contentList = extractTextAndImages(text)
+    // 默认配置
+    const config = {
+      width: 762,
+      fontSize: 14,
+      fontFamily: 'Arial',
+      textColor: '#000000',
+      backgroundColor: '#ffffff',
+      padding: 16,
+      lineHeight: 1.5,
+      imageHeight: 100, // 默认图片高度
+      imageWidth: 100, // 默认图片宽度
+      imageMargin: 10, // 图片之间的间距
+      ...options
+    };
+    
+    // 创建canvas
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    // 加载图片函数
+    const loadImage = (src) => {
+        return new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = 'anonymous';  // 处理跨域
+            img.onload = () => resolve(img);
+            img.onerror = reject;
+            img.src = src;
+        });
+    };
+
+    // 计算文本换行
+    function getTextLines(text, maxWidth) {
+        ctx.font = `${config.fontSize}px ${config.fontFamily}`;
+        const words = text.split('');
+        const lines = [];
+        let currentLine = '';
+
+        for (let i = 0; i < words.length; i++) {
+        const testLine = currentLine + words[i];
+        const metrics = ctx.measureText(testLine);
+        
+        if (metrics.width > maxWidth && i > 0) {
+            lines.push(currentLine);
+            currentLine = words[i];
+        } else {
+            currentLine = testLine;
+        }
+        }
+        lines.push(currentLine);
+        return lines;
+    }
+
+    // 计算总高度
+    async function calculateTotalHeight(content) {
+        let totalHeight = config.padding;
+        const maxWidth = config.width - (config.padding * 2);
+
+        for (const item of content) {
+        if (item.type === 'text') {
+            const lines = getTextLines(item.content, maxWidth);
+            totalHeight += lines.length * config.fontSize * config.lineHeight;
+        } else if (item.type === 'image') {
+            const img = await loadImage(item.url)
+            totalHeight += img.height + config.imageMargin;
+        }
+        }
+
+        return totalHeight + config.padding;
+    }
+
+    // 绘制内容
+    async function drawContent() {
+        let currentY = config.padding;
+        const maxWidth = config.width - (config.padding * 2);
+
+        for (const item of contentList) {
+            if (item.type === 'text') {
+                ctx.font = `${config.fontSize}px ${config.fontFamily}`;
+                ctx.fillStyle = config.textColor;
+                
+                const lines = getTextLines(item.content, maxWidth);
+                for (const line of lines) {
+                ctx.fillText(line, config.padding, currentY);
+                currentY += config.fontSize * config.lineHeight;
+                }
+        } else if (item.type === 'image') {
+            try {
+                const img = await loadImage(item.url);
+                // 居中显示图片
+                const x = (config.width - img.width) / 2;
+                ctx.drawImage(img, config.imageMargin, currentY, img.width, img.height);
+                currentY += img.height + config.imageMargin;
+            } catch (error) {
+                console.error('Failed to load image:', error);
+            }
+        }
+        }
+    }
+
+    // 计算画布高度
+    const totalHeight = await calculateTotalHeight(contentList);
+
+    // 设置画布尺寸
+    canvas.width = config.width;
+    canvas.height = totalHeight;
+
+    // 绘制背景
+    ctx.fillStyle = config.backgroundColor;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // 绘制内容
+    await drawContent();
+
+    return {
+      base64: canvas.toDataURL('image/png'),
+      size: Math.ceil((canvas.toDataURL('image/png').length * 3/4) / (1024 * 1024))
+    };
+  }
+  /**
+ * 计算 base64 字符串大小
+ * @param {string} base64String base64字符串
+ * @returns {object} 包含字节数和格式化后大小的对象
+ */
+export function getBase64Size(base64String,unit = 'MB') {
+    // 去掉 base64 字符串头部标识和空格
+    const strLength = base64String.replace(/^data:image\/\w+;base64,/, '').length;
+    
+    // base64 字符串解码后的字节数，大约为原长度的 3/4
+    const fileSize = Math.floor((strLength - (strLength / 8) * 2) / 4) * 3;
+    // 格式化文件大小
+    const formatSize = (size) => {
+      if (size < 1024 && unit == 'B') {
+        return Math.ceil(size);
+      } else if (size < 1024 * 1024 && unit == 'KB') {
+        return Math.ceil(size / 1024);
+      } else if (size < 1024 * 1024 && unit == 'MB') {
+        return Math.ceil((size / (1024 * 1024)));
+      }
+    };
+  
+    return formatSize(fileSize);
+  }
+
+  
+
+
+
+
+