Skip to content

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

新增插件

parent b832b12e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 266 additions and 11 deletions
components/tk-view2canvas.vue 0 → 100644
View file @ 90422217
<template>
<view>
</view>
</template>
<script>
let promiseIndex = 0
let promiseArray = []
let imageArray = []
let imageIndex = 0
export default {
name: 'kt-view2canvas',
data() {
return {
}
},
props: {
canvasWidth: {
type: Number,
default: 1080
},
canvasHeight: {
type: Number,
default: 2500
}
},
methods: {
//rpx转换为px的工具函数
rpxtopx(rpx) {
let deviceWidth = wx.getSystemInfoSync().windowWidth //获取设备屏幕宽度
let px = (deviceWidth / 750) * Number(rpx)
return Math.floor(px)
},
drawCanvas(arrayInfo) {
promiseIndex = 0
promiseArray = []
imageArray = []
imageIndex = 0
uni.showLoading({
title: '保存中...'
})
// 0.创建canvas及ctx,并获取屏幕的dpr
const canvas = wx.createOffscreenCanvas({
type: '2d',
width: this.canvasWidth,
height: this.canvasHeight
})
const ctx = canvas.getContext('2d')
const dpr = uni.getWindowInfo().pixelRatio
// 1.根据数组数量创建promise数组
for (let i = 0; i < arrayInfo.length; i++) {
promiseArray.push(promiseIndex)
promiseIndex++
}
// 2.根据数组给promise数组赋值
let that = this
for (let i = 0; i < arrayInfo.length; i++) {
promiseArray[i] = new Promise(function(resolve, reject) {
if (arrayInfo[i].type == 'text') {
resolve()
} else if (arrayInfo[i].type == 'view') {
resolve()
} else if (arrayInfo[i].type == 'image2') {
let img = canvas.createImage()
img.src = arrayInfo[i].src
img.onload = function() {
imageArray.push(img)
resolve()
}
img.src = arrayInfo[i].src + `?${new Date().getTime()}`
}else if (arrayInfo[i].type == 'image1') {
let img = canvas.createImage()
img.src = arrayInfo[i].src
img.onload = function() {
imageArray.push(img)
resolve()
}
img.src = arrayInfo[i].src + `?${new Date().getTime()}`
}
})
}
// 3.异步全部加载完成后，绘制图片
let p = Promise.all(promiseArray)
p.then(function() {
//根据数组顺序绘制图片
for (let i = 0; i < arrayInfo.length; i++) {
if (arrayInfo[i].type == 'text') {
ctx.fillStyle = arrayInfo[i].color
ctx.font = that.rpxtopx(arrayInfo[i].size) * dpr + 'px sans-serif'
ctx.textBaseline = 'top'
ctx.fillText(arrayInfo[i].word, arrayInfo[i].posX * dpr, (arrayInfo[i].posY + that
.rpxtopx(20)) * dpr)
} else if (arrayInfo[i].type == 'view') {
ctx.fillStyle = arrayInfo[i].bgColor
ctx.fillRect(arrayInfo[i].posX * dpr, arrayInfo[i].posY * dpr, arrayInfo[i].width *
dpr, arrayInfo[i].height * dpr)
} else if (arrayInfo[i].type == 'image2') {
ctx.drawImage(imageArray[imageIndex], arrayInfo[i].posX * dpr, arrayInfo[i].posY * dpr,
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)
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)
imageIndex++
}
}
const fileData = canvas.toDataURL()
const fs = uni.getFileSystemManager()
const path = `${wx.env.USER_DATA_PATH}/` + new Date().getTime() + 'hello.png'
//数据归零
promiseIndex = 0
promiseArray = []
imageArray = []
imageIndex = 0
fs.writeFile({
filePath: path,
data: fileData.replace(/^data:image\/\w+;base64,/, ''),
encoding: 'base64',
success(res) {
uni.showShareImageMenu({
path: path,
success: res => {
console.log(res)
}
})
},
fail(res) {
console.error(res)
},
complete() {
uni.hideLoading()
}
})
})
}
}
}
</script>
<style>
</style>
\ No newline at end of file
package.json
View file @ 90422217
......@@ -13,5 +13,8 @@
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {}
"dependencies": {},
"devDependencies": {
"html2canvas": "^1.4.1"
}
}
pages/album/photoJigsaw/photoJigsaw - 副本.vue 0 → 100644
View file @ 90422217
This diff is collapsed.
pages/album/photoJigsaw/photoJigsaw.vue
View file @ 90422217
......@@ -6,19 +6,36 @@
我的相片
</view>
<!--图片拼图-->
<view class="jigsaw-picture" ref="jigsawPicture">
<image class="picture-backgrounImg" src="https://i2.hdslb.com/bfs/archive/bd7dfae552d4ff42e113a5b5a931d4ab2c225388.jpg"></image>
<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>
<template v-for="(item,index) in pictureJigsawPosition">
<view class="picture-position" :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 :src="item.url" @touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></image>
<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' ,}">
<image class="queryInfo"
data-type="image1" :data-src="item.url" :data-widthonce="item.width" :data-heightonce="item.height" :src="item.url"
@touchstart="handleTouchStart($event,index)" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></image>
</view>
</template>
</view>
<button @click="toCanvas">按钮</button>
<tk-view2canvas ref="tkCanvas"
:canvas-width="canvasWidth"
:canvas-height="canvasHeight">
</tk-view2canvas>
</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,//屏幕宽度
......@@ -29,7 +46,7 @@ export default {
pictureJigsawPosition:[//图片框位置
{
url:'https://img2.baidu.com/it/u=1213138858,1241586936&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1153',
url:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
width:'300',
height:'500',
top:'200',
......@@ -37,7 +54,7 @@ export default {
radius:'50',
},
{
url:'https://i0.hdslb.com/bfs/archive/4d063c42bb8d738f7be5e5a575a6dd19106c1c7d.jpg',
url:'http://lx.pangdly.com/img/liangjiang.097258e.jpg',
width:'400',
height:'200',
top:'200',
......@@ -45,7 +62,7 @@ export default {
radius:'8',
},
{
url:'https://img2.baidu.com/it/u=1268701741,4039580892&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500',
url:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
width:'400',
height:'200',
top:'560',
......@@ -56,6 +73,8 @@ export default {
transpositionStartMes:{},
transpositionStartIndex:0,
canvasWidth: 1080, //canvas的width
canvasHeight: 1920, //canvas的height 我这里简单写成1080*1920.可以根据自己的业务需求去动态修改这个尺寸。
}
},
onLoad(option) {
......@@ -94,8 +113,8 @@ export default {
//获取终点位置
var endEvent = event.changedTouches[0]
//参数重组 将参数从当前参数转换为 750rpx的数值
var newScale = endEvent.pageX/this.screenWidth*750//换算 满宽在哪
var newRemain = (endEvent.pageY-navHeight)/this.screenWidth*750//换算 满宽在哪 pageY-navHeight 当前手指位置-导航栏高度 为现在手指再DIV内的高度
var newScale = parseInt(endEvent.pageX/this.screenWidth*750)//换算 满宽在哪
var newRemain = parseInt((endEvent.pageY-navHeight)/this.screenWidth*750)//换算 满宽在哪 pageY-navHeight 当前手指位置-导航栏高度 为现在手指再DIV内的高度
endEvent.pageX = newScale
endEvent.pageY = newRemain
//循环是否在某个元素框里面
......@@ -114,7 +133,6 @@ export default {
this.pictureJigsawPosition[this.transpositionStartIndex].url = JSON.parse(JSON.stringify(indexNew))
this.pictureJigsawPosition[newInIndex].url = JSON.parse(JSON.stringify(indexOne))
}
console.log(this.$refs.jigsawPicture)
},
// px转rpx 将头部导航栏PX转换为RPX
pxToRpx(px) {
......@@ -122,6 +140,89 @@ export default {
let scale = uni.upx2px(100)/100
return px/scale
},
toCanvas(){
let that = this
var arrayInfo = []
// 1.先查询要绘制的view,image,text相关属性数据
// 这里我将需要查询的所有view或text或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
})
}
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
})
}
//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
})
}
}
//查询完毕后，也就创建好了arrayInfo数组，下面将arrayInfo数组作为参数，传给组件的drawCanvas()方法
that.$refs.tkCanvas.drawCanvas(arrayInfo)
})
},
}
}
</script>
......
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