Skip to content

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

画布截图

parent 90422217
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 116 deletions
components/tk-view2canvas.vue
View file @ d5841a28
......@@ -106,10 +106,10 @@ export default {
arrayInfo[i].width * dpr, arrayInfo[i].height * dpr)
imageIndex++
} else if (arrayInfo[i].type == 'image1') {
console.log(arrayInfo[i].swidth*dpr+','+arrayInfo[i].sheight*dpr+','+arrayInfo[i].width*dpr+','+arrayInfo[i].height*dpr)
console.log(arrayInfo[i].swidth*dpr+','+arrayInfo[i].sheight*dpr+','+arrayInfo[i].width*dpr+','+arrayInfo[i].height*dpr+','+arrayInfo[i].posX+','+arrayInfo[i].posY)
ctx.drawImage(imageArray[imageIndex],
0,0,arrayInfo[i].swidth * dpr,arrayInfo[i].sheight * dpr,
arrayInfo[i].posX * dpr, arrayInfo[i].posY * dpr,arrayInfo[i].width * dpr, arrayInfo[i].height * dpr)
0,0,arrayInfo[i].width * dpr,arrayInfo[i].height * dpr,
arrayInfo[i].posX * dpr, arrayInfo[i].posY * dpr,arrayInfo[i].swidth * dpr, arrayInfo[i].sheight * dpr)
imageIndex++
}
}
......
pages/album/photoJigsaw/photoJigsaw.vue
View file @ d5841a28
......@@ -6,36 +6,31 @@
我的相片
</view>
<!--图片拼图-->
<view class="jigsaw-picture queryInfo" data-type="view" id="jigsawPicture" ref="jigsawPicture">
<image class="picture-backgrounImg queryInfo"
data-type="image2" data-src="http://lx.pangdly.com/img/yunduan.331a774.jpg" data-widthonce="750" data-heightonce="1100"
src="http://lx.pangdly.com/img/yunduan.331a774.jpg"></image>
<view class="jigsaw-picture" data-type="view" id="jigsawPicture" ref="jigsawPicture">
<template v-for="(item,index) in pictureJigsawPosition">
<view class="picture-position queryInfo" data-type="view" :key="index" :style="{'width': item.width + 'rpx' ,'height': item.height + 'rpx' ,'top': item.top + 'rpx' ,'left': item.left + 'rpx' ,'border-radius': item.radius + 'rpx' ,}">
<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="image1" :data-src="item.url" :data-widthonce="item.width" :data-heightonce="item.height" :src="item.url"
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>
</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"
src="../static/album/backgroundImgTo.png"></image>
</view>
<button @click="toCanvas">按钮</button>
<tk-view2canvas ref="tkCanvas"
:canvas-width="canvasWidth"
:canvas-height="canvasHeight">
</tk-view2canvas>
<view class="jigsaw-canvasMask" :class="canvasMaskType==true?'jigsaw-canvasMaskAct':''" :style="{'top': albumBoxTop + 'px'}">
<canvas class="jigsaw-canvas" type="2d" id="myCanvas"></canvas>
</view>
</view>
</template>
<script>
let promiseIndex = 0
let promiseArray = []
let imageArray = []
let imageIndex = 0
import tkView2canvas from '@/components/tk-view2canvas' //面包屑导航
export default {
components: {
tkView2canvas
},
data() {
return {
screenWidth:0,//屏幕宽度
......@@ -47,34 +42,37 @@ export default {
pictureJigsawPosition:[//图片框位置
{
url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
width:'300',
height:'500',
top:'200',
left:'24',
radius:'50',
width:'299',
height:'384',
top:'184',
left:'74',
radius:'0',
},
{
url:'http://lx.pangdly.com/img/liangjiang.097258e.jpg',
width:'400',
height:'200',
top:'200',
left:'340',
radius:'8',
width:'299',
height:'384',
top:'184',
left:'387',
radius:'0',
},
{
url:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
width:'400',
height:'200',
top:'560',
left:'340',
radius:'16',
width:'427',
height:'320',
top:'640',
left:'74',
radius:'0',
},
],
transpositionStartMes:{},
transpositionStartIndex:0,
canvasWidth: 1080, //canvas的width
canvasHeight: 1920, //canvas的height 我这里简单写成1080*1920.可以根据自己的业务需求去动态修改这个尺寸。
textCanvas: null, // 初始化 canvas 值
canvasMaskNum:0, //渲染次数
canvasMaskType:false,
}
},
onLoad(option) {
......@@ -86,6 +84,9 @@ export default {
}).exec()
},
methods: {
onScroll(event) {// event.detail 包含了滚动位置信息
console.log('滚动位置：', event.detail)
},
recordDeviceInfo() { //---记录设备信息
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight // 状态栏高度
this.capsule = uni.getMenuButtonBoundingClientRect() // 胶囊大小、位置数据
......@@ -142,97 +143,89 @@ export default {
},
toCanvas(){
let that = this
var arrayInfo = []
// 1.先查询要绘制的view,image,text相关属性数据
// 这里我将需要查询的所有view或text或image的类名都设置为queryInfo
this.canvasMaskType = true
let promiseArray = []
// 1.先查询要绘制的image相关属性数据
// 这里我将需要查询的所有image的类名都设置为queryInfo
uni.createSelectorQuery().selectAll('.queryInfo').boundingClientRect().exec((res)=>{
let resArray = res[0]
console.log('获取到信息：', res[0])
for(let i=0;i<resArray.length;i++){
//1.判断查询到的组件类别,如果是view类，就按照view对应的格式将创建的对象添加到数组中
if(resArray[i].dataset.type == 'view'){
let bgColor = resArray[i].dataset.bgcolor||'#fff'
let width = resArray[i].width
let height = resArray[i].height
let posX = resArray[i].left
let posY = resArray[i].top
arrayInfo.push({
type:'view',
width: width,
height: height,
bgColor: bgColor,
posX:posX,
posY:posY
})
}//2.判断查询到的组件类别,如果是image类，就按照image对应的格式将创建的对象添加到数组中
else if(resArray[i].dataset.type == 'image1'){
let type = 'image1'
let src= resArray[i].dataset.src
let posX = resArray[i].left
let posY = resArray[i].top
let width = resArray[i].width
let height = resArray[i].height
let swidth = parseInt(resArray[i].dataset.widthonce/750*this.screenWidth)
let sheight = parseInt(resArray[i].dataset.heightonce/750*this.screenWidth)
arrayInfo.push({
type:'image1',
src: src,
width:width,
height: height,
swidth,
sheight,
posX:posX,
posY:posY
})
promiseArray = res[0]
var promiseArrayNum= promiseArray[promiseArray.length-1].top
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 tailorx = parseInt(promiseArray[i].dataset.tailorx/750*this.screenWidth)-promiseArray[i].left
if(tailorx<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
tailorx = 0
}
else if(resArray[i].dataset.type == 'image2'){
let type = 'image2'
let src= resArray[i].dataset.src
let posX = resArray[i].left
let posY = resArray[i].top
let width = resArray[i].width
let height = resArray[i].height
arrayInfo.push({
type:'image2',
src: src,
width:width,
height: height,
posX:posX,
posY:posY
})
let tailory = parseInt(promiseArray[i].dataset.tailory/750*this.screenWidth)-(promiseArray[i].top-promiseArrayNum)
if(tailory<0){//因为用的parseInt 是直接舍去，当出现负数的时候 则算为0
tailory = 0
}
//3.判断查询到的组件类别,如果是text类，就按照text对应的格式将创建的对象添加到数组中
else if(resArray[i].dataset.type == 'text'){
let type = 'text'
let color= resArray[i].dataset.color
let word= resArray[i].dataset.word
let size= resArray[i].dataset.size
let posX = resArray[i].left
let posY = resArray[i].top
arrayInfo.push({
type:'text',
color:color,
word:word,
size:size,
posX:posX,
posY:posY
})
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
promiseArray[i]={
type:'image',
src: src,
width:width,
height: height,
swidth,
sheight,
posX:posX,
posY:posY,
tailorx:tailorx,
tailory:tailory,
}
}
//查询完毕后，也就创建好了arrayInfo数组，下面将arrayInfo数组作为参数，传给组件的drawCanvas()方法
that.$refs.tkCanvas.drawCanvas(arrayInfo)
console.log('获取到信息：', promiseArray)
this.drowImg(promiseArray)
})
},
drowImg(promiseArray){ //绘制图片
let that = this
// 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 // 获取元素实例
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) // 设置画布大小
// 这里开始绘制canvas内容，绘制的过程当中，不知道是小程序的问题，还是什么问题在绘制有背景图片的内容时，
// 文字内容必须要延迟绘制，也就是要定时器延迟一定时间才能绘制，要不然就会将文字覆盖在图片下方。
// 图片的绘制
for(let i = 0; i < promiseArray.length; i++){
const tx = textCanvas.createImage()
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)
}
}
})
},
}
}
</script>
<style scoped lang="scss">
.albumBox{
display: flex;
flex-direction:column;
height: 100vh;
// display: flex;
// flex-direction:column;
height: 100VH;
background-color: #fff;
overflow: auto;
}
.nav-bar {
width: 100%;
......@@ -265,6 +258,9 @@ export default {
border:solid 1px #333333;
overflow: auto;
position: absolute;
image{
display: block;
}
}
.picture-positionBox{
width: 750rpx;
......@@ -274,5 +270,21 @@ export default {
left: 0;
}
}
.jigsaw-canvas{
display: block;
width: 750rpx;
height: 1100rpx;
}
.jigsaw-canvasMask{
display: block;
width: 750rpx;
padding-top: 86rpx;
position: absolute;
left: 0;
z-index: -10;
}
.jigsaw-canvasMaskAct{
z-index: 100;
}
</style>
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