Skip to content

U
uni-pdtravel
Commit 6e40a25e authored by qipeng's avatar qipeng
Browse files
Options

图片自裁剪

parent 9c2677c0
Hide whitespace changes
Inline Side-by-side
Showing with 71 additions and 12 deletions
pages/album/photoJigsaw/photoJigsaw.vue
View file @ 6e40a25e
......@@ -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{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment