├── README.md
└── una2
├── app.js
├── app.json
├── app.wxss
├── images
├── cat.jpeg
├── img1.jpg
├── img5.jpg
├── one.png
├── one_normal.png
├── three.png
├── three_normal.png
├── two.png
└── two_normal.png
├── pages
├── allEffect
│ ├── allEffect.js
│ ├── allEffect.json
│ ├── allEffect.wxml
│ └── allEffect.wxss
├── avatarUpload
│ ├── index
│ │ ├── draw.js
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── second
│ │ ├── second.js
│ │ ├── second.json
│ │ ├── second.wxml
│ │ └── second.wxss
├── index
│ ├── index.js
│ ├── index.json
│ ├── index.wxml
│ └── index.wxss
├── picture
│ ├── picture.js
│ ├── picture.json
│ ├── picture.wxml
│ └── picture.wxss
├── style
│ └── common.wxss
├── upload
│ ├── upload.js
│ ├── upload.json
│ ├── upload.wxml
│ └── upload.wxss
└── we-cropper
│ ├── we-cropper.js
│ └── we-cropper.wxml
├── project.config.json
└── utils
└── util.js
/README.md:
--------------------------------------------------------------------------------
1 | # Xmxcx
2 | 海报图片处理
3 |
--------------------------------------------------------------------------------
/una2/app.js:
--------------------------------------------------------------------------------
1 | //app.js
2 |
3 | App({
4 | onLaunch: function () {
5 | },
6 | globalData:{
7 | userInfo:null,
8 | imgArr : [
9 | { img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', u: "u uone", url: "../avatarUpload/index/index" },
10 | { img: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', u: "u utwo", url: "../avatarUpload/second/second" }
11 | ],
12 | templateData:{}
13 | }
14 | })
--------------------------------------------------------------------------------
/una2/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages":[
3 |
4 | "pages/index/index",
5 | "pages/avatarUpload/index/index",
6 | "pages/avatarUpload/second/second",
7 | "pages/picture/picture",
8 |
9 | "pages/upload/upload",
10 | "pages/allEffect/allEffect"
11 | ],
12 | "window":{
13 | "backgroundTextStyle":"dark",
14 | "navigationBarBackgroundColor": "#000",
15 | "navigationBarTitleText": "海报",
16 | "navigationBarTextStyle":"white"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/una2/app.wxss:
--------------------------------------------------------------------------------
1 | /**app.wxss**/
2 | .container {
3 | /* height: 100%;
4 | display: flex;
5 | flex-direction: column;
6 | align-items: center;
7 | justify-content: space-between;
8 | padding: 200rpx 0;
9 | box-sizing: border-box; */
10 | }
11 | page{
12 | -webkit-user-select: none;
13 | user-select: none;
14 | width: 100%;
15 | height: 100%;
16 | background-color: #f8f8f8;
17 | font-family: Arial, Helvetica, sans-serif;
18 | overflow-x: hidden;
19 | }
20 |
21 | .flex{
22 | display: flex;
23 | justify-content: center;
24 | align-items: center;
25 | }
26 | .none{
27 | display: none
28 | }
--------------------------------------------------------------------------------
/una2/images/cat.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UnaBella/Xmxcx/64612fa3d223691c13bc163ce74da40979693ce9/una2/images/cat.jpeg
--------------------------------------------------------------------------------
/una2/images/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UnaBella/Xmxcx/64612fa3d223691c13bc163ce74da40979693ce9/una2/images/img1.jpg
--------------------------------------------------------------------------------
/una2/images/img5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UnaBella/Xmxcx/64612fa3d223691c13bc163ce74da40979693ce9/una2/images/img5.jpg
--------------------------------------------------------------------------------
/una2/images/one.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UnaBella/Xmxcx/64612fa3d223691c13bc163ce74da40979693ce9/una2/images/one.png
--------------------------------------------------------------------------------
/una2/images/one_normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UnaBella/Xmxcx/64612fa3d223691c13bc163ce74da40979693ce9/una2/images/one_normal.png
--------------------------------------------------------------------------------
/una2/images/three.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UnaBella/Xmxcx/64612fa3d223691c13bc163ce74da40979693ce9/una2/images/three.png
--------------------------------------------------------------------------------
/una2/images/three_normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UnaBella/Xmxcx/64612fa3d223691c13bc163ce74da40979693ce9/una2/images/three_normal.png
--------------------------------------------------------------------------------
/una2/images/two.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UnaBella/Xmxcx/64612fa3d223691c13bc163ce74da40979693ce9/una2/images/two.png
--------------------------------------------------------------------------------
/una2/images/two_normal.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/UnaBella/Xmxcx/64612fa3d223691c13bc163ce74da40979693ce9/una2/images/two_normal.png
--------------------------------------------------------------------------------
/una2/pages/allEffect/allEffect.js:
--------------------------------------------------------------------------------
1 | // pages/allEffect/allEffect.js
2 | Page({
3 | data: {
4 | saturate: 170,
5 | brightness: 110,
6 | contrast: 70
7 | },
8 | baohedu: function (e) {
9 | var self = this;
10 | self.setData({
11 | saturate: e.detail.value
12 | });
13 | },
14 | liangdu: function (e) {
15 | var self = this;
16 | self.setData({
17 | brightness: e.detail.value
18 | });
19 | },
20 | duibidu: function (e) {
21 | var self = this;
22 | self.setData({
23 | contrast: e.detail.value
24 | });
25 | }
26 | })
--------------------------------------------------------------------------------
/una2/pages/allEffect/allEffect.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/una2/pages/allEffect/allEffect.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | 饱和度
4 |
5 | 亮度
6 |
7 | 对比度
8 |
9 |
10 |
--------------------------------------------------------------------------------
/una2/pages/allEffect/allEffect.wxss:
--------------------------------------------------------------------------------
1 | /* pages/allEffect/allEffect.wxss */
--------------------------------------------------------------------------------
/una2/pages/avatarUpload/index/draw.js:
--------------------------------------------------------------------------------
1 | var ctx = wx.createCanvasContext('myCanvas');
2 | var bg_w;
3 | var bg_h;
4 | var ratio;
5 |
6 | wx.getSystemInfo({
7 | success: function(res) {
8 | console.log(res);
9 | ratio = res.pixelRatio;
10 | bg_w = res.windowWidth;
11 | bg_h = res.windowHeight
12 | },
13 | })
14 |
15 |
16 | function draw(){
17 | ctx.drawImage(bg, 0, 0, bg_w, bg_h);
18 | }
19 | module.exports = {
20 | draw: draw
21 | }
22 |
--------------------------------------------------------------------------------
/una2/pages/avatarUpload/index/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by sail on 2017/4/14.
3 | */
4 | var draw = require('./draw.js');
5 | const app = getApp();
6 | Page({
7 | data: {
8 | srcsss: {
9 | '0': {
10 | 'src': ''
11 | }
12 | },
13 | src: '',
14 | bg:'',
15 | //饱和度 / 亮度 / 对比度 / 灰度 / 陈旧度（褐色）
16 | saturate: 100,
17 | brightness: 100,
18 | contrast: 100,
19 | grayscale: 0,
20 | sepia: 0,
21 | pixelRatio : 0,
22 | windowWidth : 0,
23 | windowHeight : 0,
24 | genateBtnShow: 'none',
25 | containerShow : '',
26 | canvasShow : '',
27 | targetImg :{
28 | width:93,
29 | height:93,
30 | left: 140,
31 | top:215,
32 | src : ''
33 | }
34 | },
35 | //输入框
36 | bindTextAreaBlur: function (e) {
37 | console.log(e.detail.value)
38 | },
39 |
40 | tofilter: function (option) {
41 | wx.navigateTo({
42 | url: '../../../pages/picture/picture?datai=' + option.currentTarget.dataset.i
43 | })
44 | },
45 |
46 |
47 | onLoad : function (option) {
48 | let avatar, index;
49 | if (option.avatar !== undefined) { avatar = option.avatar };
50 |
51 | if (avatar !== undefined) {
52 | this.setData({
53 | src: avatar
54 | })
55 | }
56 |
57 |
58 | if (option.index !== undefined) {
59 | index = 1 * (option.index);
60 | //全局变量方式
61 | var imgArr = app.globalData.imgArr;
62 | this.setData({
63 | bg: imgArr[index].img
64 | });
65 | }
66 | },
67 | onShow : function(){
68 | var _this = this;
69 | this.data.src = this.data.srcsss['0'].src;
70 | if (this.data.src !== ''){
71 | //显示生成图片按钮
72 | this.setData({
73 | genateBtnShow : ''
74 | });
75 |
76 | //设置设备参数
77 | wx.getSystemInfo({
78 | success: function (res) {
79 | _this.setData({
80 | pixelRatio: res.pixelRatio,
81 | windowWidth: res.windowWidth,
82 | windowHeight: res.windowHeight
83 | })
84 | }
85 | });
86 | }
87 | },
88 | generatePic : function(e){
89 | var ctx = wx.createCanvasContext('canvas');
90 | var _this = this;
91 | var data = this.data;
92 | var bg_w = data.windowWidth * data.pixelRatio;
93 | var bg_h = data.windowHeight * data.pixelRatio;
94 | var head_w = data.targetImg.width * data.pixelRatio;
95 | var head_h = data.targetImg.height * data.pixelRatio;
96 | var head_left = data.targetImg.left * data.pixelRatio;
97 | var head_top = data.targetImg.top * data.pixelRatio;
98 |
99 | wx.showLoading({
100 | title: '生成中...',
101 | })
102 | //将图片保存到本地（canvas绘制线上图片时，必须先下载到本地,真机不显示）
103 | wx.downloadFile({
104 | url: data.bg,
105 | success: function (res) {
106 | if (res.statusCode === 200) {
107 | wx.saveFile({
108 | tempFilePath: res.tempFilePath, //下载后的图片临时地址
109 | success: function (res) {
110 | var savedFilePath = res.savedFilePath
111 | //头像，描述生成海报
112 | //1.绘制背景
113 | ctx.drawImage(savedFilePath, 0, 0, bg_w, bg_h);
114 | ctx.draw(true,function(){
115 | //-------------------------------------------------------------------
116 | //2.绘制头像
117 | ctx.drawImage(data.src, head_left, head_top, head_w, head_h);
118 | ctx.draw(true, function () {
119 | //3.canvas生成图片
120 | wx.canvasToTempFilePath({
121 | x: 0,
122 | y: 0,
123 | width: bg_w,
124 | height: bg_h,
125 | destWidth: bg_w,
126 | destHeight: bg_h,
127 | canvasId: 'canvas',
128 | success: function (res) {
129 | _this.setData({
130 | containerShow: 'none',
131 | canvasShow: 'none',
132 | genateBtnShow: 'none',
133 | targetImg: {
134 | src: res.tempFilePath
135 | }
136 | });
137 | wx.hideLoading();
138 | //4.保存到相册
139 | if (wx.saveImageToPhotosAlbum) {
140 | console.log(res.tempFilePath);
141 | wx.saveImageToPhotosAlbum({
142 | filePath: res.tempFilePath,
143 | success: function (res) {
144 | console.log(res);
145 | //Toast
146 | wx.showToast({
147 | title: '保存到相册',
148 | icon: 'success',
149 | duration: 2000
150 | });
151 | },
152 | fail: function (res) {
153 | console.log(res)
154 | console.log('fail')
155 | }
156 | });
157 | } else {
158 | wx.showModal({
159 | title: '提示',
160 | content: '预览长按保存'
161 | })
162 | }
163 |
164 | }
165 | });
166 | });
167 |
168 | });
169 | },
170 | fail: function () {
171 | console.log("保存图片失败")
172 | }
173 | })
174 | }
175 | }
176 | });
177 |
178 | },
179 | /**
180 | * 预览图片
181 | */
182 | previewImage: function (e) {
183 | var current = e.target.dataset.src;
184 | wx.previewImage({
185 | current: current, // 当前显示图片的http链接
186 | urls: [this.data.targetImg.src] // 需要预览的图片http链接列表
187 | })
188 | }
189 | })
190 |
--------------------------------------------------------------------------------
/una2/pages/avatarUpload/index/index.json:
--------------------------------------------------------------------------------
1 | {
2 | "backgroundTextStyle": "dark",
3 | "navigationBarBackgroundColor": "#000",
4 | "navigationBarTitleText": "海报模板",
5 | "navigationBarTextStyle": "#fff"
6 | }
--------------------------------------------------------------------------------
/una2/pages/avatarUpload/index/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | click me
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | 生成图片
14 |
15 |
--------------------------------------------------------------------------------
/una2/pages/avatarUpload/index/index.wxss:
--------------------------------------------------------------------------------
1 | .container{
2 | width: 100%;
3 | height: 100%;
4 | }
5 |
6 | .avatar-container{
7 | position: relative;
8 | text-align: center;
9 | padding-top: 50%;
10 | }
11 |
12 |
13 | .avatar{
14 | width: 5rem;
15 | height: 5rem;
16 | background-color: #e5e5e5;
17 | border-radius: 50%;
18 | }
19 |
20 | .item{
21 | line-height: 3rem;
22 | }
23 |
24 | .textarea{
25 | background:rgba(0,0,0,0.4);
26 | color: #fff;
27 | padding: 5px;
28 | max-height: 300px;
29 | }
30 | .textarea textarea{
31 | max-height: 300px;
32 | }
33 | #bg{
34 | position: absolute;
35 | top: 0;
36 | bottom: 0;
37 | width: 100%;
38 | height: 100%;
39 | z-index:-1;
40 |
41 | }
42 | .genate-btn{
43 | width:200rpx;
44 | height:100rpx;
45 | line-height:100rpx;
46 | color:#fff;
47 | text-align:center;
48 | border:1px solid #000;
49 | position:absolute;
50 | right:0;
51 | bottom:0;
52 | background:#000;
53 | }
54 |
55 |
--------------------------------------------------------------------------------
/una2/pages/avatarUpload/second/second.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by sail on 2017/4/14.
3 | */
4 | const app = getApp();
5 | Page({
6 |
7 |
8 | data: {
9 | srcss:['',''],
10 | srcsss:{
11 | '0':{
12 | 'src' : ''
13 | },
14 | '1':{
15 | 'src': ''
16 | }
17 | },
18 | src: '',
19 | bg:'',
20 | //饱和度 / 亮度 / 对比度 / 灰度 / 陈旧度（褐色）
21 | saturate: 100,
22 | brightness: 100,
23 | contrast: 100,
24 | grayscale: 0,
25 | sepia: 0
26 |
27 | },
28 | //输入框
29 | bindTextAreaBlur: function (e) {
30 | console.log(e.detail.value)
31 | },
32 |
33 | tofilter: function (option) {
34 | // console.log(option.currentTarget.dataset.i)
35 | wx.navigateTo({
36 | url: '../../../pages/picture/picture?datai=' + option.currentTarget.dataset.i
37 | })
38 | },
39 |
40 | onLoad : function (option) {
41 | let avatar, index;
42 | if (option.avatar !== undefined) { avatar = option.avatar };
43 |
44 | if (avatar !== undefined) {
45 | this.setData({
46 | src: avatar
47 | })
48 | }
49 |
50 |
51 | if (option.index !== undefined) {
52 | index = 1 * (option.index);
53 |
54 | //全局变量方式
55 | var imgArr = app.globalData.imgArr;
56 | this.setData({
57 | bg: imgArr[index].img
58 | });
59 | }
60 | }
61 |
62 |
63 | })
64 |
--------------------------------------------------------------------------------
/una2/pages/avatarUpload/second/second.json:
--------------------------------------------------------------------------------
1 | {
2 | "backgroundTextStyle": "dark",
3 | "navigationBarBackgroundColor": "#000",
4 | "navigationBarTitleText": "海报模板",
5 | "navigationBarTextStyle": "#fff"
6 | }
--------------------------------------------------------------------------------
/una2/pages/avatarUpload/second/second.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | 生成图片
13 |
--------------------------------------------------------------------------------
/una2/pages/avatarUpload/second/second.wxss:
--------------------------------------------------------------------------------
1 | .container{
2 | width: 100%;
3 | height: 100%;
4 | }
5 |
6 | .avatar-container{
7 | position: relative;
8 | text-align: center;
9 | padding-top: 50%;
10 | }
11 |
12 |
13 | .avatar{
14 | width: 5rem;
15 | height: 5rem;
16 | background-color: #e5e5e5;
17 | border-radius: 50%;
18 | }
19 |
20 | .item{
21 | line-height: 3rem;
22 | }
23 | .textarea{
24 | background:rgba(0,0,0,0.4);
25 | color: #fff;
26 | padding: 5px;
27 | max-height: 300px;
28 | }
29 | .textarea textarea{
30 | max-height: 300px;
31 | }
32 | .genate-btn{
33 | display:block;
34 | width:200rpx;
35 | height:100rpx;
36 | line-height:100rpx;
37 | color:#fff;
38 | text-align:center;
39 | border:1px solid #000;
40 | position:absolute;
41 | right:0;
42 | bottom:0;
43 | background:#000;
44 | display: none
45 | }
46 | #canvas{
47 | display: none
48 | }
--------------------------------------------------------------------------------
/una2/pages/index/index.js:
--------------------------------------------------------------------------------
1 | //index.js
2 | //获取应用实例
3 | const app = getApp();
4 | Page({
5 | data: {
6 | imgUrls: [
7 | 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
8 | 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
9 | 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
10 | ],
11 | indicatorDots: true,
12 | autoplay: true,
13 | interval: 5000,
14 | duration: 1000,
15 |
16 | uimgUrls: app.globalData.imgArr,
17 | },
18 |
19 | onShow:function(){
20 | app.globalData.templateData = {};
21 | },
22 | getIndex: function (option) {
23 | wx.navigateTo({
24 | url: option.currentTarget.dataset.url +'?index=' + option.currentTarget.dataset.i,
25 | })
26 | }
27 |
28 |
29 | })
--------------------------------------------------------------------------------
/una2/pages/index/index.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/una2/pages/index/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 | 快来试海报
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/una2/pages/index/index.wxss:
--------------------------------------------------------------------------------
1 | /**index.wxss**/
2 | .indexcontainer{height: 100%}
3 | .header{height: 30%;}
4 | swiper{height: 100%;}
5 | .slide-image{width: 100%;height: 100%}
6 | .text{
7 | text-align: center;
8 | font-size: .8rem;
9 | /* height: 25px; */
10 | line-height: 2;
11 | }
12 | .content{
13 | height: 60%;
14 | }
15 | .unit{
16 | height: 50%;
17 | display: flex;
18 | }
19 | .u{
20 | flex: 1;
21 | margin: 0 30px;
22 | height: 100%;
23 | }
24 | .u image{width: 100%;height: 100%;}
25 | .uone{
26 | margin-right: 10px;
27 | }
28 | .utwo{
29 | margin-left: 10px;
30 | }
--------------------------------------------------------------------------------
/una2/pages/picture/picture.js:
--------------------------------------------------------------------------------
1 | // pages/picture/picture.js
2 |
3 | Page({
4 | data:{
5 | datai:'',
6 | picArray:[],
7 | //饱和度 / 亮度 / 对比度 / 灰度 / 陈旧度（褐色）
8 | saturate: 100,
9 | brightness: 100,
10 | contrast: 100,
11 | grayscale: 0,
12 | sepia:0
13 | },
14 | onLoad:function(op){
15 |
16 | // console.log(op.datai)
17 | this.data.datai = op.datai;
18 | },
19 | takephoto:function(){
20 | var self = this;
21 | wx.chooseImage({
22 | count: 1, // 最多可以选择的图片张数，默认9
23 | sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
24 | sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
25 | success: function(res){
26 | self.setData({
27 | picArray:res.tempFilePaths
28 | });
29 | // console.log(res);
30 | }
31 | })
32 | },
33 | //模糊
34 | addblur:function(){
35 | var self = this;
36 | self.setData({
37 | oldEffect: 0,
38 | addretro: 0,
39 | addBeati: 0,
40 | addblur:1
41 | });
42 | },
43 | //还原
44 | originpic:function(){
45 | var self = this;
46 | self.setData({
47 | //饱和度 / 亮度 / 对比度 / 灰度 / 陈旧度（褐色）
48 | saturate: 100,
49 | brightness: 100,
50 | contrast: 100,
51 | grayscale: 0,
52 | sepia: 0
53 | });
54 | },
55 | //怀旧
56 | addOld:function(){
57 | var self = this;
58 | self.setData({
59 | //饱和度 / 亮度 / 对比度 / 灰度 / 陈旧度（褐色）
60 | saturate: 110,
61 | brightness: 90,
62 | contrast: 100,
63 | grayscale: 0,
64 | sepia: 50
65 | });
66 | },
67 | //复古
68 | addretro:function(){
69 | var self = this;
70 | self.setData({
71 | //饱和度 / 亮度 / 对比度 / 灰度 / 陈旧度（褐色）
72 | saturate: 90,
73 | brightness: 100,
74 | contrast: 100,
75 | grayscale: 50,
76 | sepia: 5
77 | });
78 | },
79 | //美白
80 | addBeati:function(e){
81 | var self = this;
82 | self.setData({
83 | //饱和度 / 亮度 / 对比度 / 灰度 / 陈旧度（褐色）
84 | saturate: 100,
85 | brightness: 120,
86 | contrast: 100,
87 | grayscale: 0,
88 | sepia: 0
89 | });
90 | },
91 |
92 | baohedu: function (e) {
93 | var self = this;
94 | self.setData({
95 | saturate: e.detail.value
96 | });
97 | },
98 | liangdu: function (e) {
99 | var self = this;
100 | self.setData({
101 | brightness: e.detail.value
102 | });
103 | },
104 | duibidu: function (e) {
105 | var self = this;
106 | self.setData({
107 | contrast: e.detail.value
108 | });
109 | },
110 | huidu: function (e) {
111 | var self = this;
112 | self.setData({
113 | grayscale: e.detail.value
114 | });
115 | },
116 | hese: function (e) {
117 | var self = this;
118 | self.setData({
119 | sepia: e.detail.value
120 | });
121 | },
122 | //跳转剪裁框
123 | toCut : function(op){
124 | // console.log(this.data.datai);
125 | var src = this.data.picArray[0];
126 |
127 | wx.redirectTo({
128 | url: "../upload/upload?src=" + src + "&datai=" + this.data.datai + "&saturate=" + this.data.saturate + "&brightness=" + this.data.brightness + "&contrast=" + this.data.contrast + "&grayscale=" + this.data.grayscale + "&sepia=" + this.data.sepia
129 | })
130 | }
131 | })
--------------------------------------------------------------------------------
/una2/pages/picture/picture.json:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/una2/pages/picture/picture.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | 饱和度
20 |
21 |
22 | 亮度
23 |
24 |
25 | 对比度
26 |
27 |
28 | 灰度
29 |
30 |
31 | 陈旧度
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/una2/pages/picture/picture.wxss:
--------------------------------------------------------------------------------
1 |
2 | /* .addblur {
3 | filter: blur(6px);
4 | } */
5 | .btn {
6 | width:60px;height:34px;font-size:14px
7 | }
8 | .effectview {
9 | display: flex;
10 | flex-direction: row;
11 | justify-content: space-around;
12 | }
13 | .fz14{font-size: 14px;}
14 |
15 | /* .oldeffect {
16 | filter: sepia(.5);
17 | }
18 | .addretro {
19 | filter: grayscale(1);
20 | }
21 | .addBeati {
22 | filter: brightness(130%);
23 | } */
--------------------------------------------------------------------------------
/una2/pages/style/common.wxss:
--------------------------------------------------------------------------------
1 | .cropper-wrapper{
2 | position: relative;
3 | display: flex;
4 | flex-direction: row;
5 | justify-content: space-between;
6 | align-items: center;
7 | justify-content: center;
8 | height: 100%;
9 | background-color: #e5e5e5;
10 | }
11 |
12 | .cropper-buttons{
13 | display: flex;
14 | flex-direction: row;
15 | justify-content: space-between;
16 | align-items: center;
17 | justify-content: center;
18 | position: absolute;
19 | bottom: 0;
20 | left: 0;
21 | width: 100%;
22 | height: 50px;
23 | line-height: 50px;
24 | }
25 |
26 | .cropper-buttons .upload, .cropper-buttons .getCropperImage{
27 | width: 50%;
28 | text-align: center;
29 | }
--------------------------------------------------------------------------------
/una2/pages/upload/upload.js:
--------------------------------------------------------------------------------
1 | import WeCropper from '../we-cropper/we-cropper.js'
2 |
3 | const device = wx.getSystemInfoSync()
4 | const width = device.windowWidth
5 | const height = device.windowHeight - 50
6 | const app = getApp();
7 | Page({
8 | data: {
9 | datai:'',
10 | cropperOpt: {
11 | id: 'cropper',
12 | width,
13 | height,
14 | scale: 2.5,
15 | zoom: 8,
16 | cut: {
17 | x: (width - 300) / 2,
18 | y: (height - 300) / 2,
19 | width: 300,
20 | height: 300
21 | },
22 | //饱和度 / 亮度 / 对比度 / 灰度 / 陈旧度（褐色）
23 | saturate: 100,
24 | brightness: 100,
25 | contrast: 100,
26 | grayscale: 0,
27 | sepia: 0
28 | }
29 | },
30 | touchStart (e) {
31 | this.wecropper.touchStart(e)
32 | },
33 | touchMove (e) {
34 | this.wecropper.touchMove(e)
35 | },
36 | touchEnd (e) {
37 | this.wecropper.touchEnd(e)
38 | },
39 | getCropperImage (option) {
40 | this.wecropper.getCropperImage((avatar) => {
41 | console.log(avatar)
42 | console.log(option)
43 | console.log(this.data.datai);
44 | var num = this.data.datai + '';
45 |
46 | if (avatar) {
47 | // 获取到裁剪后的图片
48 | // wx.redirectTo({
49 | var pages = getCurrentPages();
50 | var currPage = pages[pages.length - 1]; //当前页面
51 | var prevPage = pages[pages.length - 2]; //上一个页面
52 | //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
53 |
54 | app.globalData.templateData[num]={};
55 | app.globalData.templateData[num]['src'] = avatar;
56 | prevPage.setData({
57 | srcsss: app.globalData['templateData'],
58 | saturate: this.data.cropperOpt.saturate,
59 | brightness: this.data.cropperOpt.brightness,
60 | contrast: this.data.cropperOpt.contrast,
61 | grayscale: this.data.cropperOpt.grayscale,
62 | sepia: this.data.cropperOpt.sepia
63 | });
64 | console.log(prevPage.data);
65 | //回到海报模板页
66 | wx.navigateBack({
67 | url: `../avatarUpload/index/aaa?avatar=${avatar}&saturate=${this.data.cropperOpt.saturate}&brightness=${this.data.cropperOpt.brightness}&contrast=${this.data.cropperOpt.contrast}&grayscale=${this.data.cropperOpt.grayscale}&sepia=${this.data.cropperOpt.sepia}`
68 | })
69 |
70 | } else {
71 | console.log('获取图片失败，请稍后重试')
72 | }
73 | })
74 | },
75 | uploadTap () {
76 | const self = this
77 |
78 | wx.chooseImage({
79 | count: 1, // 默认9
80 | sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
81 | sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
82 | success (res) {
83 | console.log(res);
84 | const src = res.tempFilePaths[0]
85 | // 获取裁剪图片资源后，给data添加src属性及其值
86 |
87 | self.wecropper.pushOrign(src)
88 | }
89 | })
90 | },
91 | onLoad (option) {
92 | console.log(option)
93 | this.data.datai = option.datai;
94 | this.setData({
95 | cropperOpt: {
96 | id: 'cropper',
97 | width,
98 | height,
99 | scale: 2.5,
100 | zoom: 8,
101 | cut: {
102 | x: (width - 300) / 2,
103 | y: (height - 300) / 2,
104 | width: 300,
105 | height: 300
106 | },
107 | //饱和度 / 亮度 / 对比度 / 灰度 / 陈旧度（褐色）
108 | saturate: option.saturate,
109 | brightness: option.brightness,
110 | contrast: option.contrast,
111 | grayscale: option.grayscale,
112 | sepia: option.sepia
113 | }
114 | })
115 |
116 | // this.data.cropperOpt.saturate = option.saturate
117 | // this.data.cropperOpt.brightness = option.brightness
118 | // this.data.cropperOpt.contrast = option.contrast
119 | // this.data.cropperOpt.grayscale = option.grayscale
120 | // this.data.cropperOpt.sepia = option.sepia
121 |
122 | const { cropperOpt } = this.data
123 | if (option.src) {
124 | cropperOpt.src = option.src
125 | new WeCropper(cropperOpt)
126 | .on('ready', (ctx) => {
127 | console.log(`wecropper is ready for work!`)
128 | })
129 | .on('beforeImageLoad', (ctx) => {
130 | console.log(`before picture loaded, i can do something`)
131 | console.log(`current canvas context:`, ctx)
132 | wx.showToast({
133 | title: '上传中',
134 | icon: 'loading',
135 | duration: 20000
136 | })
137 | })
138 | .on('imageLoad', (ctx) => {
139 | console.log(`picture loaded`)
140 | console.log(`current canvas context:`, ctx)
141 | wx.hideToast()
142 | })
143 | .on('beforeDraw', (ctx, instance) => {
144 | console.log(`before canvas draw,i can do something`)
145 | console.log(`current canvas context:`, ctx)
146 | })
147 | .updateCanvas()
148 | }
149 | }
150 | })
151 |
--------------------------------------------------------------------------------
/una2/pages/upload/upload.json:
--------------------------------------------------------------------------------
1 | {
2 | "backgroundTextStyle":"dark",
3 | "navigationBarBackgroundColor": "#000",
4 | "navigationBarTitleText": "裁剪",
5 | "navigationBarTextStyle":"#fff"
6 | }
--------------------------------------------------------------------------------
/una2/pages/upload/upload.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
9 | 重新选择
10 |
11 |
14 | 确定
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/una2/pages/upload/upload.wxss:
--------------------------------------------------------------------------------
1 | @import "../style/common.wxss";
2 |
3 | .cropper{
4 | position: absolute;
5 | top: 0;
6 | left: 0;
7 | }
8 |
9 | .cropper-buttons{
10 | background-color: rgba(0, 0, 0, 0.95);
11 | color: #04b00f;
12 | }
--------------------------------------------------------------------------------
/una2/pages/we-cropper/we-cropper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * we-cropper v1.1.5
3 | * (c) 2017 dlhandsome
4 | * @license MIT
5 | */
6 | (function (global, factory) {
7 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
8 | typeof define === 'function' && define.amd ? define(factory) :
9 | (global.WeCropper = factory());
10 | }(this, (function () { 'use strict';
11 |
12 | var device = void 0;
13 | var TOUCH_STATE = ['touchstarted', 'touchmoved', 'touchended'];
14 |
15 | function firstLetterUpper (str) {
16 | return str.charAt(0).toUpperCase() + str.slice(1)
17 | }
18 |
19 | function setTouchState (instance) {
20 | var arg = [], len = arguments.length - 1;
21 | while ( len-- > 0 ) arg[ len ] = arguments[ len + 1 ];
22 |
23 | TOUCH_STATE.forEach(function (key, i) {
24 | if (arg[i] !== undefined) {
25 | instance[key] = arg[i];
26 | }
27 | });
28 | }
29 |
30 | function validator (instance, o) {
31 | Object.defineProperties(instance, o);
32 | }
33 |
34 | function getDevice () {
35 | if (!device) {
36 | device = wx.getSystemInfoSync();
37 | }
38 | return device
39 | }
40 |
41 | function isFunction (obj) {
42 | return typeof obj === 'function'
43 | }
44 |
45 | var tmp = {};
46 |
47 | var DEFAULT = {
48 | id: {
49 | default: 'cropper',
50 | get: function get () {
51 | return tmp.id
52 | },
53 | set: function set (value) {
54 | if (typeof (value) !== 'string') {
55 | console.error(("id：" + value + " is invalid"));
56 | }
57 | tmp.id = value;
58 | }
59 | },
60 | width: {
61 | default: 750,
62 | get: function get () {
63 | return tmp.width
64 | },
65 | set: function set (value) {
66 | if (typeof (value) !== 'number') {
67 | console.error(("width：" + value + " is invalid"));
68 | }
69 | tmp.width = value;
70 | }
71 | },
72 | height: {
73 | default: 750,
74 | get: function get () {
75 | return tmp.height
76 | },
77 | set: function set (value) {
78 | if (typeof (value) !== 'number') {
79 | console.error(("height：" + value + " is invalid"));
80 | }
81 | tmp.height = value;
82 | }
83 | },
84 | scale: {
85 | default: 2.5,
86 | get: function get () {
87 | return tmp.scale
88 | },
89 | set: function set (value) {
90 | if (typeof (value) !== 'number') {
91 | console.error(("scale：" + value + " is invalid"));
92 | }
93 | tmp.scale = value;
94 | }
95 | },
96 | zoom: {
97 | default: 5,
98 | get: function get () {
99 | return tmp.zoom
100 | },
101 | set: function set (value) {
102 | if (typeof (value) !== 'number') {
103 | console.error(("zoom：" + value + " is invalid"));
104 | } else if (value < 0 || value > 10) {
105 | console.error("zoom should be ranged in 0 ~ 10");
106 | }
107 | tmp.zoom = value;
108 | }
109 | },
110 | src: {
111 | default: 'cropper',
112 | get: function get () {
113 | return tmp.src
114 | },
115 | set: function set (value) {
116 | if (typeof (value) !== 'string') {
117 | console.error(("id：" + value + " is invalid"));
118 | }
119 | tmp.src = value;
120 | }
121 | },
122 | cut: {
123 | default: {},
124 | get: function get () {
125 | return tmp.cut
126 | },
127 | set: function set (value) {
128 | if (typeof (value) !== 'object') {
129 | console.error(("id：" + value + " is invalid"));
130 | }
131 | tmp.cut = value;
132 | }
133 | },
134 | onReady: {
135 | default: null,
136 | get: function get () {
137 | return tmp.ready
138 | },
139 | set: function set (value) {
140 | tmp.ready = value;
141 | }
142 | },
143 | onBeforeImageLoad: {
144 | default: null,
145 | get: function get () {
146 | return tmp.beforeImageLoad
147 | },
148 | set: function set (value) {
149 | tmp.beforeImageLoad = value;
150 | }
151 | },
152 | onImageLoad: {
153 | default: null,
154 | get: function get () {
155 | return tmp.imageLoad
156 | },
157 | set: function set (value) {
158 | tmp.imageLoad = value;
159 | }
160 | },
161 | onBeforeDraw: {
162 | default: null,
163 | get: function get () {
164 | return tmp.beforeDraw
165 | },
166 | set: function set (value) {
167 | tmp.beforeDraw = value;
168 | }
169 | }
170 | };
171 |
172 | function prepare () {
173 | var self = this;
174 | var ref = getDevice();
175 | var windowWidth = ref.windowWidth;
176 |
177 | self.attachPage = function () {
178 | var pages = getCurrentPages();
179 | // 获取到当前page上下文
180 | var pageContext = pages[pages.length - 1];
181 | // 把this依附在Page上下文的wecropper属性上，便于在page钩子函数中访问
182 | pageContext.wecropper = self;
183 | };
184 |
185 | self.createCtx = function () {
186 | var id = self.id;
187 | if (id) {
188 | self.ctx = wx.createCanvasContext(id);
189 | } else {
190 | console.error("constructor: create canvas context failed, 'id' must be valuable");
191 | }
192 | };
193 |
194 | self.deviceRadio = windowWidth / 750;
195 | }
196 |
197 | function observer () {
198 | var self = this;
199 |
200 | var EVENT_TYPE = ['ready', 'beforeImageLoad', 'beforeDraw', 'imageLoad'];
201 |
202 | self.on = function (event, fn) {
203 | if (EVENT_TYPE.indexOf(event) > -1) {
204 | if (typeof (fn) === 'function') {
205 | event === 'ready'
206 | ? fn(self)
207 | : self[("on" + (firstLetterUpper(event)))] = fn;
208 | }
209 | } else {
210 | console.error(("event: " + event + " is invalid"));
211 | }
212 | return self
213 | };
214 | }
215 |
216 | function methods () {
217 | var self = this;
218 |
219 | var deviceRadio = self.deviceRadio;
220 | var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
221 | var boundHeight = self.height; // 裁剪框默认高度，即整个画布高度
222 | var ref = self.cut;
223 | var x = ref.x; if ( x === void 0 ) x = 0;
224 | var y = ref.y; if ( y === void 0 ) y = 0;
225 | var width = ref.width; if ( width === void 0 ) width = boundWidth;
226 | var height = ref.height; if ( height === void 0 ) height = boundHeight;
227 |
228 | self.updateCanvas = function () {
229 | if (self.croperTarget) {
230 | // 画布绘制图片
231 | self.ctx.drawImage(self.croperTarget, self.imgLeft, self.imgTop, self.scaleWidth, self.scaleHeight);
232 | }
233 | isFunction(self.onBeforeDraw) && self.onBeforeDraw(self.ctx, self);
234 |
235 | self.setBoundStyle(); // 设置边界样式
236 | self.ctx.draw();
237 | return self
238 | };
239 |
240 | self.pushOrign = function (src) {
241 | self.src = src;
242 |
243 | isFunction(self.onBeforeImageLoad) && self.onBeforeImageLoad(self.ctx, self);
244 |
245 | wx.getImageInfo({
246 | src: src,
247 | success: function success (res) {
248 | var innerAspectRadio = res.width / res.height;
249 |
250 | self.croperTarget = res.path;
251 |
252 | console.log(x, y);
253 | if (innerAspectRadio < width / height) {
254 | self.rectX = x;
255 | self.baseWidth = width;
256 | self.baseHeight = width / innerAspectRadio;
257 | self.rectY = y - Math.abs((height - self.baseHeight) / 2);
258 | } else {
259 | self.rectY = y;
260 | self.baseWidth = height * innerAspectRadio;
261 | self.baseHeight = height;
262 | self.rectX = x - Math.abs((width - self.baseWidth) / 2);
263 | }
264 |
265 | self.imgLeft = self.rectX;
266 | self.imgTop = self.rectY;
267 | self.scaleWidth = self.baseWidth;
268 | self.scaleHeight = self.baseHeight;
269 |
270 | self.updateCanvas();
271 |
272 | isFunction(self.onImageLoad) && self.onImageLoad(self.ctx, self);
273 | }
274 | });
275 |
276 | self.update();
277 | return self
278 | };
279 |
280 | self.getCropperImage = function () {
281 | var args = [], len = arguments.length;
282 | while ( len-- ) args[ len ] = arguments[ len ];
283 |
284 | var id = self.id;
285 | var ARG_TYPE = toString.call(args[0]);
286 | var fn = args[args.length - 1];
287 |
288 | switch (ARG_TYPE) {
289 | case '[object Object]':
290 | var ref = args[0];
291 | var quality = ref.quality; if ( quality === void 0 ) quality = 10;
292 |
293 | if (typeof (quality) !== 'number') {
294 | console.error(("quality：" + quality + " is invalid"));
295 | } else if (quality < 0 || quality > 10) {
296 | console.error("quality should be ranged in 0 ~ 10");
297 | }
298 | wx.canvasToTempFilePath({
299 | canvasId: id,
300 | x: x,
301 | y: y,
302 | width: width,
303 | height: height,
304 | destWidth: width * quality / (deviceRadio * 10),
305 | destHeight: height * quality / (deviceRadio * 10),
306 | success: function success (res) {
307 | isFunction(fn) && fn.call(self, res.tempFilePath);
308 | },
309 | fail: function fail (res) {
310 | isFunction(fn) && fn.call(self, null);
311 | }
312 | }); break
313 | case '[object Function]':
314 | wx.canvasToTempFilePath({
315 | canvasId: id,
316 | x: x,
317 | y: y,
318 | width: width,
319 | height: height,
320 | destWidth: width / deviceRadio,
321 | destHeight: height / deviceRadio,
322 | success: function success (res) {
323 | isFunction(fn) && fn.call(self, res.tempFilePath);
324 | },
325 | fail: function fail (res) {
326 | isFunction(fn) && fn.call(self, null);
327 | }
328 | }); break
329 | }
330 |
331 | return self
332 | };
333 | }
334 |
335 | function update () {
336 | var self = this;
337 |
338 | if (!self.src) { return }
339 |
340 | self.__oneTouchStart = function (touch) {
341 | self.touchX0 = touch.x;
342 | self.touchY0 = touch.y;
343 | };
344 |
345 | self.__oneTouchMove = function (touch) {
346 | var xMove, yMove;
347 | // 计算单指移动的距离
348 | if (self.touchended) {
349 | return self.updateCanvas()
350 | }
351 | xMove = touch.x - self.touchX0;
352 | yMove = touch.y - self.touchY0;
353 |
354 | var imgLeft = self.rectX + xMove;
355 | var imgTop = self.rectY + yMove;
356 |
357 | self.outsideBound(imgLeft, imgTop);
358 |
359 | self.updateCanvas();
360 | };
361 |
362 | self.__twoTouchStart = function (touch0, touch1) {
363 | var xMove, yMove, oldDistance;
364 |
365 | self.touchX1 = self.rectX + self.scaleWidth / 2;
366 | self.touchY1 = self.rectY + self.scaleHeight / 2;
367 |
368 | // 计算两指距离
369 | xMove = touch1.x - touch0.x;
370 | yMove = touch1.y - touch0.y;
371 | oldDistance = Math.sqrt(xMove * xMove + yMove * yMove);
372 |
373 | self.oldDistance = oldDistance;
374 | };
375 |
376 | self.__twoTouchMove = function (touch0, touch1) {
377 | var xMove, yMove, newDistance;
378 | var scale = self.scale;
379 | var zoom = self.zoom;
380 | // 计算二指最新距离
381 | xMove = touch1.x - touch0.x;
382 | yMove = touch1.y - touch0.y;
383 | newDistance = Math.sqrt(xMove * xMove + yMove * yMove);
384 |
385 | // 使用0.005的缩放倍数具有良好的缩放体验
386 | self.newScale = self.oldScale + 0.001 * zoom * (newDistance - self.oldDistance);
387 |
388 | // 设定缩放范围
389 | self.newScale <= 1 && (self.newScale = 1);
390 | self.newScale >= scale && (self.newScale = scale);
391 |
392 | self.scaleWidth = self.newScale * self.baseWidth;
393 | self.scaleHeight = self.newScale * self.baseHeight;
394 | var imgLeft = self.touchX1 - self.scaleWidth / 2;
395 | var imgTop = self.touchY1 - self.scaleHeight / 2;
396 |
397 | self.outsideBound(imgLeft, imgTop);
398 |
399 | self.updateCanvas();
400 | };
401 |
402 | self.__xtouchEnd = function () {
403 | self.oldScale = self.newScale;
404 | self.rectX = self.imgLeft;
405 | self.rectY = self.imgTop;
406 | };
407 | }
408 |
409 | var handle = {
410 | // 图片手势初始监测
411 | touchStart: function touchStart (e) {
412 | var self = this;
413 | var ref = e.touches;
414 | var touch0 = ref[0];
415 | var touch1 = ref[1];
416 |
417 | setTouchState(self, true, null, null);
418 |
419 | // 计算第一个触摸点的位置，并参照改点进行缩放
420 | self.__oneTouchStart(touch0);
421 |
422 | // 两指手势触发
423 | if (e.touches.length >= 2) {
424 | self.__twoTouchStart(touch0, touch1);
425 | }
426 | },
427 |
428 | // 图片手势动态缩放
429 | touchMove: function touchMove (e) {
430 | var self = this;
431 | var ref = e.touches;
432 | var touch0 = ref[0];
433 | var touch1 = ref[1];
434 |
435 | setTouchState(self, null, true);
436 |
437 | // 单指手势时触发
438 | if (e.touches.length === 1) {
439 | self.__oneTouchMove(touch0);
440 | }
441 | // 两指手势触发
442 | if (e.touches.length >= 2) {
443 | self.__twoTouchMove(touch0, touch1);
444 | }
445 | },
446 |
447 | touchEnd: function touchEnd (e) {
448 | var self = this;
449 |
450 | setTouchState(self, false, false, true);
451 | self.__xtouchEnd();
452 | }
453 | };
454 |
455 | function cut () {
456 | var self = this;
457 | var boundWidth = self.width; // 裁剪框默认宽度，即整个画布宽度
458 | var boundHeight = self.height;
459 | // 裁剪框默认高度，即整个画布高度
460 | var ref = self.cut;
461 | var x = ref.x; if ( x === void 0 ) x = 0;
462 | var y = ref.y; if ( y === void 0 ) y = 0;
463 | var width = ref.width; if ( width === void 0 ) width = boundWidth;
464 | var height = ref.height; if ( height === void 0 ) height = boundHeight;
465 |
466 | /**
467 | * 设置边界
468 | * @param imgLeft 图片左上角横坐标值
469 | * @param imgTop 图片左上角纵坐标值
470 | */
471 | self.outsideBound = function (imgLeft, imgTop) {
472 | self.imgLeft = imgLeft >= x
473 | ? x
474 | : self.scaleWidth + imgLeft - x <= width
475 | ? x + width - self.scaleWidth
476 | : imgLeft;
477 |
478 | self.imgTop = imgTop >= y
479 | ? y
480 | : self.scaleHeight + imgTop - y <= height
481 | ? y + height - self.scaleHeight
482 | : imgTop;
483 | };
484 |
485 | /**
486 | * 设置边界样式
487 | * @param color 边界颜色
488 | */
489 | self.setBoundStyle = function (ref) {
490 | if ( ref === void 0 ) ref = {};
491 | var color = ref.color; if ( color === void 0 ) color = '#04b00f';
492 | var mask = ref.mask; if ( mask === void 0 ) mask = 'rgba(0, 0, 0, 0.3)';
493 | var lineWidth = ref.lineWidth; if ( lineWidth === void 0 ) lineWidth = 1;
494 |
495 | // 绘制半透明层
496 | self.ctx.beginPath();
497 | self.ctx.setFillStyle(mask);
498 | self.ctx.fillRect(0, 0, x, boundHeight);
499 | self.ctx.fillRect(x, 0, width, y);
500 | self.ctx.fillRect(x, y + height, width, boundHeight - y - height);
501 | self.ctx.fillRect(x + width, 0, boundWidth - x - width, boundHeight);
502 | self.ctx.fill();
503 |
504 | // 设置边界左上角样式
505 | // 为使边界样式处于边界外边缘，此时x、y均要减少lineWidth
506 | self.ctx.beginPath();
507 | self.ctx.setStrokeStyle(color);
508 | self.ctx.setLineWidth(lineWidth);
509 | self.ctx.moveTo(x - lineWidth, y + 10 - lineWidth);
510 | self.ctx.lineTo(x - lineWidth, y - lineWidth);
511 | self.ctx.lineTo(x + 10 - lineWidth, y - lineWidth);
512 | self.ctx.stroke();
513 |
514 | // 设置边界左下角样式
515 | // 为使边界样式处于边界外边缘，此时x要减少lineWidth、y要增加lineWidth
516 | self.ctx.beginPath();
517 | self.ctx.setStrokeStyle(color);
518 | self.ctx.setLineWidth(lineWidth);
519 | self.ctx.moveTo(x - lineWidth, y + height - 10 + lineWidth);
520 | self.ctx.lineTo(x - lineWidth, y + height + lineWidth);
521 | self.ctx.lineTo(x + 10 - lineWidth, y + height + lineWidth);
522 | self.ctx.stroke();
523 |
524 | // 设置边界右上角样式
525 | // 为使边界样式处于边界外边缘，此时x要增加lineWidth、y要减少lineWidth
526 | self.ctx.beginPath();
527 | self.ctx.setStrokeStyle(color);
528 | self.ctx.setLineWidth(lineWidth);
529 | self.ctx.moveTo(x + width - 10 + lineWidth, y - lineWidth);
530 | self.ctx.lineTo(x + width + lineWidth, y - lineWidth);
531 | self.ctx.lineTo(x + width + lineWidth, y + 10 - lineWidth);
532 | self.ctx.stroke();
533 |
534 | // 设置边界右下角样式
535 | // 为使边界样式处于边界外边缘，此时x、y均要增加lineWidth
536 | self.ctx.beginPath();
537 | self.ctx.setStrokeStyle(color);
538 | self.ctx.setLineWidth(lineWidth);
539 | self.ctx.moveTo(x + width + lineWidth, y + height - 10 + lineWidth);
540 | self.ctx.lineTo(x + width + lineWidth, y + height + lineWidth);
541 | self.ctx.lineTo(x + width - 10 + lineWidth, y + height + lineWidth);
542 | self.ctx.stroke();
543 | };
544 | }
545 |
546 | var version = "1.1.5";
547 |
548 | var weCropper = function weCropper (params) {
549 | var self = this;
550 | var _default = {};
551 |
552 | validator(self, DEFAULT);
553 |
554 | Object.keys(DEFAULT).forEach(function (key) {
555 | _default[key] = DEFAULT[key].default;
556 | });
557 | Object.assign(self, _default, params);
558 |
559 | self.prepare();
560 | self.attachPage();
561 | self.createCtx();
562 | self.observer();
563 | self.cutt();
564 | self.methods();
565 | self.init();
566 | self.update();
567 |
568 | return self
569 | };
570 |
571 | weCropper.prototype.init = function init () {
572 | var self = this;
573 | var src = self.src;
574 |
575 | self.version = version;
576 |
577 | typeof self.onReady === 'function' && self.onReady(self.ctx, self);
578 |
579 | if (src) {
580 | self.pushOrign(src);
581 | }
582 | setTouchState(self, false, false, false);
583 |
584 | self.oldScale = 1;
585 | self.newScale = 1;
586 |
587 | return self
588 | };
589 |
590 | Object.assign(weCropper.prototype, handle);
591 |
592 | weCropper.prototype.prepare = prepare;
593 | weCropper.prototype.observer = observer;
594 | weCropper.prototype.methods = methods;
595 | weCropper.prototype.cutt = cut;
596 | weCropper.prototype.update = update;
597 |
598 | return weCropper;
599 |
600 | })));
601 |
--------------------------------------------------------------------------------
/una2/pages/we-cropper/we-cropper.wxml:
--------------------------------------------------------------------------------
1 |
2 |
11 |
--------------------------------------------------------------------------------
/una2/project.config.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "项目配置文件。",
3 | "setting": {
4 | "urlCheck": true,
5 | "es6": true,
6 | "postcss": true,
7 | "minified": true,
8 | "newFeature": true
9 | },
10 | "compileType": "miniprogram",
11 | "libVersion": "1.7.2",
12 | "appid": "wx8c21bb2e9cfdca09",
13 | "projectname": "una3",
14 | "condition": {
15 | "search": {
16 | "current": -1,
17 | "list": []
18 | },
19 | "conversation": {
20 | "current": -1,
21 | "list": []
22 | },
23 | "miniprogram": {
24 | "current": -1,
25 | "list": []
26 | }
27 | }
28 | }
--------------------------------------------------------------------------------
/una2/utils/util.js:
--------------------------------------------------------------------------------
1 | function formatTime(date) {
2 | var year = date.getFullYear()
3 | var month = date.getMonth() + 1
4 | var day = date.getDate()
5 |
6 | var hour = date.getHours()
7 | var minute = date.getMinutes()
8 | var second = date.getSeconds()
9 |
10 |
11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
12 | }
13 |
14 | function formatNumber(n) {
15 | n = n.toString()
16 | return n[1] ? n : '0' + n
17 | }
18 |
19 | module.exports = {
20 | formatTime: formatTime
21 | }
22 |
--------------------------------------------------------------------------------