成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

jay_tian / 2921人閱讀

摘要：最近做項目的時候，需要做一個截圖功能。因為所以，就自己動手寫了一個截圖組件。下面介紹一下實現(xiàn)原理和使用方法。用來繪制適應(yīng)屏幕比例大小的圖片，因為通常原圖大小是超過屏幕長寬的。

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

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

實現(xiàn)原理

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

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

movable-area是movable-view的容器，是官方提供的拖拽移動組件，用來移動截取框的四個角。這個組件支持多個點同時移動。

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

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

最后截圖，通過四個點的位置計算出截圖框的位置，然后放大對應(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)原理


特點

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

截圖框能夠通過拖拽四個角來調(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)用組件時，需要傳入cropperData、cropperMovableItems、cropperChangableData，因為數(shù)據(jù)和事件都是綁定在Page上的，所以要避免使用組件里面已經(jīng)被占用的命名。
/pages/index/index.wxml

/pages/index/index.js

// 獲取顯示區(qū)域長寬
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"], // 可以指定來源是相冊還是相機，默認(rèn)二者都有
            success(res) {
                const tempFilePath = res.tempFilePaths[0]
                console.log(tempFilePath)
                
                // 將選取圖片傳入cropper，并顯示cropper
                // mode=rectangle 返回圖片path
                // mode=quadrangle 返回4個點的坐標(biāo)，并不返回圖片。這個模式需要配合后臺使用，用于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() //隱藏，我在項目里是點擊完成就上傳，所以如果回調(diào)是上傳，那么隱藏掉就行了，不用previewImage
                    }
                })
            }
        })
    }
})

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

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

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

源代碼

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

wepy 版本：github: callmesoul/wepy-corpper

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88613.html

相關(guān)文章

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

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

    Freeman 評論0 收藏0

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

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

    tanglijun 評論0 收藏0

  • 2017-10-19 前端日報

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

    v1 評論0 收藏0

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

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

    you_De 評論0 收藏0

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

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

    lwx12525 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<