All Projects → tomfriwel → Welcropper

tomfriwel / Welcropper

welCropper 微信小程序截图工具

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Welcropper

We Cropper
微信小程序图片裁剪工具
Stars: ✭ 1,972 (+735.59%)
Mutual labels:  cropper, wechat, weapp
Wechat Weapp Movie
🎬电影推荐 - 微信小程序
Stars: ✭ 1,355 (+474.15%)
Mutual labels:  wechat, weapp
Weapp Ssha
企业官网 小程序 源码
Stars: ✭ 233 (-1.27%)
Mutual labels:  wechat, weapp
Omi
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架
Stars: ✭ 12,153 (+5049.58%)
Mutual labels:  wechat, weapp
Weapp Qrcode
weapp.qrcode.js 在 微信小程序 中,快速生成二维码
Stars: ✭ 1,194 (+405.93%)
Mutual labels:  wechat, weapp
Wechat Webapp Douban Movie
微信小程序开发之豆瓣电影
Stars: ✭ 84 (-64.41%)
Mutual labels:  wechat, weapp
Weapp Qrcode Base64
微信小程序生成二维码的插件,基于base64编码输出二维码,不依赖canvas
Stars: ✭ 100 (-57.63%)
Mutual labels:  wechat, weapp
Image Cropper
💯一款功能强大的微信小程序图片裁剪插件
Stars: ✭ 893 (+278.39%)
Mutual labels:  cropper, wechat
Wxapp Webpack Plugin
📦 微信小程序 webpack 插件
Stars: ✭ 185 (-21.61%)
Mutual labels:  wechat, weapp
Weapp Mark
🔥 豆瓣类影视查询记录小程序,附学习笔记
Stars: ✭ 187 (-20.76%)
Mutual labels:  wechat, weapp
Nxdc Milktea
一套仿奈雪の茶小程序的前端模板
Stars: ✭ 198 (-16.1%)
Mutual labels:  wechat, weapp
Wemark
微信小程序Markdown渲染库
Stars: ✭ 1,159 (+391.1%)
Mutual labels:  wechat, weapp
Tina
💃 一款轻巧的渐进式微信小程序框架
Stars: ✭ 1,153 (+388.56%)
Mutual labels:  wechat, weapp
Wxmlify
一个轻量快速的插件,帮助你在微信小程序中显示富文本编辑器生成的HTML。
Stars: ✭ 93 (-60.59%)
Mutual labels:  wechat, weapp
Xiaochengxu demos
小程序优秀项目源码汇总,每个项目都有图有源码,零基础学微信小程序,小程序表格,小程序视频,小程序视频弹幕,小程序仿天猫大转盘抽奖等源码,小程序云开发,小程序发邮件,小程序支付,微信支付,持续更新。。。
Stars: ✭ 855 (+262.29%)
Mutual labels:  wechat, weapp
Wechat Weapp Mobx
微信小程序(wechat weapp) mobx 绑定, 跨页面通信的利器, 现已发布npm包
Stars: ✭ 208 (-11.86%)
Mutual labels:  wechat, weapp
Miniapp
微信小程序服务端 SDK (for Golang)
Stars: ✭ 815 (+245.34%)
Mutual labels:  wechat, weapp
Masterwechatapp
『微信小程序』优秀教程、轮子、开源项目 资源汇总
Stars: ✭ 826 (+250%)
Mutual labels:  wechat, weapp
We Validator
💯 简单灵活的表单验证插件,支持小程序、浏览器以及Nodejs端使用
Stars: ✭ 180 (-23.73%)
Mutual labels:  wechat, weapp
Weapp Demo
微信小程序示例教程,案例涉及某瓣,所以下线了:https://github.com/zce/weapp-douban
Stars: ✭ 2 (-99.15%)
Mutual labels:  wechat, weapp

welCropper 微信小程序截图工具

todo list

  • [x] 固定正方形(beta页面)

注意

  • 不建议用在过大的图片上,有些机型会导致崩溃(原因可能是将图片绘制在canvas上后的大小远远超过原图,有时一开始就会崩溃,有时调用wx.canvasToTempFilePath会崩溃)
