<template>
<view>
<view class="header">
<view>
<image src="../../../static/AppIcon57x57.png" mode=""></image>
</view>
<view class="">
<view style="color: #1282EF;">预览效果</view>
<view style="color: #626262;font-size: xx-small;">下图是发送到朋友圈的效果</view>
</view>
</view>
<!-- 分割子容器 -->
<view class="newcanvas" :style="{'height':h1+'px'}">
<canvas :style="{'width':w+'px','height':h+'px'}" :canvas-id="'img'+(index+1)" v-for="(item,index) in cont" :key='index'></canvas>
</view>
<view class="blobk">
<text style="color: #b5b5b5;">刚刚</text>
<text style="color: #005FEA;display: inline-block;margin-left: 20upx;">删除</text>
</view>
<view class="buttom_block">
<view style="background: linear-gradient(to right,#FE8C4B,#F44E2F);">
<picker :range="randeAarr" @change="bindPickerChange" >
选择图片
</picker>
</view>
<view style="background: linear-gradient(to right,#29B3F9,#076BEA;" @click="download" >导出切片</view>
</view>
<view class="msg">
<view>1.选择图片后，可浏览效果图</view>
<view>2.导出图片，可保存文件到本地</view>
<view>3.将所有九宫格图片分享到朋友圈</view>
</view>
<!-- 被分割容器 -->
<view class="mycanvas">
<canvas :style="{'height':h1+'px','width':w1+'px'}" canvas-id="mycnavas" id="mycnavas" ></canvas>
</view>
<!-- <view class="newpohoto" @click="newpohotoA">
开始切图
</view> -->
<!-- 裁剪图片的插件 -->
<kps-image-cutter @ok="onok" @cancel="oncancle" :url="imgurl" :fixed="false" :maxWidth="500" :minHeight="300"></kps-image-cutter>
</view>
</template>
<script>
var arr=[];
import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
export default {
components: {kpsImageCutter},
data() {
return {
randeAarr:['二图','三图','四图','六图','九图'],
x:'',//分割系数x轴---控制分割数量
y:'',//分割系数y轴
cont:9,//分割数量
w:'100',//分割子容器宽度
h:'100',//分割子容器高度
w1:300,//被分割主容器宽度
h1:300,//被分割容器高度
imgurl:''//图片资源
}
},
onLoad(i) {
},
methods: {
bindPickerChange(e){//change事件
let that=this;
this.cont=e.detail.value;//根据数组下标判断分割数量
if(this.cont==0){//2张
this.cont=2;
this.x=2;
this.y=1;
this.w="100";
this.h="100";
this.w1="200";
this.h1="100";
}else if(this.cont==1){//三张
this.cont=3;
this.x=3;
this.y=1;
this.w="100";
this.h="100";
this.w1="300";
this.h1="100";
}else if(this.cont==2){//四张
this.cont=4;
this.x=2;
this.y=2;
this.w="150";
this.h="150";
this.w1="300";
this.h1="300";
}else if(this.cont==3){//六张
this.cont=6;
this.x=3;
this.y=2;
this.w="100";
this.h="150";
this.w1="300";
this.h1="300";
}else if(this.cont==4){//九张
this.cont=9;
this.x=3;
this.y=3;
this.w="100";
this.h="100";
this.w1="300";
this.h1="300";
}
uni.chooseImage({//选择相册目标图片
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
// return
uni.getImageInfo({
src:res.tempFilePaths[0],
success(res1) {
that.imgurl=res1.path;//赋值给裁剪插件进行裁剪
}
})
}
});
},
onok(e){//确认裁剪 回调裁剪地址
let that=this;
const ctx = uni.createCanvasContext('mycnavas')//画布对象
this.imgurl='';//置空图片资源
uni.getImageInfo({
src:e.path,
success(res1) {
console.log(res1.path)
ctx.drawImage(res1.path, 0, 0,Number(that.w1),Number(that.h1))
ctx.draw() ;
}
})
setTimeout(function(){
that.newpohotoA()//调用裁剪
},500)
},
oncancle() {//取消裁剪
// url设置为空，隐藏控件
this.imgurl = "";
},
newpohotoA(){//开始切割图片
let that=this;
const cxt = uni.createCanvasContext('mycnavas')
that.api.msg("生成中")
let q = 1;
for (var i = 0; i < that.y; i++) {//纵
for (var j = 0; j <that.x; j++) {//横
let k=q;//重点--相对全局变量赋值给局部
var data = uni.canvasGetImageData({canvasId: 'mycnavas',x:j * Number(that.w),y:i * Number(that.h), width:Number(that.w),height:Number(that.h),success(res) {//复制目标画布
uni.canvasPutImageData({//讲复制的目标画布粘贴进对应分割画布
data: res.data,//对应目标画布图像像素点数据
canvasId: 'img'+k,//存放的画布id
x: 0,
y: 0,
width:Number(that.w),
height:Number(that.h),
success(res1) {
uni.canvasToTempFilePath({//将改画布导出图像
x: 0,
y: 0,
width: Number(that.w),
height: Number(that.h),
destWidth: Number(that.w),//导出图片的宽高
destHeight:Number(that.h),
canvasId: 'img'+k,
success: function(res2) {
arr.push(res2.tempFilePath)//push进全局变量存放所有图片
}
})
},
fail(err) {
console.log(err)
}
},this)
}});
q++
}
}
},
download(){//保存分割的图片
console.log(arr)
let that=this;
for(let i=0;i<arr.length;i++){
uni.saveImageToPhotosAlbum({
filePath: arr[i],
success: function () {
that.api.msg("导出成功",1)
}
});
}
}
}
}
</script>
<style>
.header{
display: flex;
align-items: center;
width: 100vw;
height: 20vw;
padding: 0 30upx;
}
.header image{
width: 12vw;
height: 12vw;
border-radius: 10upx;
margin-right: 8px;
}
.content{
width: 70vw;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.content>view{
width: 33.3%;
height: 23.3vw;
display: flex;
align-items: center;
justify-content: center;
}
.content image{
width: 22.2vw;
height:22.2vw;
background-color: #d3d3d3;
}
.blobk{
width: 70vw;
margin: 20px auto;
}
.blobk text{
font-size: xx-small
}
.buttom_block{
width: 100vw;
height: 50vw;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 30px;
}
.buttom_block>view{
width: 37vw;
height: 9vw;
text-align: center;
line-height: 9vw;
border-radius: 10upx;
color: #FFFFFF;
font-weight: lighter;
}
.msg>view{
width: 50vw;
margin: 0 auto;
color: #949494;
font-weight: lighter;
font-size: xx-small;
white-space: nowrap;
}
.mycanvas{
position: absolute;
top: 0;
z-index: 100;
opacity: 0;
}
canvas {
border: 1px solid #848484;
}
#mycnavas{
width: 300px;
margin: 0 auto;
}
.newcanvas {
width: 316px;
height: 316px;
margin: auto;
}
.newcanvas>canvas{
width: 100px;
height: 100px;
display: inline-block;
margin-left: 4upx;
margin-top: -6upx;
}
</style>
网友评论