微信小程序：截图组件welCropper，实现原理及其使用

jay_tian 发布于2019-08-21 16:41 / 2849人阅读

摘要：最近做项目的时候，需要做一个截图功能。因为所以，就自己动手写了一个截图组件。下面介绍一下实现原理和使用方法。用来绘制适应屏幕比例大小的图片，因为通常原图大小是超过屏幕长宽的。

最近做项目的时候，需要做一个截图功能。用了一个别人写的截图工具，发现截出的图质量下降了，但是我们图片要用来做识别, 需要保证截出的图质量不下降。而且也不支持通过拖动来调整截图框的大小。所以这个截图工具无法满足需求。因为所以，就自己动手写了一个截图组件。

下面介绍一下实现原理和使用方法。

实现原理

组件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云服务器云服务器微信小程序组件微信小程序技术实现微信小程序怎么使用怎样使用微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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