在线制作带壳截图,支持多品牌手机、平板、智能手表。支持炫酷的带壳截图功能,无论你是什么机型基本都支持,只需提前设置好手机型号,即可即可开始你的截图之旅。
![](https://img-blog.csdnimg.cn/img_convert/0b71ed892257c338c19f2cdfda4b93e5.jpeg)
代码片段
methods: {
onloadimg: function(width, height, image, image_path) {
this.setData({
userImage: image_path,
userImageWidth: width,
userImageHeight: height,
userImageK: image
});
var that = this;
image > 2 ? (this.selectedBgItem =this.bgSrc[3]): (this.selectedBgItem= this.bgSrc[0]);
uni.getSystemInfo({
success: function(e) {
that.setData({
screenWidth: e.screenWidth,
screenHeight: e.screenHeight,
windowHeight: e.windowHeight,
pixelRatio: e.pixelRatio
}),
that.findPosition(0);
}
})
},
//变更手机壳
changeBg: function(e) {
this.findPosition(e.detail.value[0]),
this.radioChange(e.detail.value[1]);
},
radioChange: function(e) {
var a = e;
if (a != this.selectedBgItem.selectedSrcIndex) {
for (var t = 0; t < this.selectedBgItem.srcs.length; ++t) {
var c = this.selectedBgItem.srcs[t];
t == a ? (c.checked = !0, this.selectedBgItem.selectedSrcIndex = a,
this.selectedBgItem.selectedSrc = c.src) : c.checked = !1;
}
this.setData({
selectedBgItem: this.selectedBgItem
});
}
},
bindMultiPickerColumnChange: function(a) {
var t = a.detail.column, c = a.detail.value;
0 == t && this.getcolor(c), this.multiIndex[t]=c;
},
createPic: function() {
uni.showLoading({
title: "图片保存中"
});
var e = this.selectedBgItem, a = e.selectedSrcIndex;
// if (e.srcs[a].isCDN) {
var t = this;
uni.getImageInfo({
src: e.srcs[a].src,
success: function(a) {
uni.saveFile({
tempFilePath: a.path,
success: function(a) {
e.selectedSrc = a.savedFilePath, t.redrawCanvas();
}
});
}
});
// } else this.redrawCanvas();
//this.redrawCanvas();
},
redrawCanvas: function() {
var e = this;
new Promise(function(a) {
e.setUpCanvas();
var t = e;
var c = t.selectedBgItem.originBgFrame,
i = t.selectedBgItem.originPicFrame,
n = t.selectedBgItem.originBgOffset,
s = i[3] / i[2], r = 0, l = 0, o = i[2], g = i[3];
s > t.userImageK ? (g = t.userImageHeight * i[2] / t.userImageWidth, l = (i[3] - g) / 2) : (o = t.userImageWidth * i[3] / t.userImageHeight,
r = (i[2] - o) / 2);
var u = uni.createCanvasContext("myCanvas");
u.clearRect(0, 0, c[2] + 2 * n[0], c[3] + 2 * n[1]),
u.fillStyle = "#ffffff",
u.fillRect(0, 0, c[2] + 2 * n[0], c[3] + 2 * n[1]),
u.fillStyle = "#000000",
u.fillRect(n[0] + i[0], n[1] + i[1], i[2], i[3]),
u.drawImage(t.userImage, n[0] + i[0] + r, n[1] + i[1] + l, o, g),
u.drawImage(t.selectedBgItem.selectedSrc, 0, 0, c[2], c[3], n[0], n[1], c[2], c[3]),
u.draw(),
setTimeout(function() {
return a();
}, 1e3);
}).then(function() {
uni.hideLoading(),
uni.canvasToTempFilePath({
canvasId: "myCanvas",
success: function(a) {
var t = a.tempFilePath;
FK.Utils.USaveImage(t);
}
});
}, this);
},
//设置画布宽和高
setUpCanvas: function() {
var e = this.selectedBgItem;
this.canvasWidth = e.originBgFrame[2] + 2 * e.originBgOffset[0];
this.canvasHeight = e.originBgFrame[3] + 2 * e.originBgOffset[1];
},
findPosition: function(e) {
var a = this.bgSrc[e],
t = a.originBgFrame[2],
c = a.originBgFrame[3],
i = a.originPicFrame[2],
n = a.originPicFrame[3],
s = a.originPicFrame[0],
r = a.originPicFrame[1],
l = this.windowHeight - 220 / this.pixelRatio,
o = (.6 * this.screenWidth - this.bgMarginLeft) / t,
g = l / c;
g < o && (o = g);
var u = s * o - Math.floor(s * o),
h = r * o - Math.floor(r * o),
d = Math.round(i * o) - i * o,
m = Math.round(n * o) - n * o;
t = Math.round(t * o),
c = Math.round(c * o),
i = Math.round(i * o),
n = Math.round(n * o),
s = Math.floor(s * o),
r = Math.floor(r * o), u >= d && i++, h >= m && n++;
var p = (l - c) / 2;
this.setData({
selectedBgItem: a,
bgWidth: t,
bgHeight: c,
picWidth: i,
picHeight: n,
marginLeft: s,
marginTop: r,
bgMarginTop: p,
cus_left:a.marginLeft || "0px"
});
console.log("bgMarginTop = "+p+", marginTop = "+r+" ,marginLeft = "+s);
},
goAlbum: function() {
var e = this;
uni.chooseImage({
count: 1,
sourceType: [ "album" ],
sizeType: [ "original" ],
success: function(res) {
let path = res.tempFilePaths[0];
FK.AApi.A_CHECK_IMG(path,function(){
uni.getImageInfo({
src: path,
success: function(a) {
var t = a.height / a.width;
e.onloadimg(a.width, a.height, t, a.path);
}
});
});
}
});
},
}
带壳截图在线生成器 - 一刀工具箱APP在线制作带壳截图,支持多品牌手机、平板、智能手表。支持炫酷的带壳截图功能,无论你是什么机型基本都支持,只需提前设置好手机型号,即可即可开始你的截图之旅。 https://tools.yidaotool.com/phones
|