轻量级前端框架助力开发者提升项目效率与性能
576
2023-11-11
小程序实现图片预览裁剪插件
最近在帮工作室做一个小程序，在换背景图的时候需要预览图片，并且需要裁剪成固定的尺寸。因为小程序并不支持原生的dom操作，导致很多现有的插件都无法使用，所以花了半天专门做了一个小程序的预览裁剪插件。下面贴上代码和效果图。
wxml：
?
1
2
3
4
5
<canvas hidden={{hide_canvas}} id=cover-preview bindtouchstart=canvas_start bindtouchmove=canvas_move bindtouchend=canvas_end disable-scroll=true canvas-id=cover-preview>
<cover-view catchtap=upload_bg id=croper-sure>确定</cover-view>
<cover-view catchtap=cancel_croper id=croper-cancel>取消</cover-view>
<cover-view id=croper></cover-view>
</canvas>
注意：canvas里面一定要用cover-view，否则无法覆盖canvas
js：
?
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
const ctx = wx.createCanvasContext(cover-preview);
var start_position = {};//移动图片时手指起始坐标
var tempFilePath;//图片路径
var tempWidth;//图片初始宽度
var tempHeight;//图片初始高度
var old_x = 0;//图片初始x坐标
var old_y = 0;//图片初始y坐标
var _touches = 1;//触屏的手指数
var old_scale = 1;//原始放大倍数
var new_scale = 1;//新的放大倍数
var is_move = false;//是否移动
var bg_url;
Page({
data: {
hide_canvas:true,//绘图层显示控制变量
}，
//选择并将图片输出到canvas
change_cover:function(){
var that = this;
wx.showModal({
title: 提示,
content: 更改我的封面,
confirmColor: #39bae8,
success: function (res) {
if (res.confirm) {
wx.chooseImage({
count: 1, // 默认9
sizeType: [original, compressed], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [album, camera], // 可以指定来源是相册还是相机，默认二者都有
success: function (res0) {
tempFilePath = res0.tempFilePaths[0];
that.setData({
hide_canvas: false,
// edit_url: tempFilePath
})
wx.getImageInfo({
src: tempFilePath,
success: function (res) {
// console.log(res.width)
// console.log(res.height)
tempWidth = res.width;
tempHeight = res.height;
ctx.drawImage(tempFilePath,0, 0, 375,res.height/res.width*375);
ctx.draw();
}
})
}
})
} else if (res.cancel) {
console.log(用户点击取消)
}
}
})
},
//监听手指触摸事件，并判断是移动还是缩放，并记录初始状态
canvas_start:function(e){
// console.log(e);
var touches = e.touches.length;
if(touches == 1){
_touches = 1;
start_position = { x: e.touches[0].x, y: e.touches[0].y, timeStamp:e.timeStamp}
}else if(touches == 2){
_touches = 2;
start_position = { x: e.touches[0].x, y: e.touches[0].y,x1: e.touches[1].x, y1: e.touches[1].y, timeStamp: e.timeStamp }
}else{
_touches = 1;
}
},
//监听手指移动事件，并做出相应调整
canvas_move: function (e) {
// console.log(e);
var touches = e.touches.length;
if (_touches == 1 && e.timeStamp - start_position.timeStamp > 150) {
ctx.drawImage(tempFilePath, old_x + e.touches[0].x - start_position.x, old_y + e.touches[0].y - start_position.y, 375 * new_scale, tempHeight / tempWidth * 375 * new_scale);
ctx.draw();
is_move = true;
} else if (_touches == 2 && e.timeStamp - start_position.timeStamp > 150) {
var change_x = Math.abs(Math.abs(e.touches[0].x - e.touches[1].x) - Math.abs(start_position.x - start_position.x1));
var change_y = Math.abs(Math.abs(e.touches[0].y - e.touches[1].y) - Math.abs(start_position.y - start_position.y1));
if(change_x - change_y > 10){
old_scale = Math.abs(e.touches[0].x - e.touches[1].x) / Math.abs(start_position.x - start_position.x1);
}else{
old_scale = Math.abs(e.touches[0].y - e.touches[1].y) / Math.abs(start_position.y - start_position.y1);
}
ctx.drawImage(tempFilePath, old_x, old_y, 375 * old_scale * new_scale, tempHeight / tempWidth * 375 * old_scale * new_scale);
ctx.draw();
is_move = true;
}else{
is_move = false;
}
},
//监听手指离开动作，并保存当前状态数据
canvas_end: function (e) {
// console.log(e);
if (_touches == 1 && is_move) {
old_x = old_x + e.changedTouches[0].x - start_position.x;
old_y = old_y + e.changedTouches[0].y - start_position.y;
} else if (_touches == 2 && is_move) {
new_scale = old_scale * new_scale;
}
},
//确定并上传背景图
upload_bg:function(){
var that = this;
var screenWidth = wx.getSystemInfoSync().screenWidth;
// console.log(screenWidth);
wx.canvasToTempFilePath({
x: 0,
y: screenWidth / 750 * 400,
width: screenWidth,
height: screenWidth / 750 * 526,
destWidth: screenWidth,
screenHeight: screenWidth / 750 * 526,
quality:1,
canvasId: cover-preview,
success: function (res) {
that.setData({
hide_canvas: true,
})
//res.tempFilePath即为生成的图片路径
console.log(res.tempFilePath)
}
})
},
//取消图片预览编辑
cancel_croper:function(){
ctx.clearActions();
this.setData({
hide_canvas: true,
// edit_url: tempFilePath
})
},
})
wxss:
效果图
您可能感兴趣的文章:微信小程序裁剪头像插件使用方法详解微信小程序实现照片裁剪微信小程序实现裁剪图片大小微信小程序实现上传图片裁剪图片过程解析微信小程序简单的canvas裁剪图片功能详解微信小程序之裁剪图片成圆形的实现代码微信小程序图片选择区域裁剪实现方法微信小程序开发（二）图片上传+服务端接收详解微信小程序实现上传图片功能小程序实现图片裁剪上传
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~