截屏

pages/album/photoJigsaw/photoJigsaw.vue

@@ -14,7 +14,6 @@
 						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" :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>
@@ -50,10 +49,6 @@ export default {
           top:'184',
           left:'74',
           radius:'0',
-          imgtop:0,
-          imgright:0,
-          imgbottom:0,
-          imgleft:0,
         },
         {
           id:'img2',
@@ -63,23 +58,15 @@ export default {
           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',
+          width:'299',
+          height:'384',
           top:'640',
           left:'74',
           radius:'0',
-          imgtop:0,
-          imgright:0,
-          imgbottom:0,
-          imgleft:0,
         },
       ],
 			
@@ -99,19 +86,7 @@ export default {
     query.select('.jigsaw-picture').boundingClientRect(res => {
       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 包含了滚动位置信息
@@ -135,7 +110,6 @@ export default {
     handleTouchMove(event,index) {
     },
     handleTouchStart(event,index) {//changedTouches[0]  pageX横向 pageY属相  //rect (top, right, bottom, left)
-      console.log(event)
       this.transpositionStartMes = event.changedTouches[0]
       this.transpositionStartIndex = index
     },
@@ -182,31 +156,12 @@ export default {
         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 = 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 posX = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth) //如果向左位移则需要用框的
+          let posY = parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)//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
@@ -217,8 +172,8 @@ export default {
           }
           let width = promiseArray[i].width
           let height = promiseArray[i].height
-          let swidth = parseInt(promiseArray[i].dataset.widthonce)///750*this.screenWidth
-          let sheight = parseInt(promiseArray[i].dataset.heightonce)///750*this.screenWidth
+          let swidth = parseInt(promiseArray[i].dataset.widthonce/750*this.screenWidth)///750*this.screenWidth
+          let sheight = parseInt(promiseArray[i].dataset.heightonce/750*this.screenWidth)///750*this.screenWidth
           promiseArray[i]={
             type:'image',
             src: src,
@@ -241,14 +196,16 @@ export default {
       // uni-app 中，不管是小程序，app，h5 在获取元素实例时，都是统一的方法,只要获取元素的宽高
       uni.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true })
         .exec((res) => {
-          // 获取设备设备像素比
-          const dpr = uni.getSystemInfoSync().pixelRatio
+          
           // 微信小程序绘制
           let textCanvas = that.textCanvas = res[0].node				// 获取元素实例
+          let textCtx = textCanvas.getContext('2d')				// 创建二维绘图
+          // 获取设备设备像素比
+          const dpr = uni.getSystemInfoSync().pixelRatio
           textCanvas.width = res[0].width * dpr					// 设置canvas像素宽
           textCanvas.height = res[0].height * dpr				// 设置canvas像素高
-          let textCtx = textCanvas.getContext('2d')				// 创建二维绘图
           textCtx.clearRect(0, 0, res[0].width, res[0].height)	// 设置画布大小
+          textCtx.scale(dpr, dpr)
          
 						
           // 这里开始绘制canvas内容，绘制的过程当中，不知道是小程序的问题，还是什么问题在绘制有背景图片的内容时，
@@ -257,20 +214,19 @@ export default {
           for(let i = 0; i < promiseArray.length; i++){
             const tx = textCanvas.createImage()
             tx.src = promiseArray[i].src									// 线上地址或者本地地址都可以
+            tx.width = promiseArray[i].width	
+            tx.height = promiseArray[i].height	
             tx.onload = () => {
               // 图片  裁剪 ：X  Y   宽度 高度
               //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(i==promiseArray.length-1){
+                textCtx.drawImage(tx, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)
+              }else{
+                textCtx.drawImage(tx,promiseArray[i].tailorx,promiseArray[i].tailory,promiseArray[i].swidth, promiseArray[i].sheight*1.72, promiseArray[i].posX, promiseArray[i].posY,promiseArray[i].swidth, promiseArray[i].sheight)	
+              }
               
             }
           }
-          
-          if(this.canvasMaskNum==0){
-            this.canvasMaskNum++
-            setTimeout(()=>{// uni-app必须加上延迟，不然显示不出来， 亲测
-						  this.toCanvas()
-            }, 1000) 
-          }
         })
     },
   }