autograph-to-pic.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <template>
  2. <view class="autograph-wrap">
  3. <!-- <view class="handRight">
  4. <view class="handTitle">手写板</view>
  5. </view>
  6. <view class="handBtn">
  7. <view class="slide-wrapper">
  8. <text>选择粗细</text>
  9. <slider @change="updateValue" value="50" show-value class="slider" step="25" />
  10. </view>
  11. <view class="color">
  12. <text>选择颜色</text>
  13. <image @click="selectColorEvent('black')" :src="selectColor === 'black' ? require('./img/color_black_selected.png') : require('./img/color_black.png')" :class="selectColor === 'black' ? 'color_select' : ''" class="black-select"></image>
  14. <image @click="selectColorEvent('red')" :src="selectColor === 'red' ? require('./img/color_red_selected.png') : require('./img/color_red.png') " :class="selectColor === 'red' ? 'color_select' : ''" class="red-select" ></image>
  15. </view>
  16. </view> -->
  17. <view class="handCenter">
  18. <canvas class="handWriting" disable-scroll="true" @touchstart="uploadScaleStart" @touchmove="uploadScaleMove" @touchend="uploadScaleEnd" :id="canvasId" :canvas-id="canvasId"></canvas>
  19. </view>
  20. <!-- <view class="showimg">
  21. <image v-if="showimg" :src="showimg" mode=""></image>
  22. <text v-else >图片展示</text>
  23. </view> -->
  24. <view class="buttons">
  25. <!-- <button @click="retDraw" class="delBtn">重写</button> -->
  26. <u-button size="mini" @click="retDraw" class="delBtn">重写</u-button>
  27. <!-- <button @click="subCanvas" class="subBtn">保存</button> -->
  28. </view>
  29. </view>
  30. </template>
  31. <script>
  32. import Handwriting from './js/signature.js'
  33. export default {
  34. props: {
  35. // 签字画布id
  36. canvasId: {
  37. type: String,
  38. default: ''
  39. },
  40. // 是否为空校验
  41. isEmpty: {
  42. type: Array,
  43. default: function(){
  44. return []
  45. }
  46. }
  47. },
  48. data(){
  49. return{
  50. lineColor:'black',
  51. slideValue:50,
  52. handwriting:'',
  53. selectColor:'black',
  54. color:'',
  55. showimg:'',
  56. share_popup:false,
  57. }
  58. },
  59. watch: {
  60. isEmpty: {
  61. handler(value) {
  62. this.checkEmpty(value)
  63. },
  64. deep: true
  65. }
  66. },
  67. mounted() {
  68. this.handwriting = new Handwriting({
  69. lineColor: this.lineColor,
  70. slideValue: this.slideValue, // 0, 25, 50, 75, 100
  71. canvasName: this.canvasId,
  72. })
  73. console.log(this.handwriting)
  74. },
  75. methods:{
  76. // 为空校验
  77. checkEmpty(arr){
  78. console.log(arr)
  79. let isCheck = []
  80. arr.map(item => {
  81. if(item.state){
  82. isCheck.push(item.name)
  83. }
  84. })
  85. console.log(isCheck)
  86. isCheck.map(item => {
  87. const c = document.getElementById(item); // 获取html的canvas对象,我这个id="canvas"
  88. if(this.isCanvasBlank(c)){
  89. // alert("请绘制草图后再上传!")
  90. // return
  91. item.empty = true
  92. }else{
  93. item.empty = false
  94. }
  95. })
  96. console.log(isCheck,'===空空kong')
  97. },
  98. // 验证canvas画布是否为空函数
  99. isCanvasBlank(canvas) {
  100. console.log(canvas.width,canvas.height)
  101. // var blank = document.createElement('canvas');//系统获取一个空canvas对象
  102. // blank.width = canvas.width;
  103. // blank.height = canvas.height;
  104. // console.log(blank.toDataURL(),blank)
  105. // return canvas.toDataURL() == blank.toDataURL()//比较值相等则为空
  106. },
  107. // 选择画笔颜色
  108. selectColorEvent(event) {
  109. this.selectColor = event
  110. if(event=='black'){
  111. this.color= '#1A1A1A'
  112. }else if(event=='red'){
  113. this.color= '#ca262a'
  114. }
  115. this.handwriting.selectColorEvent(this.color)
  116. },
  117. // 重写
  118. retDraw() {
  119. this.handwriting.retDraw()
  120. },
  121. // 笔迹粗细滑块
  122. updateValue(e) {
  123. this.slideValue = e.detail.value
  124. this.handwriting.selectSlideValue(this.slideValue)
  125. },
  126. // 绑定到canvas的touchstart事件
  127. uploadScaleStart(event){
  128. this.handwriting.uploadScaleStart(event)
  129. },
  130. // 绑定到canvas的touchmove事件
  131. uploadScaleMove(event){
  132. this.handwriting.uploadScaleMove(event)
  133. },
  134. // 绑定到canvas的uploadScaleEnd事件
  135. uploadScaleEnd(event){
  136. this.handwriting.uploadScaleEnd(event)
  137. },
  138. // 保存 生成图片
  139. subCanvas(){
  140. this.handwriting.saveCanvas().then(res=>{
  141. this.showimg = res
  142. console.log(res)
  143. }).catch(err=>{
  144. console.log(err)
  145. })
  146. },
  147. }
  148. }
  149. </script>
  150. <style lang="scss" scoped>
  151. .autograph-wrap {
  152. width: 100%;
  153. height: 100%;
  154. overflow: hidden;
  155. display: flex;
  156. align-content: center;
  157. flex-direction: column;
  158. justify-content: center;
  159. font-size: 28upx;
  160. .handRight {
  161. align-items: center;
  162. .handTitle {
  163. flex: 1;
  164. color: #666;
  165. justify-content: center;
  166. font-size: 30upx;
  167. }
  168. }
  169. .handBtn {
  170. flex-direction: column;
  171. padding: 40upx 20upx;
  172. .slide-wrapper {
  173. align-items: center;
  174. margin-bottom: 20upx;
  175. .slider{
  176. width: 400upx;
  177. padding-left: 20upx;
  178. }
  179. }
  180. .color{
  181. align-items: center;
  182. text{
  183. margin-right: 20upx;
  184. }
  185. .black-select, .red-select {
  186. width: 60upx;
  187. height: 60upx;
  188. vertical-align: super;
  189. }
  190. .black-select.color_select, .red-select.color_select {
  191. width: 90upx;
  192. height: 90upx;
  193. vertical-align: sub;
  194. }
  195. }
  196. }
  197. .handCenter {
  198. border: 4upx dashed #e9e9e9;
  199. flex: 5;
  200. overflow: hidden;
  201. box-sizing: border-box;
  202. width: 90%;
  203. margin: 0 auto;
  204. .handWriting {
  205. background: #fff;
  206. width: 100%;
  207. height: 300upx;
  208. }
  209. }
  210. .showimg{
  211. border: 4upx solid #e9e9e9;
  212. overflow: hidden;
  213. width: 90%;
  214. margin: 0 auto;
  215. background: #eee;
  216. height: 350upx;
  217. margin-top: 40upx;
  218. align-items: center;
  219. justify-content: center;
  220. image{
  221. width: 100%;
  222. height: 100%;
  223. }
  224. text{
  225. font-size: 40upx;
  226. color: #888;
  227. }
  228. }
  229. .buttons{
  230. margin: 20upx 5%;
  231. text-align: right;
  232. .delBtn {
  233. color: #666;
  234. }
  235. .subBtn {
  236. background: #008ef6;
  237. color: #fff;
  238. text-align: center;
  239. justify-content: center;
  240. }
  241. }
  242. }
  243. .drop {
  244. width: 50upx;
  245. height: 50upx;
  246. border-radius: 50%;
  247. background: #FFF;
  248. position: absolute;
  249. left: 0upx;
  250. top: -10upx;
  251. box-shadow: 0px 1px 5px #888888;
  252. }
  253. .slide {
  254. width: 250upx;
  255. height: 30upx;
  256. }
  257. </style>