resize.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. // pages/image/resize.js
  2. //获取应用实例
  3. const app = getApp()
  4. Page({
  5. /**
  6. * 页面的初始数据
  7. */
  8. data: {
  9. uploadUrl: app.globalData.api_domain.api_base + 'uploaders?scene=goods',
  10. action: 'add',
  11. idx: -1,
  12. src: '',
  13. width: 250, //宽度
  14. height: 250, //高度
  15. max_width: 300,
  16. max_height: 300,
  17. disable_rotate: true, //是否禁用旋转
  18. disable_ratio: false, //锁定比例
  19. limit_move: true, //是否限制移动
  20. },
  21. /**
  22. * 生命周期函数--监听页面加载
  23. */
  24. onLoad(options) {
  25. this.cropper = this.selectComponent("#image-cropper");
  26. this.setData({
  27. src: options.imgSrc
  28. });
  29. console.log(this.data, options);
  30. if(!options.imgSrc){
  31. this.cropper.upload(); //上传图片
  32. } else {
  33. this.setData({
  34. action: 'edit',
  35. idx: parseInt(options.idx)
  36. });
  37. }
  38. },
  39. cropperload(e) {
  40. console.log('cropper加载完成');
  41. },
  42. loadimage(e) {
  43. wx.hideLoading();
  44. this.cropper.imgReset();
  45. this.setData({
  46. src: e.detail.path
  47. })
  48. // console.log(this.data);
  49. },
  50. clickcut(e) {
  51. // console.log(e.detail);
  52. //图片预览
  53. wx.previewImage({
  54. current: e.detail.url, // 当前显示图片的http链接
  55. urls: [e.detail.url] // 需要预览的图片http链接列表
  56. })
  57. },
  58. upload() {
  59. let that = this;
  60. console.log(that);
  61. wx.chooseImage({
  62. count: 1,
  63. sizeType: ['original', 'compressed'],
  64. sourceType: ['album', 'camera'],
  65. success(res) {
  66. wx.showLoading({
  67. title: '加载中',
  68. })
  69. console.log(res);
  70. const tempFilePaths = res.tempFilePaths[0];
  71. //重置图片角度、缩放、位置
  72. that.cropper.imgReset();
  73. that.setData({
  74. src: tempFilePaths
  75. });
  76. }
  77. })
  78. },
  79. setWidth(e) {
  80. this.setData({
  81. width: e.detail.value < 10 ? 10 : e.detail.value
  82. });
  83. this.setData({
  84. cut_left: this.cropper.data.cut_left
  85. });
  86. },
  87. setHeight(e) {
  88. this.setData({
  89. height: e.detail.value < 10 ? 10 : e.detail.value
  90. });
  91. this.setData({
  92. cut_top: this.cropper.data.cut_top
  93. });
  94. },
  95. switchChangeDisableRatio(e) {
  96. //设置宽度之后使剪裁框居中
  97. this.setData({
  98. disable_ratio: e.detail.value
  99. });
  100. },
  101. setCutTop(e) {
  102. this.setData({
  103. cut_top: e.detail.value
  104. });
  105. this.setData({
  106. cut_top: this.cropper.data.cut_top
  107. });
  108. },
  109. setCutLeft(e) {
  110. this.setData({
  111. cut_left: e.detail.value
  112. });
  113. this.setData({
  114. cut_left: this.cropper.data.cut_left
  115. });
  116. },
  117. switchChangeDisableRotate(e) {
  118. //开启旋转的同时不限制移动
  119. if (!e.detail.value) {
  120. this.setData({
  121. limit_move: false,
  122. disable_rotate: e.detail.value
  123. });
  124. } else {
  125. this.setData({
  126. disable_rotate: e.detail.value
  127. });
  128. }
  129. },
  130. switchChangeLimitMove(e) {
  131. //限制移动的同时锁定旋转
  132. if (e.detail.value) {
  133. this.setData({
  134. disable_rotate: true
  135. });
  136. }
  137. this.cropper.setLimitMove(e.detail.value);
  138. },
  139. switchChangeDisableWidth(e) {
  140. this.setData({
  141. disable_width: e.detail.value
  142. });
  143. },
  144. switchChangeDisableHeight(e) {
  145. this.setData({
  146. disable_height: e.detail.value
  147. });
  148. },
  149. submit(e) {
  150. this.cropper.getImg((obj) => {
  151. let that = this;
  152. wx.uploadFile({
  153. filePath: obj.url,
  154. url: that.data.uploadUrl,
  155. name: 'file',
  156. success:res=>{
  157. let json = JSON.parse(res.data);
  158. // console.log(json);
  159. app.globalData.goodsImg = {
  160. src: json.url,
  161. action: that.data.action,
  162. idx: that.data.idx
  163. };
  164. wx.navigateBack({
  165. delta: -1
  166. })
  167. },
  168. fail: err=>{
  169. console.log(err);
  170. }
  171. })
  172. // app.globalData.imgSrc = obj.url;
  173. // wx.navigateBack({
  174. // delta: -1
  175. // })
  176. // console.log("ok");
  177. });
  178. },
  179. rotate() {
  180. //在用户旋转的基础上旋转90°
  181. this.cropper.setAngle(this.cropper.data.angle += 90);
  182. },
  183. top() {
  184. this.data.top = setInterval(() => {
  185. this.cropper.setTransform({
  186. y: -3
  187. });
  188. }, 1000 / 60)
  189. },
  190. bottom() {
  191. this.data.bottom = setInterval(() => {
  192. this.cropper.setTransform({
  193. y: 3
  194. });
  195. }, 1000 / 60)
  196. },
  197. left() {
  198. this.data.left = setInterval(() => {
  199. this.cropper.setTransform({
  200. x: -3
  201. });
  202. }, 1000 / 60)
  203. },
  204. right() {
  205. this.data.right = setInterval(() => {
  206. this.cropper.setTransform({
  207. x: 3
  208. });
  209. }, 1000 / 60)
  210. },
  211. narrow() {
  212. this.data.narrow = setInterval(() => {
  213. this.cropper.setTransform({
  214. scale: -0.02
  215. });
  216. }, 1000 / 60)
  217. },
  218. enlarge() {
  219. this.data.enlarge = setInterval(() => {
  220. this.cropper.setTransform({
  221. scale: 0.02
  222. });
  223. }, 1000 / 60)
  224. },
  225. end(e) {
  226. clearInterval(this.data[e.currentTarget.dataset.type]);
  227. },
  228. /**
  229. * 生命周期函数--监听页面初次渲染完成
  230. */
  231. onReady() {
  232. },
  233. /**
  234. * 生命周期函数--监听页面显示
  235. */
  236. onShow() {
  237. },
  238. /**
  239. * 生命周期函数--监听页面隐藏
  240. */
  241. onHide() {
  242. },
  243. /**
  244. * 生命周期函数--监听页面卸载
  245. */
  246. onUnload() {
  247. },
  248. /**
  249. * 页面相关事件处理函数--监听用户下拉动作
  250. */
  251. onPullDownRefresh() {
  252. },
  253. /**
  254. * 页面上拉触底事件的处理函数
  255. */
  256. onReachBottom() {
  257. },
  258. /**
  259. * 用户点击右上角分享
  260. */
  261. onShareAppMessage() {
  262. }
  263. })