autograph-to-pic.vue 5.8 KB

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