簡單小程序：登錄頁面（html）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登錄頁面</title>
    /*總體的樣式*/
    <style>
    	/*盒子樣式*/
        #box{
            width: 350px; //寬
            height: 450px; //高
            border: 1px solid black; //邊框
            border-radius: 10px; //邊框弧度
            font-family: 黑體; //字體
            letter-spacing:8px; //段間距
            word-spacing: 10px; //字間距
            line-height: 40px; //行高
            font-size: 18px; //字大小
            padding: 20px; //內(nèi)邊框
        }
        /*給'注冊'賦予樣式*/
        .register{
            width:280px ; //寬
            height: 50px; //高
            background-color: skyblue; //背景顏色
            border-radius: 10px; //邊框弧度

        }
        /*將所有邊框都改變*/
        *{
            border-radius: 5px; 邊框弧度
        }
        /*使用class選擇器，賦予number寬高和邊框*/
        .number{
            width: 185px; //寬
            height: 27px; //高
            border-width: 1px; //邊框?qū)挾?
        }
        /*id選擇器*/
        #two{
            width: 55px; //寬
            border-width: 1px; 邊框?qū)挾?        }
        /*id選擇器*/
        #phone{
            width: 103px; //寬
        }
        /*class 選擇器*/
        .boxs{
            zoom: 75%; //清除浮動
            color: darkgray; //顏色
        }
        /*class選擇器*/
        .box_a{
            width: 50px; //寬
            height: 50px; //高
            background-image: url("../image/04.jpg "); //背景圖片
            background-repeat: no-repeat; // 是否平鋪
            background-size: 50px 25px; //背景尺寸
            position: relative; //定位 相對定位
            left: 310px; //定位后左移
            bottom: 32px; //定位后下移

        }
    </style>
</head>
<body>
<div id="box">
    <h1>請注冊</h1>
<p style="color: darkgray">已有帳號?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
    <label for="name">用戶名</label>
    <input type="text" placeholder="請輸入用戶名" id="name" class="number"> <br>
    <label for="phone">手機(jī)號</label>
    <select name="" id="two" class="number">
    <optgroup>
        <option style="" class="">+86</option>
    </optgroup>
    </select>
    <input type="text" placeholder="請輸入手機(jī)號" id="phone" class="number"> <br>
    <label for="mima">密?碼</label>
    <input type="password" placeholder="請輸入密碼" id="mima" class="number"> <br>
    <label for="mima">驗證碼</label>
    <input type="password" placeholder="請輸入驗證碼" id="is" class="number">
    <div class="box_a"></div>
    <div class="boxs">
        <input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
    </div>
    <input type="submit" value="注冊" class="register" >

    </form>
</div>


</body>
</html>
在這里插入圖片描述

者開源了一個Web思維導(dǎo)圖，在做導(dǎo)出為圖片的功能時走了挺多彎路，所以通過本文來記錄一下。

思維導(dǎo)圖的節(jié)點和連線都是通過 svg渲染的，作為一個純 js 庫，我們不考慮通過后端來實現(xiàn)，所以只能思考如何通過純前端的方式來實現(xiàn)將svg或html轉(zhuǎn)換為圖片。

使用img標(biāo)簽結(jié)合canvas導(dǎo)出

我們都知道 img 標(biāo)簽可以顯示 svg，然后 canvas 又可以渲染 img，那么是不是只要將svg渲染到img標(biāo)簽里，再通過canvas導(dǎo)出為圖片就可以呢，答案是肯定的。

const svgToPng = async (svgStr) => {
    // 轉(zhuǎn)換成blob數(shù)據(jù)
    let blob = new Blob([svgStr], {
      type: 'image/svg+xml'
    })
    // 轉(zhuǎn)換成data:url數(shù)據(jù)
    let svgUrl = await blobToUrl(blob)
    // 繪制到canvas上
    let imgData = await drawToCanvas(svgUrl)
    // 下載
    downloadFile(imgData, '圖片.png')
}

svgStr是要導(dǎo)出的svg字符串，比如：

然后通過Blob構(gòu)造函數(shù)創(chuàng)建一個類型為image/svg+xml的blob數(shù)據(jù)，接下來將blob數(shù)據(jù)轉(zhuǎn)換成data:URL：

const blobToUrl = (blob) => {
    return new Promise((resolve, reject) => {
        let reader = new FileReader()
        reader.onload = evt => {
            resolve(evt.target.result)
        }
        reader.onerror = err => {
            reject(err)
        }
        reader.readAsDataURL(blob)
    })
}

其實就是base64格式的字符串。

接下來就可以通過img來加載，并渲染到canvas里進(jìn)行導(dǎo)出：

