整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          將JavaScript代碼轉換為漂亮的SVG流程圖-js2flowchart

          js2flowchart 是一個可視化庫,可將任何JavaScript代碼轉換為漂亮的SVG流程圖。你可以輕松地利用它學習其他代碼、設計你的代碼、重構代碼、解釋代碼。這樣一個強大的神器,真的值得你擁有,看下面截圖就知道了,有沒有很強大。

          Github

          https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

          安裝使用

          • 安裝
          yarn add js2flowchart
          
          • 使用

          index.html

          <!DOCTYPE html>
          <html lang="en">
          <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <meta http-equiv="X-UA-Compatible" content="ie=edge">
           <title>fly測試</title>
          </head>
          <body>
           <div style="width:50%;float:left">
           <p id="svgImage"></p>
           </div>
           <div style="width:50%;float:left">
           <textarea name="" id="jsContent" style="width: 90%;height:900px" oninput="createSVG()">
           </textarea>
           </div>
           <script src="./node_modules/js2flowchart/dist/js2flowchart.js"></script>
           <script src="./index.js"></script>
          </body>
          </html>
          

          index.js

          createSVG = () => {
           document.getElementById("svgImage").innerHTML = null;
           let code = document.getElementById("jsContent").value;
           const { createFlowTreeBuilder, createSVGRender } = js2flowchart;
           const flowTreeBuilder = createFlowTreeBuilder(),
           svgRender = createSVGRender();
           const flowTree = flowTreeBuilder.build(code),
           shapesTree = svgRender.buildShapesTree(flowTree);
           const svg = shapesTree.print();
           document.getElementById("svgImage").innerHTML = svg;
          };
          createSVG();
          

          我們直接在文本域中輸入自己的代碼,如下,左邊會直接生成流程圖,這只是一個簡單的示例:

          js2flowchart的特性以及適用場景(來自官網翻譯)

          js2flowchart獲取您的JS代碼并返回SVG流程圖,適用于客戶端/服務器,支持ES6。

          主要特點:

          • 定義抽象級別以僅渲染導入/導出,類/函數名稱,函數依賴性以逐步學習/解釋代碼。
          • 自定義抽象級別支持創建自己的抽象級別
          • 表示生成器,以生成不同抽象級別的SVG列表
          • 定義流樹修改器以映射眾所周知的API,例如[] .map,[]。forEach,[] .filter到方案上的循環結構等。
          • 銷毀修飾符,用于在方案上用一個形狀替換代碼塊
          • 自定義流樹修改器支持創建自己的流修改器
          • 流樹忽略過濾器完全省略一些代碼節點,如日志行
          • 聚焦節點或整個代碼邏輯分支突出顯示方案的重要部分
          • 模糊節點或整個代碼邏輯分支以隱藏不太重要的東西
          • 定義的樣式主題支持選擇您喜歡的樣式
          • 自定義主題支持創建自己的主題,更好地適合您的上下文顏色
          • 自定義顏色和樣式支持提供方便的API來更改特定樣式而無需樣板

          用例場景:

          • 通過流程圖解釋/記錄您的代碼
          • 通過視覺理解學習其他代碼
          • 為有效JS語法簡單描述的任何進程創建流程圖

          以上所有功能可以直接到github上詳細了解,用法太多,這里就不在介紹了!

          vscode擴展

          這么強大的東西,有人肯定說如果在開發的時候實時看到流程圖有助于理解代碼,官網提供了插件(我在最新版中測試失效了,不知道是否是我使用的有問題還是插件本身的問題),如果感興趣的可以到擴展商店搜索code-flowchart。如果測試成功,歡迎到評論區分享。以下是我vscode版本和官網的插件使用截圖。

          如果利用好這個插件,可以開發出Chrome插件,以及其他JavaScript編輯器或者IDEA的插件,由于官方github已經幾個月沒更新了,所以還不知道未來會不會支持!

          總結

          js2flowchart是一個比較實用的Javascript插件,可以用來做很多事情,不管是自己寫代碼。還是閱讀別人的代碼,都無疑是一大助力,能夠幫助我們提升我們的代碼能力,更容易的閱讀代碼,這樣學習起來就快了,希望對你有所幫助!如果有什么好的建議,也可以到評論區分享!

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

          思維導圖的節點和連線都是通過 svg渲染的,作為一個純 js 庫,我們不考慮通過后端來實現,所以只能思考如何通過純前端的方式來實現將svg或html轉換為圖片。

          使用img標簽結合canvas導出

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

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

          svgStr是要導出的svg字符串,比如:

          然后通過Blob構造函數創建一個類型為image/svg+xml的blob數據,接下來將blob數據轉換成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里進行導出:

          const drawToCanvas = (svgUrl) => {
              return new Promise((resolve, reject) => {
                const img = new Image()
                // 跨域圖片需要添加這個屬性,否則畫布被污染了無法導出圖片
                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標簽來下載:

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

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

          處理存在圖片的情況

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

          導出結果如下:

          可以看到,第一張圖片沒有問題,第二張圖片裂開了,可能你覺得同源策略的問題,但實際上換成同源的圖片,同樣也是裂開的,解決方法很簡單,遍歷svg節點樹,將圖片都轉換成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')
                // 已經是data:URL形式不用轉換
                if (/^data:/.test(imgUlr)) {
                  return
                }
                // 轉換并替換圖片url
                let imgData = await drawToCanvas(imgUlr)
                item.attr('href', imgData)
              })
              await Promise.all(task)
              return svgNode.svg()// 返回svg html字符串
          }

          這里使用了前面的drawToCanvas方法來將圖片轉換成data:URL,這樣導出就正常了:

          到這里,將純 svg 轉換為圖片就基本沒啥問題了。

          處理存在foreignObject標簽的情況

          svg提供了一個foreignObject標簽,可以插入html節點,實際上,筆者就是使用它來實現節點的富文本編輯效果的:

          接下來使用前面的方式來導出,結果如下:

          明明顯示沒有問題,導出時foreignObject內容卻發生了偏移,這是為啥呢,其實是因為默認樣式的問題,頁面全局清除了margin和padding,以及將box-sizing設置成了border-box:

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

          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()
          }

          導出結果如下:

          可以看到,一切正常。

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

          踩坑記錄

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

          foreignObject標簽內容在firefox瀏覽器上無法顯示

          對于svg的操作筆者使用的是svg.js庫,創建富文本節點的核心代碼大致如下:

          import { SVG, ForeignObject } from '@svgdotjs/svg.js'
          
          let html = `<div>節點文本</div>`
          let foreignObject = new ForeignObject()
          foreignObject.add(SVG(html))
          g.add(foreignObject)

          SVG方法是用來將一段html字符串轉換為dom節點的。

          在chrome瀏覽器和opera瀏覽器上渲染非常正常,但是在firefox瀏覽器上foreignObject標簽的內容完全渲染不出來:

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

          使用img結合canvas導出圖片里foreignObject標簽內容為空

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

          但是使用前面的方式導出時foreignObject標簽內容卻是跟在firefox瀏覽器里顯示一樣是空的:

          firefox能忍這個不能忍,于是嘗試使用一些將html轉換為圖片的庫。

          使用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轉換需要被轉換的節點在文檔中
              let canvas = await html2canvas(el, {
                  backgroundColor: null
              })
              mdocument.body.removeChild(el)
              return canvas.toDataURL()
          }

          html2canvas可以成功導出,但是存在一個問題,就是foreignObject標簽里的文本樣式會丟失:

          這應該是html2canvas的一個bug,不過看它這issues數量和提交記錄:

          指望html2canvas改是不現實的,于是又嘗試使用dom-to-image:

          import domtoimage from 'dom-to-image'
          
          const dataUrl = domtoimage.toPng(el)

          發現dom-to-image更不行,導出完全是空白的:

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

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

          解決foreignObject標簽內容在firefox瀏覽器上無法顯示的問題

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

          你說chrome很強吧,確實,但是無形中它阻止了問題的暴露。

          知道了原因,那么修改也很簡單了,只要將SVG方法第二個參數設為true即可,或者自己來創建節點也可以:

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

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

          解決img結合canvas導出圖片為空的問題

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

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

          總結

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

          著 Web 技術的發展,有很多需要將 HTML 內容轉換為 PDF 文檔并下載的場景,比如常見的收據、發票、電子報告、對賬清單、文檔翻譯等等。

          本文將研究當前比較流行的基于 Node.js 技術棧的 HTML 轉 PDF 庫:Puppeteer、jsPDF 和 PDFKit,大綱如下:

          • Puppeteer 及優缺點
          • jsPDF 及優缺點
          • PDFKit 及優缺點
          • Puppeteer vs jsPDF vs PDFKit 功能對比

          1.Puppeteer

          1.1.使用 Puppeteer 生成 PDF

          Puppeteer 是谷歌開發的一個 Node.js 庫,為控制無頭(或完整)Chrome 或 Chromium 瀏覽器提供了一個高級 API。它是最流行的開源 HTML 到 PDF 轉換器,支持 HTML、CSS 和 JavaScript。

          Puppeteer 允許您自動化Web瀏覽器中的各種任務,例如 Web 抓取、網站測試、截圖創建和 PDF 生成。它利用 Chrome 或 Chromium Web 瀏覽器的功能將 HTML 內容呈現為 PDF 文件。

          下面使用 Puppeteer 快速初始化一個項目:

          nvm use 20.6.1
          
          mkdir puppeteer-demo
          
          cd puppeteer-demo
          
          npm init -y
          
          npm install puppeteer
          
          touch index.js
          
          

          index.js 中添加如下代碼:

          import puppeteer from 'puppeteer';
          
          (async () => {
            const browser = await puppeteer.launch({
              headless: 'new',
            });
          
            const page = await browser.newPage();
          
            await page.setContent(
              `<!DOCTYPE html>
              <html lang="en">
              <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
              </head>
              <body>
                <style>
                  body {
                    display: grid;
                    place-items: center;
                    margin: 0;
                    background-color: #ccc;
                    min-height: 100vh;
                  }
                </style>
                <h1>Hello, Puppeteer!</h1>
              </body>
              </html>`
            );
          
            await page.pdf({ path: 'result.pdf', format: 'A4' });
          
            await browser.close();
          })();
          

          在上面的代碼中,我們導入 Puppeteer 庫,啟動無頭 Chromium 瀏覽器,并在瀏覽器中創建一個新頁面。我們還會根據頁面內容和指定選項(如路徑和格式)生成 PDF,生成完成后關閉瀏覽器并釋放資源。

          1.2.優點

          • 您可以完全控制要在 PDF 中包含網頁的哪些部分。您可以指定具體的元素、部分或整個頁面
          • Puppeteer 提供了自定義選項,如指定頁面大小、邊距、頁眉和頁腳,使您可以根據特定需求定制 PDF 布局
          • Puppeteer 可以捕捉 PDF 中的交互元素,如超鏈接和表單字段,適用于生成交互式 PDF 文件。

          1.3.缺點

          • 使用 Puppeteer 生成的 PDF 有時可能比使用類似庫生成的PDF要大。這會影響下載時間和存儲成本。
          • 使用 Puppeteer 渲染復雜或大型網頁可能會消耗資源,導致PDF生成變慢和內存使用增加。

          2.PDFKit

          PDFKit 是 JavaScript 生態系統中最古老和最成熟的 PDF庫 之一。目前仍得到良好維護并定期更新。該庫通常使用 Node.js 在服務器端環境中創建和操作 PDF 文檔。它允許您通過定義每個頁面的內容、布局和格式來以程序方式生成PDF文件。

          PDFKit 提供了用于 PDF 文檔生成的高級 API,并支持各種功能,使其成為創建自定義 PDF 的多功能工具。作為 PDFKit 的包裝器,已開發出多個 PDF 庫,支持自定義字體和圖像嵌入。

          2.1.使用 PDFKit 生成 PDF

          讓我們來快速初始化一個 PDFKit 項目:

          nvm use 20.6.1
          
          mkdir pdfkit-demo
          
          cd pdfkit-demo
          
          npm init -y
          
          npm install pdfkit
          
          touch index.js
          

          index.js 中添加如下代碼:

          import fs from 'node:fs';
          import PDFDocument from 'pdfkit';
          
          const doc = new PDFDocument();
          
          const stream = fs.createWriteStream('example.pdf');
          
          doc.pipe(stream);
          doc.fontSize(12).text('Hello, PDFKit!', { align: 'center' });
          doc.end();
          
          stream.on('finish', () => {
            console.log('success');
          });
          

          執行 node index.js 后,可以看到 PDF 可以生成生成,并觸發 finish 事件的回調函數執行,打印出了 success

          2.2.優點

          • 由于它是開源的,并由社區積極維護,PDFkit 可以不斷改進和更新
          • PDFKit 可對 PDF 文檔的內容、布局和格式進行精細控制。您可以根據自己的特定需求創建高度定制的 PDF 文檔
          • PDFKit 是根據用戶請求、數據或其他服務器端進程動態生成 PDF 的絕佳選擇

          2.3.缺點

          • 創建具有高級布局和功能的復雜 PDF 可能具有挑戰性,可能需要充分了解庫的 API
          • 對于新手來說,PDFKit 的學習曲線可能比更直接的 HTML 到 PDF 轉換工具更陡峭,因為它需要對文檔結構進行更多的手動控制

          3.jsPDF

          jsPDF 是一個流行的 JavaScript PDF 生成器,允許用戶動態在 Web 瀏覽器中生成 PDF 文件。這個庫維護良好,穩定易用,并且有豐富的文檔。

          jsPDF 在客戶端操作,非常適合在 Web 應用程序中生成 PDF ,無需在服務器端生成。它可以修改現有布局,并允許用戶通過自定義來控制他們的 PDF。還可以用來編輯現有的 PDF 文檔或從頭創建一個,包括圖像、表格和形狀等內容。

          3.1.使用 jsPDF 生成 PDF

          示例中使用官方提供的 CDN 地址 https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js

          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <title>Document</title>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
            </head>
            <body>
              <style>
                body {
                  display: grid;
                  place-items: center;
                  margin: 0;
                  background-color: #ccc;
                  min-height: 100vh;
                }
              </style>
              <h1>Hello, jsPDF!</h1>
              <script>
                document.addEventListener("DOMContentLoaded", function () {
                  const pdf = new window.jsPDF();
                  const element = document.body;
          
                  pdf.html(element, {
                    callback: function (pdf) {
                      // Save the PDF to a file or display it
                      pdf.save("output.pdf");
                    },
                  });
                });
              </script>
            </body>
          </html>
          
          

          文檔地址:http://raw.githack.com/MrRio/jsPDF/master/docs/index.html

          3.2.優點

          • jsPDF 完全在客戶端(頁面)上運行,這使它成為在 Web 應用程序中生成 PDF 的一個很好的選擇,而無需外部服務
          • jsPDF 相對易于使用,尤其是對于基本的 PDF 生成任務。您只需幾行 JavaScript 代碼即可創建 PDF 文檔
          • 由于 jsPDF 是一個 JavaScript 庫,它可以與 Web 應用程序無縫集成,并可以與其他 JavaScript 庫和框架一起使用

          3.3.缺點

          • 在客戶端生成 PDF 可能會耗費大量資源,尤其是大型或復雜文檔。這會影響瀏覽器性能或導致內存消耗問題
          • jsPDF 在現代 Web 瀏覽器中得到廣泛支持,但在舊的瀏覽器或具有較少 JavaScript 支持的環境中可能無法按預期工作
          • 與 PDFKit 等服務器端 PDF 生成庫不同,jsPDF 具有有限的高級功能和能力。它可能不適用于復雜的PDF要求。

          4.Puppeteer、jsPDF 和 PDFKit 功能比較

          為便于大家參考,下面總結了 Puppeteer、jsPDF 和 PDFKit 庫在 PDF 生成、文件大小、瀏覽器集成和社區支持方面的比較:

          5.結論

          當為 HTML 轉 PDF 需求選擇實現方案時,可以參考以上實現方案。如果你想從頭開始生成 PDF,PDFKit 可能是你最好的選擇。要通過 HTML 或者 SVG 內容快速轉換為 PDF,jsPDF 可能更合適。對應網頁渲染和交互式內容,強烈建議你選擇 Puppeteer。

          最后,方案選擇在很大程度上還取決于你的項目類型、規范及開發者個人喜好。


          如果文章對你有幫助,歡迎關注和轉發,感謝你的支持!


          主站蜘蛛池模板: 精品国产免费一区二区三区| 又紧又大又爽精品一区二区 | 果冻传媒一区二区天美传媒| 亚洲丰满熟女一区二区哦| 国产精品亚洲产品一区二区三区| 国产短视频精品一区二区三区| 亚洲一区爱区精品无码| 亚州国产AV一区二区三区伊在| 日本高清一区二区三区| 日本一区二区三区爆乳| 久久精品国产第一区二区三区| 成人精品视频一区二区三区不卡| 一区二区手机视频| 麻豆视频一区二区三区| 男人的天堂av亚洲一区2区| 精品人妻系列无码一区二区三区| 中文字幕精品无码一区二区三区| 亚洲国产综合精品一区在线播放| 偷拍精品视频一区二区三区| 成人精品视频一区二区三区尤物| 99精品一区二区三区无码吞精| 91久久精品一区二区| 91国偷自产一区二区三区| 亚洲色偷偷偷网站色偷一区| 国产精品一区二区久久精品| 国产福利一区二区三区| 亚洲乱码av中文一区二区| 无码日韩精品一区二区免费| 精品少妇人妻AV一区二区 | 精品国产一区二区三区在线| 欧美一区内射最近更新| 国产福利一区视频| 一区二区免费电影| 国精无码欧精品亚洲一区| 日产亚洲一区二区三区| 少妇一夜三次一区二区| 福利片福利一区二区三区| 久久久久国产一区二区| 久久久一区二区三区| 极品尤物一区二区三区| 色欲AV无码一区二区三区|