在微信小程序中如果实现图片拼接功能?

/ 0评 / 0

这里介绍在微信小程序中如果实现图片拼接功能到自己的服务器上

 

首先需要完成图片上传

<view class="images">
<view bindtap="changePreview" class="preview-image" data-src="{{item.url}}" style="background-image:url({{item.url}});background-repeat:no-repeat;background-size:100% auto;" wx:for="{{imageInfo}}">
<view catchtap="removeImage" class="remove" data-index="{{index}}">移除{{index+1}}</view>
</view>
<view bindtap="previewImage" class="select-image" hoverClass="select-image-hover">选择图片</view>

</view>

同样我们还需要实现横竖拼接
<view class="bottom-tab">
<view bindtap="goToPage" class="tabBtn" data-direction="horizontal">横向拼接</view>
<view bindtap="goToPage" class="tabBtn" data-direction="vertical">竖向拼接</view>
</view>

对应的js
Page({
data: {
imageInfo: [],
imageUrls: []
},
onReady: function() {},
previewImage: function(e) {
var a = this;
wx.chooseImage({
count: 9,
success: function(e) {
for (var t = 0; t < e.tempFilePaths.length; t++) a.getImageInfo(e.tempFilePaths[t]);
}
});
},
getImageInfo: function(e) {
var a = this;
wx.getImageInfo({
src: e,
success: function(t) {
var n = a.data.imageInfo, i = a.data.imageUrls, s = new Object();
s.url = e, s.width = t.width, s.height = t.height, n.push(s), i.push(e), a.setData({
imageInfo: n,
imageUrls: i
});
}
});
},
changePreview: function(e) {
var a = this;
wx.previewImage({
current: e.currentTarget.dataset.src,
urls: a.data.imageUrls
});
},
removeImage: function(e) {
var a = this, t = a.data.imageInfo, n = a.data.imageUrls, i = e.currentTarget.dataset.index;
t.splice(i, 1), n.splice(i, 1), a.setData({
imageInfo: t,
imageUrls: n
});
},
goToPage: function(e) {
var a = this, t = e.currentTarget.dataset.direction;
void 0 == a.data.imageInfo[1] ? wx.showToast({
title: "兄弟,至少要选两张图!",
icon: "none"
}) : wx.navigateTo({
url: "./showImage?imageInfo=" + JSON.stringify(a.data.imageInfo) + "&direction=" + t
});
},
onShareAppMessage: function(e) {
return {
title: "一个木函--截图拼接",
path: "/pages/tools/screenshotConnect/screenshotConnect",
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

这样还是单单不够的,我们还需要把上传的图片和拼接后的图片预览显示出来
Page({
data: {
imageInfo: [],
direction: "vertical",
canvasWidth: 0,
canvasHeight: 0,
systemHeight: 0,
systemWidth: 0,
showImage: {
url: "",
width: 0,
height: 0
},
hidden: !1
},
onLoad: function(t) {
var e = this;
e.setData({
imageInfo: JSON.parse(t.imageInfo),
direction: t.direction
}), wx.getSystemInfo({
success: function(t) {
e.setData({
systemWidth: t.windowWidth,
systemHeight: t.windowHeight
});
}
}), console.log(e.data.imageInfo), wx.showLoading({
title: "兄弟,给点时间",
mask: !0
}), e.connectImage();
},
connectImage: function() {
var t = this, e = wx.createCanvasContext("draw", t), a = 0, i = 0, h = t.data.imageInfo;
if ("vertical" == t.data.direction) {
a = t.data.systemWidth;
for (var n = 0, s = 0; n < h.length; n++) i += s = h[n].height * a / h[n].width;
t.setData({
canvasWidth: a,
canvasHeight: i
});
for (var n = 0, s = 0, o = 0; n < h.length; n++) s = h[n].height * a / h[n].width,
n > 0 && (o += h[n - 1].height * a / h[n - 1].width), e.drawImage(h[n].url, 0, o, a, s);
} else {
i = t.data.systemHeight;
for (var n = 0, g = 0; n < h.length; n++) a += g = h[n].width * i / h[n].height;
t.setData({
canvasWidth: a,
canvasHeight: i
});
for (var n = 0, g = 0, d = 0; n < h.length; n++) g = h[n].width * i / h[n].height,
n > 0 && (d += h[n - 1].width * i / h[n - 1].height), e.drawImage(h[n].url, d, 0, g, i);
}
e.draw(), setTimeout(function(e) {
wx.canvasToTempFilePath({
canvasId: "draw",
success: function(e) {
console.log(e.tempFilePath), t.setData({
"showImage.url": e.tempFilePath,
hidden: !0
}), t.setShowImage(e.tempFilePath), wx.hideLoading();
}
}, t);
}, 500);
},
previewImage: function(t) {
var e = this, a = [];
a.push(e.data.showImage.url), wx.previewImage({
current: a[0],
urls: a
});
},
setShowImage: function(t) {
var e = this, a = e.data.direction, i = 0, h = 0;
wx.getSystemInfo({
success: function(n) {
wx.getImageInfo({
src: t,
success: function(t) {
if ("vertical" == a) {
s = .93;
i = n.windowWidth * s, h = n.windowWidth / t.width * t.height * s;
} else {
var s = .5;
h = n.windowHeight * s, i = n.windowHeight / t.height * t.width * s;
}
e.setData({
"showImage.width": i,
"showImage.height": h
});
}
});
}
});
},
onShareAppMessage: function(t) {
return {
title: "一个木函--截图拼接",
path: "/pages/tools/screenshotConnect/screenshotConnect",
imageUrl: "https://api.isoyu.com/ARU_GIF_S.php"
};
}
});

前端代码
<view hidden="{{hidden}}" style="opacity:0;">
<canvas canvasId="draw" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px"></canvas>
</view>
<view class="tips">小提示:点击图片可预览,点完长按可保存</view>
<view class="image-box" style="height:{{showImage.height}}px;">
<image bindtap="previewImage" class="image" src="{{showImage.url}}" style="width:{{showImage.width}}px;height:{{showImage.height}}px"></image>
</view>

有不懂的欢迎留言

评论已关闭。