u-avatar-cropper.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. <template>
  2. <view class="content">
  3. <view class="cropper-wrapper" :style="{ height: cropperOpt.height + 'px' }">
  4. <canvas
  5. class="cropper"
  6. :disable-scroll="true"
  7. @touchstart="touchStart"
  8. @touchmove="touchMove"
  9. @touchend="touchEnd"
  10. :style="{ width: cropperOpt.width, height: cropperOpt.height, backgroundColor: 'rgba(0, 0, 0, 0.8)' }"
  11. canvas-id="cropper"
  12. id="cropper"
  13. ></canvas>
  14. <canvas
  15. class="cropper"
  16. :disable-scroll="true"
  17. :style="{
  18. position: 'fixed',
  19. top: `-${cropperOpt.width * cropperOpt.pixelRatio}px`,
  20. left: `-${cropperOpt.height * cropperOpt.pixelRatio}px`,
  21. width: `${cropperOpt.width * cropperOpt.pixelRatio}px`,
  22. height: `${cropperOpt.height * cropperOpt.pixelRatio}`
  23. }"
  24. canvas-id="targetId"
  25. id="targetId"
  26. ></canvas>
  27. </view>
  28. <view class="cropper-buttons safe-area-padding" :style="{ height: bottomNavHeight + 'px' }">
  29. <!-- #ifdef H5 -->
  30. <view class="upload" @tap="uploadTap">选择图片</view>
  31. <!-- #endif -->
  32. <!-- #ifndef H5 -->
  33. <view class="upload" @tap="uploadTap">重新选择</view>
  34. <!-- #endif -->
  35. <view class="getCropperImage" @tap="getCropperImage(false)">确定</view>
  36. </view>
  37. </view>
  38. </template>
  39. <script>
  40. import WeCropper from './weCropper.js';
  41. export default {
  42. props: {
  43. // 裁剪矩形框的样式,其中可包含的属性为lineWidth-边框宽度(单位rpx),color: 边框颜色,
  44. // mask-遮罩颜色,一般设置为一个rgba的透明度,如"rgba(0, 0, 0, 0.35)"
  45. boundStyle: {
  46. type: Object,
  47. default() {
  48. return {
  49. lineWidth: 4,
  50. borderColor: 'rgb(245, 245, 245)',
  51. mask: 'rgba(0, 0, 0, 0.35)'
  52. };
  53. }
  54. }
  55. // // 裁剪框宽度,单位rpx
  56. // rectWidth: {
  57. // type: [String, Number],
  58. // default: 400
  59. // },
  60. // // 裁剪框高度,单位rpx
  61. // rectHeight: {
  62. // type: [String, Number],
  63. // default: 400
  64. // },
  65. // // 输出图片宽度,单位rpx
  66. // destWidth: {
  67. // type: [String, Number],
  68. // default: 400
  69. // },
  70. // // 输出图片高度,单位rpx
  71. // destHeight: {
  72. // type: [String, Number],
  73. // default: 400
  74. // },
  75. // // 输出的图片类型,如果发现裁剪的图片很大,可能是因为设置为了"png",改成"jpg"即可
  76. // fileType: {
  77. // type: String,
  78. // default: 'jpg',
  79. // },
  80. // // 生成的图片质量
  81. // // H5上无效,目前不考虑使用此参数
  82. // quality: {
  83. // type: [Number, String],
  84. // default: 1
  85. // }
  86. },
  87. data() {
  88. return {
  89. // 底部导航的高度
  90. bottomNavHeight: 50,
  91. originWidth: 200,
  92. width: 0,
  93. height: 0,
  94. cropperOpt: {
  95. id: 'cropper',
  96. targetId: 'targetCropper',
  97. pixelRatio: 1,
  98. width: 0,
  99. height: 0,
  100. scale: 2.5,
  101. zoom: 8,
  102. cut: {
  103. x: (this.width - this.originWidth) / 2,
  104. y: (this.height - this.originWidth) / 2,
  105. width: this.originWidth,
  106. height: this.originWidth
  107. },
  108. boundStyle: {
  109. lineWidth: uni.upx2px(this.boundStyle.lineWidth),
  110. mask: this.boundStyle.mask,
  111. color: this.boundStyle.borderColor
  112. }
  113. },
  114. // 裁剪框和输出图片的尺寸,高度默认等于宽度
  115. // 输出图片宽度,单位px
  116. destWidth: 200,
  117. // 裁剪框宽度,单位px
  118. rectWidth: 200,
  119. // 输出的图片类型,如果'png'类型发现裁剪的图片太大,改成"jpg"即可
  120. fileType: 'jpg',
  121. src: '', // 选择的图片路径,用于在点击确定时,判断是否选择了图片
  122. };
  123. },
  124. onLoad(option) {
  125. let rectInfo = uni.getSystemInfoSync();
  126. this.width = rectInfo.windowWidth;
  127. this.height = rectInfo.windowHeight - this.bottomNavHeight;
  128. this.cropperOpt.width = this.width;
  129. this.cropperOpt.height = this.height;
  130. this.cropperOpt.pixelRatio = rectInfo.pixelRatio;
  131. if (option.destWidth) this.destWidth = option.destWidth;
  132. if (option.rectWidth) {
  133. let rectWidth = Number(option.rectWidth);
  134. this.cropperOpt.cut = {
  135. x: (this.width - rectWidth) / 2,
  136. y: (this.height - rectWidth) / 2,
  137. width: rectWidth,
  138. height: rectWidth
  139. };
  140. }
  141. this.rectWidth = option.rectWidth;
  142. if (option.fileType) this.fileType = option.fileType;
  143. // 初始化
  144. this.cropper = new WeCropper(this.cropperOpt)
  145. .on('ready', ctx => {
  146. // wecropper is ready for work!
  147. })
  148. .on('beforeImageLoad', ctx => {
  149. // before picture loaded, i can do something
  150. })
  151. .on('imageLoad', ctx => {
  152. // picture loaded
  153. })
  154. .on('beforeDraw', (ctx, instance) => {
  155. // before canvas draw,i can do something
  156. });
  157. // 设置导航栏样式,以免用户在page.json中没有设置为黑色背景
  158. uni.setNavigationBarColor({
  159. frontColor: '#ffffff',
  160. backgroundColor: '#000000'
  161. });
  162. uni.chooseImage({
  163. count: 1, // 默认9
  164. sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
  165. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  166. success: res => {
  167. this.src = res.tempFilePaths[0];
  168. // 获取裁剪图片资源后,给data添加src属性及其值
  169. this.cropper.pushOrign(this.src);
  170. }
  171. });
  172. },
  173. methods: {
  174. touchStart(e) {
  175. this.cropper.touchStart(e);
  176. },
  177. touchMove(e) {
  178. this.cropper.touchMove(e);
  179. },
  180. touchEnd(e) {
  181. this.cropper.touchEnd(e);
  182. },
  183. getCropperImage(isPre = false) {
  184. if(!this.src) return this.$u.toast('请先选择图片再裁剪');
  185. let cropper_opt = {
  186. destHeight: Number(this.destWidth), // uni.canvasToTempFilePath要求这些参数为数值
  187. destWidth: Number(this.destWidth),
  188. fileType: this.fileType
  189. };
  190. this.cropper.getCropperImage(cropper_opt, (path, err) => {
  191. if (err) {
  192. uni.showModal({
  193. title: '温馨提示',
  194. content: err.message
  195. });
  196. } else {
  197. if (isPre) {
  198. uni.previewImage({
  199. current: '', // 当前显示图片的 http 链接
  200. urls: [path] // 需要预览的图片 http 链接列表
  201. });
  202. } else {
  203. uni.$emit('uAvatarCropper', path);
  204. this.$u.route({
  205. type: 'back'
  206. });
  207. }
  208. }
  209. });
  210. },
  211. uploadTap() {
  212. const self = this;
  213. uni.chooseImage({
  214. count: 1, // 默认9
  215. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  216. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  217. success: (res) => {
  218. self.src = res.tempFilePaths[0];
  219. // 获取裁剪图片资源后,给data添加src属性及其值
  220. self.cropper.pushOrign(this.src);
  221. }
  222. });
  223. }
  224. }
  225. };
  226. </script>
  227. <style scoped lang="scss">
  228. @import '../../libs/css/style.components.scss';
  229. .content {
  230. background: rgba(255, 255, 255, 1);
  231. }
  232. .cropper {
  233. position: absolute;
  234. top: 0;
  235. left: 0;
  236. width: 100%;
  237. height: 100%;
  238. z-index: 11;
  239. }
  240. .cropper-buttons {
  241. background-color: #000000;
  242. color: #eee;
  243. }
  244. .cropper-wrapper {
  245. position: relative;
  246. @include vue-flex;
  247. flex-direction: row;
  248. justify-content: space-between;
  249. align-items: center;
  250. width: 100%;
  251. background-color: #000;
  252. }
  253. .cropper-buttons {
  254. width: 100vw;
  255. @include vue-flex;
  256. flex-direction: row;
  257. justify-content: space-between;
  258. align-items: center;
  259. position: fixed;
  260. bottom: 0;
  261. left: 0;
  262. font-size: 28rpx;
  263. }
  264. .cropper-buttons .upload,
  265. .cropper-buttons .getCropperImage {
  266. width: 50%;
  267. text-align: center;
  268. }
  269. .cropper-buttons .upload {
  270. text-align: left;
  271. padding-left: 50rpx;
  272. }
  273. .cropper-buttons .getCropperImage {
  274. text-align: right;
  275. padding-right: 50rpx;
  276. }
  277. </style>