u-sign.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. <template>
  2. <view class="u-sign" :class="{'is-null': isNull}">
  3. <view class="u-sign-content">
  4. <canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
  5. @touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
  6. </view>
  7. <view class="re-draw" @click="retDraw">
  8. <image style="width: 37rpx;height: 35rpx;" src="/static/xpc.png" mode="widthFix" />
  9. </view>
  10. <view v-if="false" class="handBtn">
  11. <image @click="selectColorEvent('black','#1A1A1A')"
  12. :src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
  13. :class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
  14. <image @click="selectColorEvent('red','#ca262a')"
  15. :src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
  16. :class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
  17. <button @click="retDraw" class="delBtn">重写</button>
  18. <button @click="saveCanvasAsImg" class="saveBtn">保存</button>
  19. <button @click="previewCanvasImg" class="previewBtn">预览</button>
  20. <button @click="subCanvas" class="subBtn">完成</button>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. export default {
  26. name: 'u-sign',
  27. data() {
  28. return {
  29. canvasName: 'handWriting',
  30. ctx: '',
  31. startX: null,
  32. startY: null,
  33. canvasWidth: 0,
  34. canvasHeight: 0,
  35. selectColor: 'black',
  36. lineColor: '#1A1A1A', // 颜色
  37. lineSize: 5, // 笔记倍数
  38. isNull: true
  39. };
  40. },
  41. mounted() {
  42. this.ctx = uni.createCanvasContext("handWriting");
  43. console.log(111, this.ctx)
  44. this.$nextTick(() => {
  45. uni.createSelectorQuery().select('.u-sign-content').boundingClientRect(rect => {
  46. this.canvasWidth = rect.width;
  47. this.canvasHeight = rect.height;
  48. /* 将canvas背景设置为 白底,不设置 导出的canvas的背景为透明 */
  49. this.setCanvasBg('#FAFAFA');
  50. })
  51. .exec();
  52. });
  53. },
  54. methods: {
  55. // 笔迹开始
  56. uploadScaleStart(e) {
  57. this.isNull = false
  58. this.startX = e.changedTouches[0].x
  59. this.startY = e.changedTouches[0].y
  60. //设置画笔参数
  61. //画笔颜色
  62. this.ctx.setStrokeStyle(this.lineColor)
  63. //设置线条粗细
  64. this.ctx.setLineWidth(this.lineSize)
  65. //设置线条的结束端点样式
  66. this.ctx.setLineCap("round") //'butt'、'round'、'square'
  67. //开始画笔
  68. this.ctx.beginPath()
  69. },
  70. // 笔迹移动
  71. uploadScaleMove(e) {
  72. //取点
  73. let temX = e.changedTouches[0].x
  74. let temY = e.changedTouches[0].y
  75. //画线条
  76. this.ctx.moveTo(this.startX, this.startY)
  77. this.ctx.lineTo(temX, temY)
  78. this.ctx.stroke()
  79. this.startX = temX
  80. this.startY = temY
  81. this.ctx.draw(true)
  82. },
  83. /**
  84. * 重写
  85. */
  86. retDraw() {
  87. this.isNull = true
  88. this.ctx.clearRect(0, 0, 700, 730);
  89. this.ctx.draw();
  90. //设置canvas背景
  91. this.setCanvasBg('#fff');
  92. },
  93. /**
  94. * @param {Object} str
  95. * @param {Object} color
  96. * 选择颜色
  97. */
  98. selectColorEvent(str, color) {
  99. this.selectColor = str;
  100. this.lineColor = color;
  101. },
  102. getBase64(success) {
  103. if (this.isNull) {
  104. success(null)
  105. } else {
  106. uni.canvasToTempFilePath({
  107. canvasId: 'handWriting',
  108. fileType: 'png',
  109. quality: 1, //图片质量
  110. success,
  111. })
  112. }
  113. },
  114. //完成
  115. subCanvas() {
  116. uni.canvasToTempFilePath({
  117. canvasId: 'handWriting',
  118. fileType: 'png',
  119. quality: 1, //图片质量
  120. success(res) {
  121. // console.log(res.tempFilePath, 'canvas生成图片地址');
  122. uni.showToast({
  123. title: '以保存'
  124. });
  125. //保存到系统相册
  126. uni.saveImageToPhotosAlbum && uni.saveImageToPhotosAlbum({
  127. filePath: res.tempFilePath,
  128. success(res) {
  129. uni.showToast({
  130. title: '已成功保存到相册',
  131. duration: 2000
  132. });
  133. }
  134. });
  135. }
  136. });
  137. },
  138. //保存到相册
  139. saveCanvasAsImg() {
  140. uni.canvasToTempFilePath({
  141. canvasId: 'handWriting',
  142. fileType: 'png',
  143. quality: 1, //图片质量
  144. success(res) {
  145. console.log(res.tempFilePath, 'canvas生成图片地址');
  146. uni.saveImageToPhotosAlbum && uni.saveImageToPhotosAlbum({
  147. filePath: res.tempFilePath,
  148. success(res) {
  149. uni.showToast({
  150. title: '已保存到相册',
  151. duration: 2000
  152. });
  153. }
  154. });
  155. }
  156. });
  157. },
  158. //预览
  159. previewCanvasImg() {
  160. uni.canvasToTempFilePath({
  161. canvasId: 'handWriting',
  162. fileType: 'jpg',
  163. quality: 1, //图片质量
  164. success(res) {
  165. uni.previewImage({
  166. urls: [res.tempFilePath] //预览图片 数组
  167. });
  168. }
  169. });
  170. },
  171. //设置canvas背景色 不设置 导出的canvas的背景为透明
  172. //@params:字符串 color
  173. setCanvasBg(color) {
  174. /* 将canvas背景设置为 白底,不设置 导出的canvas的背景为透明 */
  175. //rect() 参数说明 矩形路径左上角的横坐标,左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
  176. //这里是 canvasHeight - 4 是因为下边盖住边框了,所以手动减了写
  177. this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
  178. // ctx.setFillStyle('red')
  179. this.ctx.setFillStyle(color);
  180. this.ctx.fill(); //设置填充
  181. this.ctx.draw(); //开画
  182. }
  183. }
  184. };
  185. </script>
  186. <style lang="scss" scoped>
  187. .u-sign {
  188. overflow: hidden;
  189. position: relative;
  190. &:after {
  191. position: absolute;
  192. top: 0;
  193. right: 0;
  194. left: 0;
  195. bottom: 0;
  196. content: '';
  197. font-size: 36rpx;
  198. font-weight: bold;
  199. color: #CCCCCC;
  200. padding-top: 200rpx;
  201. text-align: center;
  202. border: 1rpx solid #CCCCCC;
  203. pointer-events: none;
  204. opacity: 0.5;
  205. }
  206. }
  207. .is-null {
  208. &:after {
  209. content: '请在此签名';
  210. }
  211. }
  212. .handWriting {
  213. background: #fff;
  214. width: 100%;
  215. height: 100%;
  216. }
  217. .handRight {
  218. display: inline-flex;
  219. align-items: center;
  220. }
  221. .u-sign-content {
  222. width: 100%;
  223. height: 454rpx;
  224. overflow: hidden;
  225. background: #FAFAFA;
  226. // border: 1rpx solid #CCCCCC;
  227. border-radius: 8rpx;
  228. // margin-bottom: 32rpx;
  229. }
  230. .re-draw {
  231. position: absolute;
  232. bottom: 0;
  233. right: 0;
  234. padding: 16rpx;
  235. cursor: pointer;
  236. }
  237. </style>