«

串串狗的logo预选

时间:2021-8-20     作者:想美好的未来     分类: 其他


昨天晚上在pixiv上搜dog,看到了一个韩国的博主上传的图觉得挺好看的。8.10号创作的,博主好像是叫Matz。以后处理一下就是我这个串串狗了。网址是:https://www.pixiv.net/artworks/91875925
串串狗的logo预选

另附开发中的 HTML2md . js

// editor.md 编辑器粘贴上传图片以及简单的 html to markdown 解析
function initPasteExpand(Editor){
    var pasteInputId = 'logcontent'  // 触发元素的ID
    var postUrl      = './media.php?action=upload'  // 上传地址
    var emMediaPhpUrl= "./media.php?action=lib"  // emlog 的资源库地址,用于异步获取上传后的图片数据

    function preventEditorPaste(){  // 通过动态配置只读模式,阻止编辑器原有的粘贴动作发生,并恢复光标位置
        let l = Editor.getCursor().line
        let c = Editor.getCursor().ch - 3

        Editor.config({ readOnly: true, })  
        Editor.config({ readOnly: false,})
        Editor.setCursor({line:l, ch:c})
    }

    function replaceByNum(text,num){  // 编辑器通过光标处位置前几位来替换文字
        let l = Editor.getCursor().line
        let c = Editor.getCursor().ch

        Editor.setSelection({line:l, ch:(c - num)}, {line:l, ch:c})
        Editor.replaceSelection(text)
    }

    document.getElementById(pasteInputId).addEventListener("paste", function (e) {  // 粘贴事件触发
        if ($('.editormd-mask').css('display') == 'block') return  // 如果编辑器有对话框则退出
        if ( !(e.clipboardData && e.clipboardData.items) ) return

        var pasteData = e.clipboardData || window.clipboardData // 获取剪切板里的全部内容
        pasteAnalyseResult = new Array  // 用于储存遍历分析后的结果

        for(var i = 0; i < pasteData.items.length; i++) {  // 遍历分析剪切板里的数据
            var item = pasteData.items[i]

            if((item.kind == "file") && (item.type.match('^image/'))){
                var imgData = item.getAsFile()
                if (imgData.size === 0) return
                pasteAnalyseResult['type'] = 'img'
                pasteAnalyseResult['data'] = imgData
                break  // 图片的优先级最高,当粘贴板中有图片存在时,直接跳出循环
            }

            if((item.kind == "string") && (item.type.match('^text/html'))){
                pasteAnalyseResult['type'] = 'html'
                pasteAnalyseResult['data'] = item
            }
        }

        if(pasteAnalyseResult['type'] == 'img') {  // 如果剪切板中有图片,上传图片
            preventEditorPaste()
            uploadImg(pasteAnalyseResult['data'])
            return
        } 
        if(pasteAnalyseResult['type'] == 'html'){  // 如果剪切板有 html 格式数据,则将其转化为 markdown 格式文本,插入编辑器
            preventEditorPaste()
            pasteAnalyseResult['data'].getAsString(function (str) {
                html2md(str)
            })
        }
    }, false);

    function uploadImg(img){  // 上传图片
        var formData = new FormData();
        var imgName="粘贴上传"+new Date().getTime()+"."+img.name.split(".").pop();

        formData.append('file', img, imgName);
        Editor.insertValue("上传中...")
        $.ajax({
            url: postUrl,
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function() { 
                var xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    Editor.insertValue("....")
                    xhr.upload.addEventListener('progress', function(e) {  // 用以显示上传进度  
                        console.log('进度(byte):' + e.loaded + ' / ' + e.total)
                        var percent = Math.floor(e.loaded / e.total * 100)
                        if(percent < 10){
                            replaceByNum('..'+percent+'%',4)
                        }else if(percent < 100){
                            replaceByNum('.'+percent+'%',4)
                        }else{
                            replaceByNum(percent+'%',4)
                        }
                    }, false);
                }
                return xhr
            },
            success:function(result){
                if(result == 'success'){
                    let imgUrl, thumbImgUrl
                    console.log('上传成功!正在获取结果...')
                    $.get(emMediaPhpUrl,function(data){  // 异步获取结果,追加到编辑器
                        console.log('获取结果成功!')
                        imgUrl = data.match(/(?<=href\=\").*?(?=\"\s)/)[0]
                        thumbImgUrl = data.match(/(?<=src\=\").*?(?=\")/)[0]
                        replaceByNum(`[![](${imgUrl})](${thumbImgUrl})`,10)  // 这里的数字 10 对应着’上传中...100%‘是10个字符
                    })
                }else{
                    alert('未知错误')
                    replaceByNum('未知错误',6)
                }
            },
            error:function(result){
                alert('上传失败,找不到请求地址')
                replaceByNum('上传失败,找不到请求地址',6)
            }
        })
    }

    function html2md(htmlData){
        codeContent     = new Array  // code标签数据
        preContent      = new Array  // pre标签数据
        tableContent    = new Array  // table标签数据
        olContent       = new Array  // ol标签数据
        imgContent      = new Array  // img标签数据
        aContent        = new Array  // a标签数据
        let pureHtml    = htmlData

        function clearHtmlTag(htmlData){  // 删去html标签
            return htmlData.replace(/\<[\s\S]*?\>/g,'')
        }

        function olRecover(olData){  // 复原ol标签
            let result = olData
            let num = olData.match(/\<li\>/ig).length
            for(let i = 1; i <= num; i++){
                let line = '\n'
                if(i == 1) line = '\n\n'
                result = result.replace(/\<li\>/i, line + i + '. ')
            }
            result = result.replace(/\<\/li\>/, '')
            return result
        }

        function imgRecover(imgHtml){  // 复原img标签
            let imgSrc,imgTit,imgAlt,result
            imgSrc     = imgHtml.match(/(?<=src=['"])[\s\S]*?(?=['"])/i)
            imgTit     = imgHtml.match(/(?<=title=['"])[\s\S]*?(?=['"])/i)
            imgAlt     = imgHtml.match(/(?<=alt=['"])[\s\S]*?(?=['"])/i)

            imgTit = (imgTit != null) ? ` "${imgTit}"` : ' '
            imgAlt = (imgAlt != 'null') ? imgAlt : " "
            result = `![${imgAlt}](${imgSrc}${imgTit})`
            return result
        }

        function aRecover(aData){  // 复原a标签
            let aHref = '' + aData.match(/(?<=href=['"])[\s\S]*?(?=['"])/i)
            let aTit  = '' + aData.match(/(?<=title=['"])[\s\S]*?(?=['"])/i)
            let aText = '' + aData.match(/(?<=\<a\s*[^\>]*?\>)[\s\S]*?(?=<\/a>)/i)

            let aImg = aData.match(/<img\s*[^\>]*?\>[^]*?(<\/img>)?/i)
            let aImgSrc,aImgTit,aImgAlt

            aTit = (aTit != 'null') ? ` "${aTit}"` : ' '
            aText = clearHtmlTag(aText)
            let result = `[${aText}](${aHref}${aTit})`

            console.log('aData:' + aData)
            console.log('img:' + aImg)
            if(aImg != null){  // 如果发现图片,则更换为图片显示模式
                aImgSrc     = aImg[0].match(/(?<=src=['"])[\s\S]*?(?=['"])/i)
                aImgTit     = aImg[0].match(/(?<=title=['"])[\s\S]*?(?=['"])/i)
                aImgAlt     = aImg[0].match(/(?<=alt=['"])[\s\S]*?(?=['"])/i)

                aImgTit = (aImgTit != null) ? ` "${aImgTit}"` : ' '
                aImgAlt = (aImgAlt != 'null') ? aImgAlt : " "
                result = `[![${aImgAlt}](${aImgSrc}${aImgTit})](${aHref}${aTit})`
            }
            return result
        }

        function tableRecover(tableData){  // 复原table标签
            let colNum = tableData[0].length
            let result = ''

            for(let i = 0; i < colNum; i++){
                result += `|${clearHtmlTag(tableData[0][i])}`
            }
            result += `|\n`
            for(let j = 0; j < colNum; j++){
                result += `| :------------: `
            }
            result += `|\n`
            for(let k = 0; k < tableData[1].length;){
                for(let z = 0; z < colNum; z++,k++){
                    result += `|${clearHtmlTag(tableData[1][k])}`
                }
                result += `|\n`
            }
            return result+`\n`
        }

        // 储存pre的内容,并替换<pre>中的内容
        preContent = pureHtml.match(/(?<=\<pre\s*[^\>]*?\>)[\s\S]*?(?=<\/pre>)/ig)
        pureHtml = pureHtml.replace(/(?<=\<pre\s*[^\>]*?\>)[\s\S]*?(?=<\/pre>)/ig,'`#preContent#`')

        // 储存code的内容,并替换<code>中的内容
        codeContent = pureHtml.match(/(?<=\<code\s*[^\>]*?\>)[\s\S]*?(?=<\/code>)/ig)
        pureHtml = pureHtml.replace(/(?<=\<code\s*[^\>]*?\>)[\s\S]*?(?=<\/code>)/ig,'`#codeContent#`')

        // 储存a的内容,并替换<a>中的内容
        aContent = pureHtml.match(/<a\s*[^\>]*?\>[^]*?<\/a>/ig)
        pureHtml = pureHtml.replace(/<a\s*[^\>]*?\>[^]*?<\/a>/ig,'`#aContent#`')

        // 储存img的内容,并替换<img>中的内容
        imgContent = pureHtml.match(/<img\s*[^\>]*?\>[^]*?(<\/img>)?/ig)
        pureHtml = pureHtml.replace(/<img\s*[^\>]*?\>[^]*?(<\/img>)?/ig,'`#imgContent#`')

        // 获取纯净(无属性)的 html
        pureHtml = pureHtml.replace(/(?<=\<[a-zA-Z0-9]*)\s.*?(?=\>)/g,'')  

        console.log("纯净源代码:"+pureHtml)

        // 标题:标获取<h1><h2>...数据,并替换
        pureHtml = pureHtml.replace(/<h1>/ig,'\n\n# ').replace(/<\/h1>/ig,'\n\n')
                            .replace(/<h2>/ig,'\n\n## ').replace(/<\/h2>/ig,'\n\n')
                            .replace(/<h3>/ig,'\n\n### ').replace(/<\/h3>/ig,'\n\n')
                            .replace(/<h4>/ig,'\n\n#### ').replace(/<\/h4>/ig,'\n\n')
                            .replace(/<h5>/ig,'\n\n##### ').replace(/<\/h5>/ig,'\n\n')
                            .replace(/<h6>/ig,'\n\n###### ').replace(/<\/h6>/ig,'\n\n')

        // 段落:删去<meta><div><p><span>
        pureHtml = pureHtml.replace(/(<div>)|(<br>)/ig,'\n\n').replace(/(<\/div>)|(<br\/>)/ig,'\n\n')
                            .replace(/(<meta>)|(<span>)|(<p>)|(<\/p>)/ig,'').replace(/<\/span>/ig,'')

        // 粗体:替换<b><strong>
        pureHtml = pureHtml.replace(/(<b>)|(<strong>)/ig,' **').replace(/(<\/b>)|(<\/strong>)/ig,'** ')

        // 斜体:替换<i><em><abbr><dfn><cite><address>
        pureHtml = pureHtml.replace(/(<i>)|(<em>)|(<abbr>)|(<dfn>)|(<cite>)|(<address>)/ig,' *').replace(/(<\/i>)|(<\/em>)|(<\/abbr>)|(<\/dfn>)|(<\/cite>)|(<\/address>)/ig,'* ')

        // 引用:替换<blockquote>
        pureHtml = pureHtml.replace(/\<blockquote\>/ig,'\n\n> ').replace(/\<\/blockquote\>/ig,'\n\n')

        // 水平线:替换<hr>
        pureHtml = pureHtml.replace(/\<hr\>/ig,'\n\n------\n\n')

        // 代码<code>,根据上面的数组恢复code,然后将code替换
        if(codeContent !== null){
            for(let i = 0; i < codeContent.length; i++){
                pureHtml = pureHtml.replace(/\`\#codeContent\#\`/i,clearHtmlTag(codeContent[i]))
            }
        }
        pureHtml = pureHtml.replace(/\<code\>/ig,' ` ').replace(/\<\/code\>/ig,' ` ')

        // 代码<pre>,恢复pre,然后将pre替换
        if(preContent !== null){
            for(let k = 0; k < preContent.length; k++){
                pureHtml = pureHtml.replace(/\`\#preContent\#\`/i,clearHtmlTag(preContent[k]))
            }
        }
        pureHtml = pureHtml.replace(/\<pre\>/ig,'\n\n```\n').replace(/\<\/pre\>/ig,'\n```\n\n')

        // 表格 <table>,得到数据,删除标签,然后逐层分析储存,最终根据结果生成
        tableContent = pureHtml.match(/(?<=\<table\s*[^\>]*?\>)[\s\S]*?(?=<\/table>)/ig)
        pureHtml = pureHtml.replace(/<table\s*[^\>]*?\>[^]*?<\/table>/ig,'`#tableContent#`')
        if(tableContent !== null){  // 分析储存
            tbodyContent = new Array
            for(let i = 0; i < tableContent.length; i++){
                tbodyContent[i] = new Array  // tbodyContent[i]的第一个数据是thead数据,第二个是tbody的数据
                tbodyContent[i].push(tableContent[i].match(/(?<=\<th>)[\s\S]*?(?=<\/th?>)/ig))
                tbodyContent[i].push(tableContent[i].match(/(?<=\<td>)[\s\S]*?(?=<\/td?>)/ig))
            }
        }
        if(typeof tbodyContent !== "undefined"){  // 替换
            console.log(tbodyContent[0][0])
            for(let i = 0; i < tbodyContent.length; i++){
                console.log(tbodyContent[i])
                let tableText = tableRecover(tbodyContent[i])
                pureHtml = pureHtml.replace(/\`\#tableContent\#\`/i,tableText)
            }
        }
        // console.log(tableContent)
        // console.log(tbodyContent)

        // 有序列表<ol>的<li>,储存ol的内容,并循环恢复ol中的内容
        olContent = pureHtml.match(/(?<=\<ol\s*[^\>]*?\>)[\s\S]*?(?=<\/ol>)/ig)
        pureHtml = pureHtml.replace(/(?<=\<ol\s*[^\>]*?\>)[\s\S]*?(?=<\/ol>)/ig,'`#olContent#`')
        if(olContent !== null){
            for(let k = 0; k < olContent.length; k++){
                let olText = olRecover(olContent[k])
                pureHtml = pureHtml.replace(/\`\#olContent\#\`/i,clearHtmlTag(olText))
            }
        }

        // 无序列表<ul>的<li>,以及<dd>,直接替换
        pureHtml = pureHtml.replace(/(<li>)|(<dd>)/ig,'\n - ').replace(/(<\/li>)|(<\/dd>)/ig,'\n')

        // 处理完列表后,将<lu>、<\lu>、<ol>、<\ol>,删去
        pureHtml = pureHtml.replace(/(<ul>)|(<ol>)/ig,'').replace(/(<\/ul>)|(<\/ol>)/ig,'')

        // 先恢复 img ,再恢复 a
        //console.log()
        if(imgContent !== null){
            for(let i = 0; i < imgContent.length; i++){
                let imgText = imgRecover(imgContent[i])
                pureHtml = pureHtml.replace(/\`\#imgContent\#\`/i,imgText)
            }
        }

        //恢复 a
        //console.log(aContent)
        if(aContent !== null){
            for(let k = 0; k < aContent.length; k++){
                let aText = aRecover(aContent[k])
                pureHtml = pureHtml.replace(/\`\#aContent\#\`/i,aText)
            }
        }

        // 将3个换行符以上的内容替换成两个。如果首部空行太多,删去
        pureHtml = pureHtml.replace(/\n{4,}/g,'\n\n').replace(/\n{2,}/,'')

        // Editor.insertValue(clearHtmlTag(pureHtml))
        Editor.insertValue(pureHtml)
        // console.log("源代码:"+htmlData)
        // console.log('纯文本:'+clearHtmlTag(htmlData))
    }
}

标签: logo