const drawToCanvas = (svgUrl) => {
    return new Promise((resolve, reject) => {
      const img = new Image()
      // 跨域圖片需要添加這個屬性，否則畫布被污染了無法導(dǎo)出圖片
      img.setAttribute('crossOrigin', 'anonymous')
      img.onload = async () => {
        try {
          let canvas = document.createElement('canvas')
          canvas.width = img.width
          canvas.height = img.height
          let ctx = canvas.getContext('2d')
          ctx.drawImage(img, 0, 0, img.width, img.height)
          resolve(canvas.toDataURL())
        } catch (error) {
          reject(error)
        }
      }
      img.onerror = e => {
        reject(e)
      }
      img.src = svgUrl
    })
}

canvas.toDataURL()方法返回的也是一個base64格式的data:URL字符串：

最后就可以通過a標(biāo)簽來下載：

const downloadFile = (file, fileName) => {
  let a = document.createElement('a')
  a.href = file
  a.download = fileName
  a.click()
}

實現(xiàn)很簡單，效果也不錯，不過這樣就沒問題了嗎，接下來我們插入兩張圖片試試。

處理存在圖片的情況

第一張圖片是使用base64的data:URL方式插入的，第二張圖片是使用普通url插入的：

導(dǎo)出結(jié)果如下：

可以看到，第一張圖片沒有問題，第二張圖片裂開了，可能你覺得同源策略的問題，但實際上換成同源的圖片，同樣也是裂開的，解決方法很簡單，遍歷svg節(jié)點樹，將圖片都轉(zhuǎn)換成data:URL的形式即可：

// 操作svg使用了@svgdotjs/svg.js庫
const transfromImg = (svgNode) => {
    let imageList = svgNode.find('image')
    let task = imageList.map(async item => {
      // 獲取圖片url
      let imgUlr = item.attr('href') || item.attr('xlink:href')
      // 已經(jīng)是data:URL形式不用轉(zhuǎn)換
      if (/^data:/.test(imgUlr)) {
        return
      }
      // 轉(zhuǎn)換并替換圖片url
      let imgData = await drawToCanvas(imgUlr)
      item.attr('href', imgData)
    })
    await Promise.all(task)
    return svgNode.svg()// 返回svg html字符串
}

這里使用了前面的drawToCanvas方法來將圖片轉(zhuǎn)換成data:URL，這樣導(dǎo)出就正常了：

到這里，將純 svg 轉(zhuǎn)換為圖片就基本沒啥問題了。

處理存在foreignObject標(biāo)簽的情況

svg提供了一個foreignObject標(biāo)簽，可以插入html節(jié)點，實際上，筆者就是使用它來實現(xiàn)節(jié)點的富文本編輯效果的：

接下來使用前面的方式來導(dǎo)出，結(jié)果如下：

明明顯示沒有問題，導(dǎo)出時foreignObject內(nèi)容卻發(fā)生了偏移，這是為啥呢，其實是因為默認(rèn)樣式的問題，頁面全局清除了margin和padding，以及將box-sizing設(shè)置成了border-box：

那么當(dāng)svg存在于文檔樹中時是沒有問題的，但是導(dǎo)出時使用的是svg字符串，是脫離于文檔的，所以沒有這個樣式覆蓋，那么顯示自然會出現(xiàn)問題，知道了原因，解決方法有兩種，一是遍歷所有嵌入的html節(jié)點，手動添加內(nèi)聯(lián)樣式，注意一定要給所有的html節(jié)點都添加，只給svg、foreignObject或最外層的html節(jié)點添加都是不行的；第二種是直接在foreignObject標(biāo)簽里添加一個style標(biāo)簽，通過style標(biāo)簽來加上樣式，并且只要給其中一個foreignObject標(biāo)簽添加就可以了，兩種方式看你喜歡哪種，筆者使用的是第二種：

const transformForeignObject = (svgNode) => {
    let foreignObjectList = svgNode.find('foreignObject')
    if (foreignObjectList.length > 0) {
        foreignObjectList[0].add(SVG(`<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        </style>`))
    }
    return svgNode.svg()
}

導(dǎo)出結(jié)果如下：

可以看到，一切正常。

關(guān)于兼容性的問題，筆者測試了最新的chrome、firefox、opera、safari、360急速瀏覽器，運行都是正常的。

踩坑記錄

前面介紹的是筆者目前采用的方案，看著實現(xiàn)其實非常簡單，但是過程漫長且坎坷，接下來，開始我的表演。

foreignObject標(biāo)簽內(nèi)容在firefox瀏覽器上無法顯示

對于svg的操作筆者使用的是svg.js庫，創(chuàng)建富文本節(jié)點的核心代碼大致如下：

import { SVG, ForeignObject } from '@svgdotjs/svg.js'

