预览效果

下图是发送到朋友圈的效果

刚刚

删除

选择图片

导出切片

1.选择图片后，可浏览效果图

2.导出图片，可保存文件到本地

3.将所有九宫格图片分享到朋友圈

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

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

uni.saveImageToPhotosAlbum({

filePath: arr[i],

success: function () {

that.api.msg("导出成功",1)

}

});

}

}

}

}

.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;

}