From 3531fad4bb9747ad45746af5d6488a6f297283ce Mon Sep 17 00:00:00 2001
From: tomfriwel <976932447@qq.com>
Date: Thu, 1 Mar 2018 14:00:10 +0800
Subject: [PATCH] test
---
project/app.json | 4 +-
project/components/welCropper/welCropper.js | 205 ++++--------------
project/components/welCropper/welCropper.wxss | 167 +-------------
project/pages/componentTest/componentTest.js | 68 +++++-
.../pages/componentTest/componentTest.json | 6 +-
.../pages/componentTest/componentTest.wxml | 6 +-
project/welCropper/welCropper.js | 6 +
7 files changed, 122 insertions(+), 340 deletions(-)
diff --git a/project/app.json b/project/app.json
index ff79370..893b8b3 100644
--- a/project/app.json
+++ b/project/app.json
@@ -1,8 +1,8 @@
{
"pages": [
"pages/index/index",
- "pages/test/test",
- "pages/componentTest/componentTest"
+ "pages/componentTest/componentTest",
+ "pages/test/test"
],
"window": {
"backgroundTextStyle": "light",
diff --git a/project/components/welCropper/welCropper.js b/project/components/welCropper/welCropper.js
index 8a2f929..f77738c 100644
--- a/project/components/welCropper/welCropper.js
+++ b/project/components/welCropper/welCropper.js
@@ -5,183 +5,70 @@ const device = wx.getSystemInfoSync()
const W = device.windowWidth
const H = device.windowHeight - 50
-var cropperUtil = require("./welCropperUtil.js")
+console.log('component')
+console.log(W)
+console.log(H)
+
+let cropper = require('../../welCropper/welCropper.js');
Component({
/**
* 组件的属性列表
*/
properties: {
- isShow: {
- type: Boolean,
- value: false,
+ cropperOptions: {
+ type: Object,
+ value: null,
observer: function (newVal, oldVal) {
+
+ console.log(2)
console.log(newVal)
- this.data.cropperData.hidden = !newVal
- this.setData({
- cropperData: this.data.cropperData
- })
- }
- },
- path: {
- type: String,
- value: '',
- observer: function (path) {
- console.log(this.data)
- var mode = 'rectangle'
- this.showCropper({
- src: path,
- mode: mode,
- sizeType: ['original', 'compressed'], //'original'(default) | 'compressed'
- callback: (res) => {
- if (mode == 'rectangle') {
- console.log("crop callback:" + res)
- wx.previewImage({
- current: '',
- urls: [res]
- })
- }
- else {
- console.log('callback :' + res)
- wx.showModal({
- title: '',
- content: JSON.stringify(res),
- })
+ // this.data.cropperData.hidden = newVal.hidden
+ // this.setData({
+ // cropperData: this.data.cropperData
+ // })
+ if (this.data.ready) {
+ this.showCropper({
+ src: newVal.src,
+ mode: newVal.mode,
+ sizeType: newVal.sizeType, //'original'(default) | 'compressed'
+ callback: (res) => {
+ if (mode == 'rectangle') {
+ console.log("crop callback:" + res)
+ wx.previewImage({
+ current: '',
+ urls: [res]
+ })
+ }
+ else {
+ console.log('callback :' + res)
+ wx.showModal({
+ title: '',
+ content: JSON.stringify(res),
+ })
- console.log(res)
- }
+ console.log(res)
+ }
- // that.hideCropper() //隐藏，我在项目里是点击完成就上传，所以如果回调是上传，那么隐藏掉就行了，不用previewImage
- }
- })
+ // that.hideCropper() //隐藏，我在项目里是点击完成就上传，所以如果回调是上传，那么隐藏掉就行了，不用previewImage
+ }
+ })
+ }
}
- }
+ },
},
-
- /**
- * 组件的初始数据
- */
data: {
- cropperData: {
- hidden: true,
- left: 0,
- top: 0,
- width: W,
- height: H,
- itemLength: 50,
- imageInfo: {
- path: '',
- width: 0,
- height: 0
- },
- scaleInfo: {
- x: 1,
- y: 1
- },
- cropCallback: null,
- sizeType: ['original', 'compressed'], //'original'(default) | 'compressed'
- original: false, // 默认压缩，压缩比例为截图的0.4
- mode: 'rectangle', //默认矩形
- },
- cropperMovableItems: {
- topleft: {
- x: 50,
- y: 50
- },
- topright: {
- x: W - 50,
- y: 50
- },
- bottomleft: {
- x: 50,
- y: H - 50
- },
- bottomright: {
- x: W - 50,
- y: H - 50
- }
- },
- cropperChangableData: {
- canCrop: true,
- rotateDegree: 0,
- originalSize: {
- width: 0,
- height: 0
- },
- scaleSize: {
- width: 0,
- height: 0
- },
- shape: {
-
- }
- }
+ ready:false,
},
ready: function () {
- // this.setData({
- // cropperData: {
- // hidden: true,
- // left: 0,
- // top: 0,
- // width: W,
- // height: H,
- // itemLength: 50,
- // imageInfo: {
- // path: '',
- // width: 0,
- // height: 0
- // },
- // scaleInfo: {
- // x: 1,
- // y: 1
- // },
- // cropCallback: null,
- // sizeType: ['original', 'compressed'], //'original'(default) | 'compressed'
- // original: false, // 默认压缩，压缩比例为截图的0.4
- // mode: 'rectangle', //默认矩形
- // },
- // cropperMovableItems: {
- // topleft: {
- // x: -1,
- // y: -1
- // },
- // topright: {
- // x: -1,
- // y: -1
- // },
- // bottomleft: {
- // x: -1,
- // y: -1
- // },
- // bottomright: {
- // x: -1,
- // y: -1
- // }
- // },
- // width:220,
- // height:220,
- // length:50,
- // x:-1,
- // y:-1,
- // cropperChangableData: {
- // canCrop: true,
- // rotateDegree: 0,
- // originalSize: {
- // width: 0,
- // height: 0
- // },
- // scaleSize: {
- // width: 110,
- // height: 110
- // }
- // }
- // })
+ console.log(1)
- console.log('ready')
- console.log(this.data.cropperMovableItems)
+ cropper.init.apply(this, [W, H]);
- cropper.init.apply(that, [W, H]);
+ this.setData({
+ ready:true
+ })
},
methods: { // 显示cropper，如果有图片则载入
}
diff --git a/project/components/welCropper/welCropper.wxss b/project/components/welCropper/welCropper.wxss
index 6a97ac6..f7e2064 100644
--- a/project/components/welCropper/welCropper.wxss
+++ b/project/components/welCropper/welCropper.wxss
@@ -1,168 +1,3 @@
/* components/welCropper.wxss */
-@import "/welCropper/welCropper.wxss";
-
-.cropper_main_container {
- position: absolute;
- left: 0;
- top: 0;
- z-index: 100;
- width: 750rpx;
- height: 100vh;
- background: #555;
- overflow: hidden;
-}
-
-.cropper_main_container.hidden {
- display: none;
-}
-
-.cropper_container {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
-}
-
-/* button */
-
-.cropper_toolbar {
- position: absolute;
- z-index: 100;
- bottom: 0;
- height: 50px;
- background: black;
- width: 100%;
- line-height: 50px;
- font-size: 15px;
- text-align: center;
- color: white;
-}
-
-.cropper_toolbar .button_item {
- /* width: 70px; */
- float: left;
- width: 25%;
- height: 50px;
-}
-
-/* cancel_button */
-
-/* .cancel_button {
- position: absolute;
- left: 0;
- top: 0;
-} */
-
-/* original_button */
-
-/* .original_button {
- position: relative;
- margin: 0 auto;
- width: 70px;
- height: 50px;
-} */
-
-.original_button .check_container {
- position: relative;
- float: left;
- margin-top: 14px;
- width: 18px;
- height: 18px;
- border: 1px solid white;
-}
-
-.original_button.checked {
- background: #26ab28;
-}
-
-/* .original_button .check_container .check_border {
- position: absolute;
- left: 0;
- top: 0;
- width: 18px;
- height: 18px;
- border-radius: 50%;
- border: 1px solid #fff;
- overflow: hidden;
-}
-
-.original_button .check_container .check_center {
- position: absolute;
- left: 3px;
- top: 3px;
- width: 14px;
- height: 14px;
- border-radius: 50%;
- overflow: hidden;
-}
-
-.original_button.checked .check_container .check_center {
- background: #26ab28;
-}
-
-.original_button .check_text {
- float: left;
- width: 50px;
-} */
-
-/* rotate image */
-
-/* .rotate_button {
- position: absolute;
- left: 50px;
- top: 0;
-} */
-
-/* crop_image_button */
-
- .crop_image_button {
- /* position: absolute;
- right: 0;
- top: 0; */
- color: #26ab28;
-}
-
-.crop_image_button.disable {
- /* color: #038905; */
- color: rgba(0, 0, 0, 0);
-}
-
-/* canvas */
-
-
-.cropper_canvas_container {
- position: absolute;
- left: 0;
- top: 0;
-}
-
-/* opacity:0隐藏，如果想看就设置为1，只能在测试机能看到，真机上canvas层级在最高层 */
-/* movable */
-.cropper_movable_area_container {
- position: absolute;
- /* margin: 0 auto; */
- border: 2rpx solid red;
-}
-.cropper_movable_area_container .move_item {
- z-index: 100;
- opacity: 0.7;
- /* opacity: 0; */
- background: red;
- border-radius: 50%;
-}
-
-.cropper_canvas_container .canvas {
- position: absolute;
- left: 0;
- top: 0;
- /* opacity: 0; */
-}
-
-/* 因为display:none在真机上会造成无法截取图片，所以这里是通过移到显示区域外来达到隐藏效果的 */
-
-.original_canvas {
- position: absolute;
- left: 750rpx;
- top: 100vh;
-}
+@import "/welCropper/welCropper.wxss";
\ No newline at end of file
diff --git a/project/pages/componentTest/componentTest.js b/project/pages/componentTest/componentTest.js
index 5ebc90f..b6dd1d5 100644
--- a/project/pages/componentTest/componentTest.js
+++ b/project/pages/componentTest/componentTest.js
@@ -1,20 +1,68 @@
// pages/componentTest/componentTest.js
+const device = wx.getSystemInfoSync()
+const W = device.windowWidth
+const H = device.windowHeight - 50
+
+console.log('page')
+console.log(W)
+console.log(H)
+
Page({
data: {
- path: '',
- isShowCropper: false
+ cropperOptions: {
+ hidden: true,
+ src: '',
+ mode: '',
+ sizeType: []
+ }
},
onLoad: function (options) {
},
- openCropper: function () {
- this.setData({
- isShowCropper: !this.data.isShowCropper
- })
- },
- cropperHide: function () {
- this.setData({
- isShowCropper: false
+ selectTap(e) {
+ let z = this
+ let mode = e.currentTarget.dataset.mode
+
+ wx.chooseImage({
+ count: 1,
+ 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[1] //rectangle, quadrangle
+ z.setData({
+ cropperOptions: {
+ hidden: false,
+ src: tempFilePath,
+ mode: mode,
+ sizeType: ['original', 'compressed'], //'original'(default) | 'compressed'
+ }
+ })
+ }
})
},
+ cropperComplete:function(e) {
+ // that.hideCropper() //隐藏，我在项目里是点击完成就上传，所以如果回调是上传，那么隐藏掉就行了，不用previewImage
+ if (mode == 'rectangle') {
+ console.log("crop callback:" + res)
+ wx.previewImage({
+ current: '',
+ urls: [res]
+ })
+ }
+ else {
+ wx.showModal({
+ title: '',
+ content: JSON.stringify(res),
+ })
+
+ console.log(res)
+ }
+ }
})
diff --git a/project/pages/componentTest/componentTest.json b/project/pages/componentTest/componentTest.json
index 9e26dfe..6814157 100644
--- a/project/pages/componentTest/componentTest.json
+++ b/project/pages/componentTest/componentTest.json
@@ -1 +1,5 @@
-{}
\ No newline at end of file
+{
+ "usingComponents": {
+ "wel-cropper": "/components/welCropper/welCropper"
+ }
+}
\ No newline at end of file
diff --git a/project/pages/componentTest/componentTest.wxml b/project/pages/componentTest/componentTest.wxml
index fa96011..e518764 100644
--- a/project/pages/componentTest/componentTest.wxml
+++ b/project/pages/componentTest/componentTest.wxml
@@ -1,3 +1,5 @@
-
-
+
+
+
+
diff --git a/project/welCropper/welCropper.js b/project/welCropper/welCropper.js
index bd9e8b9..0e9bc4b 100644
--- a/project/welCropper/welCropper.js
+++ b/project/welCropper/welCropper.js
@@ -249,6 +249,7 @@ var init = function (W, H) {
// 显示cropper，如果有图片则载入
that.showCropper = (options) => {
+ console.log(options)
let z = this
let cropperData = z.data.cropperData
let src = options.src
@@ -461,6 +462,11 @@ var init = function (W, H) {
}
},
fail(res) {
+ wx.hideLoading()
+ wx.showModal({
+ title: '截取失败',
+ content: res.errMsg
+ })
console.log("fail res:")
console.log(res)
}