成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

微信小程序：截圖組件welCropper，實(shí)現(xiàn)原理及其使用

jay_tian / 3030人閱讀

摘要：最近做項(xiàng)目的時(shí)候，需要做一個(gè)截圖功能。因?yàn)樗?，就自己?dòng)手寫了一個(gè)截圖組件。下面介紹一下實(shí)現(xiàn)原理和使用方法。用來繪制適應(yīng)屏幕比例大小的圖片，因?yàn)橥ǔＴ瓐D大小是超過屏幕長(zhǎng)寬的。

最近做項(xiàng)目的時(shí)候，需要做一個(gè)截圖功能。用了一個(gè)別人寫的截圖工具，發(fā)現(xiàn)截出的圖質(zhì)量下降了，但是我們圖片要用來做識(shí)別, 需要保證截出的圖質(zhì)量不下降。而且也不支持通過拖動(dòng)來調(diào)整截圖框的大小。所以這個(gè)截圖工具無法滿足需求。因?yàn)樗?，就自己?dòng)手寫了一個(gè)截圖組件。

下面介紹一下實(shí)現(xiàn)原理和使用方法。

實(shí)現(xiàn)原理

組件wxml的層次結(jié)構(gòu)圖如下：

original canvas 用來繪制原圖大小的圖片，這樣能保證截圖后的質(zhì)量不會(huì)下降，這個(gè)canvas是隱藏的。

movable-area是movable-view的容器，是官方提供的拖拽移動(dòng)組件，用來移動(dòng)截取框的四個(gè)角。這個(gè)組件支持多個(gè)點(diǎn)同時(shí)移動(dòng)。

scale canvas用來繪制適應(yīng)屏幕比例大小的圖片（aspectFit），因?yàn)橥ǔＴ瓐D大小是超過屏幕長(zhǎng)寬的。（一開始白線框和圖片都在這一層，但后來發(fā)現(xiàn)每次移動(dòng)都要繪制一次圖片，這樣會(huì)造成卡頓、性能下降。所以就想到通過增加一個(gè)move canvas來專門繪制白線框來降低繪制圖片帶來的資源消耗，因?yàn)閳D片是靜止的，不需要重復(fù)繪制。）

move canvas是根據(jù)四個(gè)movable-view的位置繪制出截圖框。

最后截圖，通過四個(gè)點(diǎn)的位置計(jì)算出截圖框的位置，然后放大對(duì)應(yīng)原圖大小的位置，得到在原圖中的(x, y, width, height)，最后通過官方提供的canvas接口截圖。

wx.canvasToTempFilePath({
  x: x,
  y: y,
  width: w,
  height: h,
  destWidth: w,
  destHeight: h,
  canvasId: "originalCanvas",
  success: function (res) {
  }
)}
旋轉(zhuǎn)原理


特點(diǎn)

保證截圖質(zhì)量不會(huì)被壓縮（也可以選擇壓縮圖）

截圖框能夠通過拖拽四個(gè)角來調(diào)整選區(qū)大小

使用

假設(shè)我們的應(yīng)用文件結(jié)構(gòu)如下：

./
├── app.js
├── app.json
├── app.wxss
├── pages
│?? └── index
│??  ?? ├── index.js
│??  ?? ├── index.json
│??  ?? ├── index.wxml
│??  ?? └── index.wxss
└── welCropper
    ├── welCropper.js
    ├── welCropper.wxml
    └── welCropper.wxss

調(diào)用組件時(shí)，需要傳入cropperData、cropperMovableItems、cropperChangableData，因?yàn)閿?shù)據(jù)和事件都是綁定在Page上的，所以要避免使用組件里面已經(jīng)被占用的命名。
/pages/index/index.wxml

/pages/index/index.js

// 獲取顯示區(qū)域長(zhǎng)寬
const device = wx.getSystemInfoSync()
const W = device.windowWidth
const H = device.windowHeight - 50

let cropper = require("../../welCropper/welCropper.js");

console.log(device)

Page({
    data: {
    },
    onLoad: function () {
        var that = this
        // 初始化組件數(shù)據(jù)和綁定事件
        cropper.init.apply(that, [W, H]);
    },
    selectTap() {
        var that = this

        wx.chooseImage({
            count: 1, // 默認(rèn)9
            sizeType: ["original", "compressed"], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
            sourceType: ["album", "camera"], // 可以指定來源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
            success(res) {
                const tempFilePath = res.tempFilePaths[0]
                console.log(tempFilePath)
                
                // 將選取圖片傳入cropper，并顯示cropper
                // mode=rectangle 返回圖片path
                // mode=quadrangle 返回4個(gè)點(diǎn)的坐標(biāo)，并不返回圖片。這個(gè)模式需要配合后臺(tái)使用，用于perspective correction
                let modes = ["rectangle", "quadrangle"]
                let mode = modes[0]   //rectangle, quadrangle
                that.showCropper({
                    src: tempFilePath,
                    mode: mode,
                    sizeType: ["original", "compressed"],   //"original"(default) | "compressed"
                    callback: (res) => {
                        if (mode == "rectangle") {
                            console.log("crop callback:" + res)
                            wx.previewImage({
                                current: "",
                                urls: [res]
                            })
                        }
                        else {
                            wx.showModal({
                                title: "",
                                content: JSON.stringify(res),
                            })

                            console.log(res)
                        }

                        // that.hideCropper() //隱藏，我在項(xiàng)目里是點(diǎn)擊完成就上傳，所以如果回調(diào)是上傳，那么隱藏掉就行了，不用previewImage
                    }
                })
            }
        })
    }
})

