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

jay_tian 發布于2019-08-21 16:41 / 2897人閱讀

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

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

下面介紹一下實現原理和使用方法。

實現原理

組件wxml的層次結構圖如下：

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

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

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

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

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

wx.canvasToTempFilePath({
  x: x,
  y: y,
  width: w,
  height: h,
  destWidth: w,
  destHeight: h,
  canvasId: "originalCanvas",
  success: function (res) {
  }
)}

旋轉原理

特點

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

截圖框能夠通過拖拽四個角來調整選區大小

使用

假設我們的應用文件結構如下：

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

調用組件時，需要傳入cropperData、cropperMovableItems、cropperChangableData，因為數據和事件都是綁定在Page上的，所以要避免使用組件里面已經被占用的命名。
/pages/index/index.wxml

/pages/index/index.js

// 獲取顯示區域長寬
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
        // 初始化組件數據和綁定事件
        cropper.init.apply(that, [W, H]);
    },
    selectTap() {
        var that = this

        wx.chooseImage({
            count: 1, // 默認9
            sizeType: ["original", "compressed"], // 可以指定是原圖還是壓縮圖，默認二者都有
            sourceType: ["album", "camera"], // 可以指定來源是相冊還是相機，默認二者都有
            success(res) {
                const tempFilePath = res.tempFilePaths[0]
                console.log(tempFilePath)
                
                // 將選取圖片傳入cropper，并顯示cropper
                // mode=rectangle 返回圖片path
                // mode=quadrangle 返回4個點的坐標，并不返回圖片。這個模式需要配合后臺使用，用于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() //隱藏，我在項目里是點擊完成就上傳，所以如果回調是上傳，那么隱藏掉就行了，不用previewImage
                    }
                })
            }
        })
    }
})

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

@import "/welCropper/welCropper.wxss";

注意

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

源代碼

Github:tomfriwel/welCropper，將welCropper文件夾復制到自己項目，引入調用就行了。

wepy 版本：github: callmesoul/wepy-corpper

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

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

GPU云服務器云服務器微信小程序組件微信小程序技術實現微信小程序怎么使用怎樣使用微信小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88613.html

微信小程序開發中遇到的問題及解決辦法：微信小程序ad自適應布局（二）

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

Freeman 2019-08-02 16:11 評論0 收藏0
微信小程序開發中遇到的問題及解決辦法：微信小程序ad自適應布局（二）

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

tanglijun 2019-08-23 16:46 評論0 收藏0
2017-10-19 前端日報

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

v1 2019-08-21 17:07 評論0 收藏0
前端空間 - 收藏集 - 掘金

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

you_De 2019-08-29 12:34 評論0 收藏0
前端空間 - 收藏集 - 掘金

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

lwx12525 2019-08-20 16:35 評論0 收藏0