预览效果
下图是发送到朋友圈的效果
刚刚
删除
选择图片
导出切片
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;
}