图片自裁剪

pages/album/photoJigsaw/photoJigsaw.vue

@@ -12,13 +12,15 @@
 				<view class="picture-position" @scroll="onScroll($event,index)" :key="index" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
 					<image class="queryInfo" 
 						data-type="image" :data-src="item.url" :data-widthonce="item.width" :data-heightonce="item.height" :src="item.url" 
-						:data-tailorx="item.left" :data-tailorY="item.top"
-						@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></image>
+						:data-tailorx="item.left" :data-tailory="item.top" :data-id="item.id"
+						:class="item.id"
+						:style="{'clip': 'rect('+item.imgtop+'px,'+item.imgright+'px,'+item.imgbottom+'px,'+item.imgleft+'px)', 'position':'absolute'}"
+						@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove($event,index)" @touchend="handleTouchEnd($event,index)"></image>
 				</view>
 			</template>
 			<image class="picture-backgrounImg queryInfo"
 				data-type="image" data-src="../static/album/backgroundImgTo.png" data-widthonce="750" data-heightonce="1100" 
-				data-tailorx="0" data-tailorY="0"
+				data-tailorx="0" data-tailory="0"
 				src="../static/album/backgroundImgTo.png"></image>
 		</view>
 		<button @click="toCanvas">按钮</button>
@@ -41,28 +43,43 @@ export default {
 			
       pictureJigsawPosition:[//图片框位置
         {
+          id:'img1',
           url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
           width:'299',
           height:'384',
           top:'184',
           left:'74',
           radius:'0',
+          imgtop:0,
+          imgright:0,
+          imgbottom:0,
+          imgleft:0,
         },
         {
+          id:'img2',
           url:'http://lx.pangdly.com/img/liangjiang.097258e.jpg',
           width:'299',
           height:'384',
           top:'184',
           left:'387',
           radius:'0',
+          imgtop:0,
+          imgright:0,
+          imgbottom:0,
+          imgleft:0,
         },
         {
+          id:'img3',
           url:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
           width:'427',
           height:'320',
           top:'640',
           left:'74',
           radius:'0',
+          imgtop:0,
+          imgright:0,
+          imgbottom:0,
+          imgleft:0,
         },
       ],
 			
@@ -83,6 +100,19 @@ export default {
       this.screenWidth = res.width
     }).exec()
   },
+  onReady(){
+    uni.createSelectorQuery().selectAll('.queryInfo').boundingClientRect().exec((res)=>{//初始化IMG自截图的宽高
+      let clipList = res[0]
+      clipList.forEach(item=>{
+        this.pictureJigsawPosition.forEach(item2=>{
+          if(item.dataset.id==item2.id){
+            item2.imgright = item.width
+            item2.imgbottom = item.height
+          }
+        })
+      })
+    })
+  },
   methods: {
     onScroll(event) {// event.detail 包含了滚动位置信息
       console.log('滚动位置：', event.detail)
@@ -102,13 +132,14 @@ export default {
     //1.获取当前位置。确定开始位置的图片值
     //2.获取终点位置
     //3.循环终点位置。确实终点位置是否再开始位置，若不在，则将开始位置和终点位置图片互换
-    handleTouchMove(event) {
+    handleTouchMove(event,index) {
     },
-    handleTouchStart(event,index) {//changedTouches[0]  pageX横向 pageY属相
+    handleTouchStart(event,index) {//changedTouches[0]  pageX横向 pageY属相  //rect (top, right, bottom, left)
+      console.log(event)
       this.transpositionStartMes = event.changedTouches[0]
       this.transpositionStartIndex = index
     },
-    handleTouchEnd(event) {//点击图片是否切换
+    handleTouchEnd(event,index) {//点击图片是否切换
       //距离头部高度 
       var navHeight = this.pxToRpx(this.albumBoxTop)
       //获取终点位置
@@ -148,13 +179,34 @@ export default {
       // 1.先查询要绘制的image相关属性数据
       // 这里我将需要查询的所有image的类名都设置为queryInfo
       uni.createSelectorQuery().selectAll('.queryInfo').boundingClientRect().exec((res)=>{
-        promiseArray = res[0]
+        promiseArray = JSON.parse(JSON.stringify(res[0]))
+        var imgList = JSON.parse(JSON.stringify(res[0]))//用于图片自裁剪
         var promiseArrayNum= promiseArray[promiseArray.length-1].top
+        imgList.forEach(item=>{//图片自裁剪循环
+				  this.pictureJigsawPosition.forEach(item2=>{
+				    if(item.dataset.id==item2.id){
+              
+              var leftNum = parseInt(item.dataset.tailorx/750*this.screenWidth)-item.left
+              var heightNum = parseInt(item.dataset.tailory/750*this.screenWidth)-(item.top-promiseArrayNum)
+              if(leftNum<0){
+                leftNum = 0
+              }
+              if(heightNum>0){
+                heightNum=0
+              }
+              item2.imgtop =  leftNum
+				      item2.imgright = parseInt(item.dataset.widthonce/750*this.screenWidth)+leftNum
+				      item2.imgbottom = parseInt(item.dataset.heightonce/750*this.screenWidth)+heightNum
+              item2.imgleft = leftNum
+				    }
+				  })
+        })
+        
         for(let i=0;i<promiseArray.length;i++){
           let type = 'image'
           let src= promiseArray[i].dataset.src
-          let posX = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth)//promiseArray[i].left
-          let posY = parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)//promiseArray[i].top-promiseArrayNum
+          let posX = promiseArray[i].left //parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth)
+          let posY = promiseArray[i].top-promiseArrayNum//parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)
           let tailorx = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth)-promiseArray[i].left
           if(tailorx<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
             tailorx = 0
@@ -207,12 +259,18 @@ export default {
             tx.src = promiseArray[i].src									// 线上地址或者本地地址都可以
             tx.onload = () => {
               // 图片  裁剪 ：X  Y   宽度 高度
-              //0,0,promiseArray[i].swidth * dpr, promiseArray[i].sheight * dpr,  
-              console.log(promiseArray[i].swidth+','+promiseArray[i].sheight+','+promiseArray[i].posX+','+promiseArray[i].posY+','+promiseArray[i].width+','+promiseArray[i].height)
-              textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight-1,  promiseArray[i].posX * dpr, promiseArray[i].posY * dpr,promiseArray[i].width * dpr, promiseArray[i].height * dpr)	
+              //promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight-1,  
+              textCtx.drawImage(tx,promiseArray[i].posX * dpr, promiseArray[i].posY * dpr,promiseArray[i].width * dpr, promiseArray[i].height * dpr)	
+              
             }
           }
           
+          if(this.canvasMaskNum==0){
+            this.canvasMaskNum++
+            setTimeout(()=>{// uni-app必须加上延迟，不然显示不出来， 亲测
+						  this.toCanvas()
+            }, 1000) 
+          }
         })
     },
   }
@@ -260,6 +318,7 @@ export default {
 			position: absolute;
 			image{
 				display: block;
+				height: 100%;
 			}
 		}
 		.picture-positionBox{