最后引入組件的樣式
/pages/index/index.wxss

@import "/welCropper/welCropper.wxss";
注意

因?yàn)?b>wx.canvasToTempFilePath輸出的是.png圖片，截出來的圖有可能遠(yuǎn)遠(yuǎn)大于原圖（比如3通道圖變成4通道的圖）

源代碼

Github:tomfriwel/welCropper，將welCropper文件夾復(fù)制到自己項(xiàng)目，引入調(diào)用就行了。

wepy 版本：github: callmesoul/wepy-corpper

如果出現(xiàn)什么bug、問題或者建議可以告訴我，我會(huì)盡量改進(jìn)。 效果圖

如果將movable-view顯示出來是這樣的：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88613.html

相關(guān)文章

  • 微信小程序開發(fā)中遇到的問題及解決辦法：微信小程序ad自適應(yīng)布局（二）

    摘要：?jiǎn)栴}添加微信廣告的小程序在正式上線并且通過審查后，如果有除了純展示的其他需求，比如需要點(diǎn)擊觀看廣告秒才能領(lǐng)取獎(jiǎng)勵(lì)。 場(chǎng)景：微信小程序中添加廣告，可以是微信廣告和自定義廣告的自適應(yīng)布局； 問題：微信廣告在小屏（比如：320）手機(jī)上或是設(shè)置ad組件父組件寬度小于300px，內(nèi)容會(huì)超出布局范圍； 截圖效果：showImg(https://segmentfault.com/img/bVbq...

    Freeman 評(píng)論0 收藏0

  • 微信小程序開發(fā)中遇到的問題及解決辦法：微信小程序ad自適應(yīng)布局（二）

    摘要：?jiǎn)栴}添加微信廣告的小程序在正式上線并且通過審查后，如果有除了純展示的其他需求，比如需要點(diǎn)擊觀看廣告秒才能領(lǐng)取獎(jiǎng)勵(lì)。 場(chǎng)景：微信小程序中添加廣告，可以是微信廣告和自定義廣告的自適應(yīng)布局； 問題：微信廣告在小屏（比如：320）手機(jī)上或是設(shè)置ad組件父組件寬度小于300px，內(nèi)容會(huì)超出布局范圍； 截圖效果：showImg(https://segmentfault.com/img/bVbq...

    tanglijun 評(píng)論0 收藏0

  • 2017-10-19 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選源碼解析一組件的實(shí)現(xiàn)與掛載寫在的前端數(shù)據(jù)層不完全指北非時(shí)圓角邊框剪裁問題專題之解讀排序源碼中的閉包再也不用擔(dān)心面試被問什么是閉包了中文路由路由基礎(chǔ)入門實(shí)戰(zhàn)操作詳細(xì)指南前端學(xué)習(xí)教程用實(shí)現(xiàn)一門編程語言語言簡(jiǎn)介眾成翻譯第 2017-10-19 前端日?qǐng)?bào) 精選 React源碼解析(一):組件的實(shí)現(xiàn)與掛載寫在2017的前端數(shù)據(jù)層不完全指北Chrome opacity非1時(shí)border...

    v1 評(píng)論0 收藏0

  • 前端空間 - 收藏集 - 掘金

    摘要：封裝手寫的方筆記使用檢測(cè)文件前端掘金副標(biāo)題可以做什么以及使用中會(huì)遇到的坑。目的是幫助人們用純中文指南實(shí)現(xiàn)復(fù)選框中多選功能前端掘金作者緝熙簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。 深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測(cè)試框架 Chai.js 源碼貢獻(xiàn)者之一，Chai.js 中會(huì)遇到很多異常處理...

    you_De 評(píng)論0 收藏0

  • 前端空間 - 收藏集 - 掘金

    摘要：封裝手寫的方筆記使用檢測(cè)文件前端掘金副標(biāo)題可以做什么以及使用中會(huì)遇到的坑。目的是幫助人們用純中文指南實(shí)現(xiàn)復(fù)選框中多選功能前端掘金作者緝熙簡(jiǎn)介是推出的一個(gè)天挑戰(zhàn)。 深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金譯者注：本文作者是著名 JavaScript BDD 測(cè)試框架 Chai.js 源碼貢獻(xiàn)者之一，Chai.js 中會(huì)遇到很多異常處理...

    lwx12525 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<