----

wepy 版本(别人根据我的这个封装的,可以去看看,我并没有测试过,大家有需求的可以去试试)

callmesoul/wepy-corpper

文件目录结构,要在测试机上运行,工程目录选择文件夹project

.
├── app.js
├── app.json
├── app.wxss
├── components
│   ├── room
│   │   ├── room.js
│   │   ├── room.json
│   │   ├── room.wxml
│   │   └── room.wxss
│   └── welCropper
│       ├── package.json
│       ├── welCropper.js
│       ├── welCropper.json
│       ├── welCropper.wxml
│       ├── welCropper.wxss
│       └── welCropperUtil.js
├── images
│   └── my.jpeg
├── pages
│   ├── componentTest
│   │   ├── componentTest.js
│   │   ├── componentTest.json
│   │   ├── componentTest.wxml
│   │   └── componentTest.wxss
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── test
│       ├── test.js
│       ├── test.json
│       ├── test.wxml
│       └── test.wxss
├── project.config.json
└── welCropper
    ├── package.json
    ├── welCropper.js
    ├── welCropper.wxml
    ├── welCropper.wxss
    └── welCropperUtil.js
  • 保证图片质量,也可以选择压缩图
  • 支持图片旋转
  • 自由选择截图框

两种模式

通过showCroppermode设定

  • mode:'rectangle' 返回图片
  • mode:'quadrangle' 并不返回图片,只返回在图片中的四个点,用于perspective correction(可以查找OpenCV相关资料)

Documents

  • 使用movable-view的原因是不用自己实现拖拽,直接使用官方提供的这个组件。

因为cropper的数据和事件是直接绑定到Page上的,所以数据和事件命名应该避免一下名字(之后会想办法避免这种情况)及其相关解释:

data中的名字:

  • cropperData
  • cropperMovableItems
  • cropperChangableData

函数名:

  • showCropper
  • hideCropper
  • originalChange
  • cropImage
  • loadImage
  • clearCanvas
  • drawImage
  • drawOriginalImage
  • drawLines
  • setupMoveItem
  • moveEvent
  • endEvent

外部只用到showCropperhideCropper

/**
    src:输入图片地址
    callback(res):点击“完成”按钮后毁掉函数,毁掉函数中会有截图地址
*/
showCropper({
    src,    //字符串, 图片path
    mode,   //字符串, "rectangle" 或 "quadrangle". quadrangle只会返回4个点的坐标. rectangle返回截图path
    sizeType,   //数组, ['original', 'compressed'], 默认original
    callback    //回调函数, callback(res): mode=rectangle, res=path; mode=quadrangle, res=[[x,y], [x,y], [x,y], [x,y]]
})

使用

welCropper复制到自己的工程当中(以/pages/index/index为例)

通过npm安装

$ npm install wel-cropper-template //for template

$ npm install wel-cropper-component //for component

通过npm安装的需要修改一下相应的引入路径。

比如template版:

<import src="/node_modules/wel-cropper-template/welCropper" />

component版页面json中:

{
    ...
    "usingComponents": {
        "wel-cropper": "/node_modules/wel-cropper-component/welCropper"
    },
    ...
}
wxml引入并调用:
<!-- 引入组件 -->
<import src="/welCropper/welCropper" />

<!-- 调用组件 -->
<template is="welCropper" data="{{data:cropperData, cropperMovableItems:cropperMovableItems, cropperChangableData:cropperChangableData}}"></template>

<!-- 用于选择图片,传入cropper中 -->
<button bindtap='selectTap'>select image</button>
wxss引入:
@import "/welCropper/welCropper.wxss";
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
                // maxLength=1000 默认2000,允许最大长宽,避免分辨率过大导致崩溃
                let modes = ["rectangle", "quadrangle"]
                let mode = modes[0]   //rectangle, quadrangle
                that.showCropper({
                    src: tempFilePath,
                    mode: mode,
                    sizeType: ['original', 'compressed'],   //'original'(default) | 'compressed'
                    maxLength: 1000,
                    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
                    }
                })
            }
        })
    }
})
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].