let html = `<div>節(jié)點文本</div>`
let foreignObject = new ForeignObject()
foreignObject.add(SVG(html))
g.add(foreignObject)

SVG方法是用來將一段html字符串轉(zhuǎn)換為dom節(jié)點的。

在chrome瀏覽器和opera瀏覽器上渲染非常正常，但是在firefox瀏覽器上foreignObject標(biāo)簽的內(nèi)容完全渲染不出來：

檢查元素也看不出有任何問題，并且神奇的是只要在控制臺元素里編輯一下嵌入的html內(nèi)容，它就可以顯示了，百度搜索了一圈，也沒找到解決方法，然后因為firefox瀏覽器占有率并不高，于是這個問題就擱淺了。

使用img結(jié)合canvas導(dǎo)出圖片里foreignObject標(biāo)簽內(nèi)容為空

chrome瀏覽器雖然渲染是正常的：

但是使用前面的方式導(dǎo)出時foreignObject標(biāo)簽內(nèi)容卻是跟在firefox瀏覽器里顯示一樣是空的：

firefox能忍這個不能忍，于是嘗試使用一些將html轉(zhuǎn)換為圖片的庫。

使用html2canvas、dom-to-image等庫

使用html2canvas：

import html2canvas from 'html2canvas'

const useHtml2canvas = async (svgNode) => {
    let el = document.createElement('div')
    el.style.position = 'absolute'
    el.style.left = '-9999999px'
    el.appendChild(svgNode)
    document.body.appendChild(el)// html2canvas轉(zhuǎn)換需要被轉(zhuǎn)換的節(jié)點在文檔中
    let canvas = await html2canvas(el, {
        backgroundColor: null
    })
    mdocument.body.removeChild(el)
    return canvas.toDataURL()
}

html2canvas可以成功導(dǎo)出，但是存在一個問題，就是foreignObject標(biāo)簽里的文本樣式會丟失：

這應(yīng)該是html2canvas的一個bug，不過看它這issues數(shù)量和提交記錄：

指望html2canvas改是不現(xiàn)實的，于是又嘗試使用dom-to-image：

import domtoimage from 'dom-to-image'

const dataUrl = domtoimage.toPng(el)

發(fā)現(xiàn)dom-to-image更不行，導(dǎo)出完全是空白的：

并且它上一次更新時間已經(jīng)是五六年前，所以沒辦法，只能回頭使用html2canvas。

后來有人建議使用dom-to-image-more，粗略看了一下，它是在dom-to-image庫的基礎(chǔ)上修改的，嘗試了一下，發(fā)現(xiàn)確實可以，于是就改為使用這個庫，然后又有人反饋在一些瀏覽器上導(dǎo)出節(jié)點內(nèi)容是空的，包括firefox、360，甚至chrome之前的版本都不行，筆者只能感嘆，太難了，然后又有人建議使用上一個大版本，可以解決在firefox上的導(dǎo)出問題，但是筆者試了一下，在其他一些瀏覽器上依舊存在問題，于是又在考慮要不要換回html2canvas，雖然它存在一定問題，但至少不是完全空的。

解決foreignObject標(biāo)簽內(nèi)容在firefox瀏覽器上無法顯示的問題

用的人多了，這個問題又有人提了出來，于是筆者又嘗試看看能不能解決，之前一直認(rèn)為是firefox瀏覽器的問題，畢竟在chrome和opera上都是正常的，這一次就想會不會是svgjs庫的問題，于是就去搜它的issue，沒想到，還真的搜出來了issue，大意就是因為通過SVG方法轉(zhuǎn)換的dom節(jié)點是在svg的命名空間下，也就是使用document.createElementNS方法創(chuàng)建的，導(dǎo)致部分瀏覽器渲染不出來，歸根結(jié)底，這還是不同瀏覽器對于規(guī)范的不同實現(xiàn)導(dǎo)致的：

你說chrome很強(qiáng)吧，確實，但是無形中它阻止了問題的暴露。

知道了原因，那么修改也很簡單了，只要將SVG方法第二個參數(shù)設(shè)為true即可，或者自己來創(chuàng)建節(jié)點也可以：

foreignObject.add(document.createElemnt('div'))

果然，在firefox瀏覽器上正常渲染了。

解決img結(jié)合canvas導(dǎo)出圖片為空的問題

解決了在firefox瀏覽器上foreignObject標(biāo)簽為空的問題后，自然會懷疑之前使用img結(jié)合canvas導(dǎo)出圖片時foreignObject標(biāo)簽為空會不會也是因為這個問題，同時了解了一下dom-to-image庫的實現(xiàn)原理，發(fā)現(xiàn)它也是通過將dom節(jié)點添加到svg的foreignObject標(biāo)簽中實現(xiàn)將html轉(zhuǎn)換成圖片的，那么就很搞笑了，我本身要轉(zhuǎn)換的內(nèi)容就是一個嵌入了foreignObject標(biāo)簽的svg，使用dom-to-image轉(zhuǎn)換，它會再次把傳給它的svg添加到一個foreignObject標(biāo)簽中，這不是套娃嗎，既然dom-to-image-more能通過foreignObject標(biāo)簽成功導(dǎo)出，那么不用它必然也可以，到這里基本確信之前不行就是因為命名空間的問題。

果然，在去掉了dom-to-image-more庫后，重新使用之前的方式成功導(dǎo)出了，并且在firefox、chrome、opera、360等瀏覽器中都不存在問題，兼容性反而比dom-to-image-more庫好。

總結(jié)

雖然筆者的實現(xiàn)很簡單，但是dom-to-image-more這個庫實際上有一千多行代碼，那么它到底多做了些什么呢，點個關(guān)注，我們下一篇文章再見。

angEditor 實現(xiàn)ctrl+v粘貼圖片并上傳、word粘貼帶圖片，wangEditor實現(xiàn)粘貼word圖片，wangEditor實現(xiàn)粘貼word圖文，wangEditor實現(xiàn)粘貼word，wangEditor實現(xiàn)粘貼word文檔，wangEditor實現(xiàn)粘貼word內(nèi)容，wangEditor實現(xiàn)一鍵粘貼word圖片，wangEditor實現(xiàn)一鍵粘貼word圖文，wangEditor實現(xiàn)一鍵粘貼word，wangEditor實現(xiàn)一鍵粘貼word文檔，

我們公司有一個新聞發(fā)布系統(tǒng)，每天都會安排同事在后臺發(fā)布新聞，使用頻率比較高，使用的是富文本編輯器wangEditor，

wangEditor4粘貼word圖片和文字，word圖片自動上傳到服務(wù)器，圖片和文字HTML自動添加到編輯器中，

現(xiàn)在有個需求，就是需要為wangEditor編輯器增加粘貼Word圖片的功能，粘貼后圖片能夠自動上傳到服務(wù)器中，服務(wù)器地址能夠自定義

因為聽同事反應(yīng)，發(fā)布新聞的步驟有點繁瑣了，需要從word中復(fù)制圖文內(nèi)容，粘貼到編輯器中，然后再手動上傳圖片，圖片數(shù)量多時，這個操作太累了

現(xiàn)在就想用戶使用操作起來更方便一些，一般發(fā)新聞，或者發(fā)文章用的比較多，可以說是高頻使用，

如果能不裝控件實現(xiàn)就最好了，不過為了減輕工作量，裝個控件也沒關(guān)系，總比一張張上傳圖片簡單。

前端用了VUE2,VUE3，后端用了PHP,JSP,ASP,ASP.NET,SpringBoot

下載示例：

http://www.ncmem.com/webapp/wordpaster/versions.aspx

選擇對應(yīng)示例進(jìn)行下載：

在線代碼：https://gitee.com/xproer/wordpaster-asp.net-wangeditor

1.從示例中復(fù)制WordPaster目錄

2.復(fù)制文件上傳頁面

upload.jsp

/src/Xproer/Uploader.java

編輯器頁面：

1.引入頭和樣式

注意：不要重復(fù)引入jquery，如果您的頁面（項目）已經(jīng)引入了jquery，則不要重復(fù)引入jquery

2.初始化控件和插件

注意：

1.如果接口字段名稱不是file，請配置FileFieldName。ueditor接口中使用的upfile字段

參考：http://www.ncmem.com/doc/view.aspx?id=c3ad06c2ae31454cb418ceb2b8da7c45

2.如果接口返回JSON，請配置ImageMatch

參考：http://www.ncmem.com/doc/view.aspx?id=07e3f323d22d4571ad213441ab8530d1

3.如果接口返回的圖片地址沒有域名，請配置ImageUrl

參考：http://www.ncmem.com/doc/view.aspx?id=704cd302ebd346b486adf39cf4553936
4.如果接口有權(quán)限驗證（登陸驗證，SESSION驗證），請配置COOKIE?；蛉∠麢?quán)限驗證。
參考：http://www.ncmem.com/doc/view.aspx?id=8602DDBF62374D189725BF17367125F3

整合后的效果：

訂閱版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAw70JsA8m
政企版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuqJtN30#/

年費版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/

OEM版報價單：https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY

產(chǎn)品源代碼：https://drive.weixin.qq.com/s?k=ACoAYgezAAwz13B5Tr

在線咨詢

上一篇：HTML+CSS：常用表單控件之單選框、多選框、下拉框的介紹
下一篇：建站中基礎(chǔ)的html語言和如何使用DW

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商