You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
473 lines
22 KiB
473 lines
22 KiB
"use strict";
|
|
var __assign = (this && this.__assign) || function () {
|
|
__assign = Object.assign || function(t) {
|
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
s = arguments[i];
|
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
t[p] = s[p];
|
|
}
|
|
return t;
|
|
};
|
|
return __assign.apply(this, arguments);
|
|
};
|
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
});
|
|
};
|
|
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
function step(op) {
|
|
if (f) throw new TypeError("Generator is already executing.");
|
|
while (_) try {
|
|
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
switch (op[0]) {
|
|
case 0: case 1: t = op; break;
|
|
case 4: _.label++; return { value: op[1], done: false };
|
|
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
default:
|
|
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
if (t[2]) _.ops.pop();
|
|
_.trys.pop(); continue;
|
|
}
|
|
op = body.call(thisArg, _);
|
|
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
}
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
var promise_wx_api_1 = require("../../utils/promise-wx-api");
|
|
var promise_wx_api_2 = require("../../utils/promise-wx-api");
|
|
var nextTick_js_1 = require("../../miniprogram_npm/dai-mp/tools/nextTick.js");
|
|
var translateStyle_js_1 = require("../../miniprogram_npm/dai-mp/tools/translateStyle.js");
|
|
var index_js_1 = require("../../miniprogram_npm/dai-mp/mixins/computed-component/index.js");
|
|
var app = getApp();
|
|
var systemInfo = wx.getSystemInfoSync();
|
|
var windowWidth = systemInfo.windowWidth;
|
|
var dpr = systemInfo.pixelRatio > 2 ? 2 : systemInfo.pixelRatio;
|
|
var showImageWidth = (600 / 750) * windowWidth;
|
|
var showImageHeight = (600 / 750) * windowWidth;
|
|
Component({
|
|
behaviors: [index_js_1.default],
|
|
properties: {
|
|
src: {
|
|
type: String,
|
|
value: "",
|
|
},
|
|
width: {
|
|
type: Number,
|
|
value: 600,
|
|
},
|
|
height: {
|
|
type: Number,
|
|
value: 600,
|
|
},
|
|
showCircle: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
uploadUrl: {
|
|
type: String,
|
|
value: "oss/file/uploadimg",
|
|
},
|
|
},
|
|
data: {
|
|
dpr: dpr,
|
|
avatar: {
|
|
tempFilePath: "",
|
|
x: 0,
|
|
y: 0,
|
|
width: 0,
|
|
height: 0,
|
|
rotate: 0,
|
|
zoom: 1,
|
|
srcWidth: 0,
|
|
srcHeight: 0,
|
|
},
|
|
singleTouchData: {
|
|
isActived: false,
|
|
srcX: 0,
|
|
srcY: 0,
|
|
x: 0,
|
|
y: 0,
|
|
},
|
|
doubleTouchData: {
|
|
isActived: false,
|
|
srcDistance: 0,
|
|
distance: 0,
|
|
},
|
|
fmData: {
|
|
wx_form_id: "",
|
|
avatar_url: "",
|
|
},
|
|
},
|
|
computed: {
|
|
imgStyle: function (data) {
|
|
var _a = data.avatar, x = _a.x, y = _a.y, width = _a.width, height = _a.height, zoom = _a.zoom, rotate = _a.rotate, srcWidth = _a.srcWidth, srcHeight = _a.srcHeight;
|
|
var ratio = srcWidth / width;
|
|
var afterX = x - (srcWidth - width) / 2;
|
|
var afterY = y - (srcHeight - height) / 2;
|
|
var afterZoom = Math.round((10000 * zoom) / ratio) / 10000;
|
|
var styleObj = {
|
|
width: srcWidth + "px",
|
|
height: srcHeight + "px",
|
|
transform: "translate3d(" + afterX + "px, " + afterY + "px, 0) rotate(" + rotate + "deg) scale(" + afterZoom + ")",
|
|
};
|
|
return translateStyle_js_1.default(styleObj);
|
|
},
|
|
},
|
|
watch: {},
|
|
lifetimes: {
|
|
attached: function () {
|
|
this.init();
|
|
},
|
|
},
|
|
methods: {
|
|
init: function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var _a, src, width, height;
|
|
return __generator(this, function (_b) {
|
|
_a = this.data, src = _a.src, width = _a.width, height = _a.height;
|
|
showImageWidth = (width / 750) * windowWidth;
|
|
showImageHeight = (height / 750) * windowWidth;
|
|
if (src) {
|
|
console.log("初始化截图", src);
|
|
this.iniHttpImage(src);
|
|
}
|
|
else {
|
|
this.handleTapReselectBtn();
|
|
}
|
|
return [2];
|
|
});
|
|
});
|
|
},
|
|
selectOneImage: function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var tempFilePaths;
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0: return [4, promise_wx_api_1.wxChooseImage({
|
|
count: 1,
|
|
sizeType: ["compressed"],
|
|
})];
|
|
case 1:
|
|
tempFilePaths = (_a.sent()).data.tempFilePaths;
|
|
return [2, tempFilePaths[0]];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
getCanvas: function (id) {
|
|
if (id === void 0) { id = "#myCanvas"; }
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var _this = this;
|
|
return __generator(this, function (_a) {
|
|
return [2, new Promise(function (reslove) {
|
|
_this.createSelectorQuery()
|
|
.select(id)
|
|
.fields({ node: true, size: true })
|
|
.exec(function (res) {
|
|
reslove(res[0].node);
|
|
});
|
|
})];
|
|
});
|
|
});
|
|
},
|
|
getCanvasImg: function (canvas, src) {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var img;
|
|
return __generator(this, function (_a) {
|
|
img = canvas.createImage();
|
|
return [2, new Promise(function (reslove) {
|
|
img.src = src;
|
|
img.onload = function () {
|
|
reslove(img);
|
|
};
|
|
})];
|
|
});
|
|
});
|
|
},
|
|
createImage: function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var avatar, x, y, width, height, zoom, rotate, destWidth, destHeight, canvas, ctx, img, tempFilePath;
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0:
|
|
avatar = this.data.avatar;
|
|
x = avatar.x, y = avatar.y, width = avatar.width, height = avatar.height, zoom = avatar.zoom, rotate = avatar.rotate;
|
|
destWidth = 600;
|
|
destHeight = 600 * (showImageHeight / showImageWidth);
|
|
return [4, this.getCanvas()];
|
|
case 1:
|
|
canvas = _a.sent();
|
|
(canvas.width = showImageWidth * dpr),
|
|
(canvas.height = showImageHeight * dpr);
|
|
ctx = canvas.getContext("2d");
|
|
ctx.scale(dpr, dpr);
|
|
return [4, this.getCanvasImg(canvas, avatar.tempFilePath)];
|
|
case 2:
|
|
img = _a.sent();
|
|
ctx.drawImage(img, x - ((zoom - 1) * width) / 2, y - ((zoom - 1) * height) / 2, width * zoom, height * zoom);
|
|
return [4, nextTick_js_1.default(1000)];
|
|
case 3:
|
|
_a.sent();
|
|
return [4, promise_wx_api_2.default("canvasToTempFilePath")({
|
|
canvas: canvas,
|
|
})];
|
|
case 4:
|
|
tempFilePath = (_a.sent()).data.tempFilePath;
|
|
ctx.clearRect(0, 0, showImageWidth * dpr, showImageHeight * dpr);
|
|
ctx.scale(1 / dpr, 1 / dpr);
|
|
return [2, tempFilePath];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
rotateImg: function () {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var avatar, canvas, srcWidth, srcHeight, ctx, img, tempFilePath;
|
|
return __generator(this, function (_a) {
|
|
switch (_a.label) {
|
|
case 0:
|
|
avatar = this.data.avatar;
|
|
if (!avatar.tempFilePath)
|
|
return [2];
|
|
wx.showLoading();
|
|
return [4, this.getCanvas("#rotateCanvas")];
|
|
case 1:
|
|
canvas = _a.sent();
|
|
srcWidth = avatar.srcWidth, srcHeight = avatar.srcHeight;
|
|
(canvas.width = srcHeight), (canvas.height = srcWidth);
|
|
ctx = canvas.getContext("2d");
|
|
return [4, this.getCanvasImg(canvas, avatar.tempFilePath)];
|
|
case 2:
|
|
img = _a.sent();
|
|
ctx.translate(srcHeight, 0);
|
|
ctx.rotate((Math.PI * 90) / 180);
|
|
ctx.drawImage(img, 0, 0, srcWidth, srcHeight);
|
|
return [4, nextTick_js_1.default(1000)];
|
|
case 3:
|
|
_a.sent();
|
|
return [4, promise_wx_api_2.default("canvasToTempFilePath")({
|
|
canvas: canvas,
|
|
})];
|
|
case 4:
|
|
tempFilePath = (_a.sent()).data.tempFilePath;
|
|
ctx.clearRect(0, 0, srcWidth, srcHeight);
|
|
ctx.rotate((Math.PI * -90) / 180);
|
|
ctx.translate(-srcHeight, 0);
|
|
console.log(tempFilePath);
|
|
wx.hideLoading();
|
|
this.reselectImage(tempFilePath);
|
|
return [2];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
reselectImage: function (argSrcImage) {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var srcImage, _a, _b, width, height, ratio, defaultRatio, avatarWidth, avatarHeight, avatarX, avatarY, avatar, srcWidth, srcHeight;
|
|
return __generator(this, function (_c) {
|
|
switch (_c.label) {
|
|
case 0:
|
|
_a = argSrcImage;
|
|
if (_a) return [3, 2];
|
|
return [4, this.selectOneImage()];
|
|
case 1:
|
|
_a = (_c.sent());
|
|
_c.label = 2;
|
|
case 2:
|
|
srcImage = _a;
|
|
return [4, promise_wx_api_2.default("getImageInfo")({ src: srcImage })];
|
|
case 3:
|
|
_b = (_c.sent()).data, width = _b.width, height = _b.height;
|
|
ratio = width / height;
|
|
defaultRatio = showImageWidth / showImageHeight;
|
|
if (ratio > defaultRatio) {
|
|
avatarWidth = showImageHeight * ratio;
|
|
avatarHeight = showImageHeight;
|
|
}
|
|
else {
|
|
avatarWidth = showImageWidth;
|
|
avatarHeight = showImageWidth / ratio;
|
|
}
|
|
avatarX = 0, avatarY = 0;
|
|
if (ratio > defaultRatio) {
|
|
avatarX = (showImageWidth - avatarWidth) / 2;
|
|
}
|
|
else {
|
|
avatarY = (showImageHeight - avatarHeight) / 2;
|
|
}
|
|
avatar = this.data.avatar;
|
|
avatar.tempFilePath = srcImage;
|
|
avatar.width = avatarWidth;
|
|
avatar.height = avatarHeight;
|
|
avatar.x = avatarX;
|
|
avatar.y = avatarY;
|
|
avatar.zoom = 1;
|
|
avatar.rotate = 0;
|
|
srcWidth = width;
|
|
srcHeight = height;
|
|
if (srcWidth > 1200) {
|
|
srcHeight = (1200 * srcHeight) / srcWidth;
|
|
srcWidth = 1200;
|
|
}
|
|
avatar.srcWidth = srcWidth;
|
|
avatar.srcHeight = srcHeight;
|
|
this.setData({ avatar: avatar });
|
|
return [2];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
handleTapReselectBtn: function () {
|
|
this.reselectImage();
|
|
},
|
|
handelTouchstartCropper: function (e) {
|
|
var touches = e.touches;
|
|
var _a = this.data, singleTouchData = _a.singleTouchData, doubleTouchData = _a.doubleTouchData;
|
|
if (touches.length === 1) {
|
|
var _b = touches[0], clientX = _b.clientX, clientY = _b.clientY;
|
|
singleTouchData.isActived = true;
|
|
singleTouchData.srcX = clientX;
|
|
singleTouchData.srcY = clientY;
|
|
singleTouchData.x = clientX;
|
|
singleTouchData.y = clientY;
|
|
}
|
|
else if (touches.length > 1) {
|
|
doubleTouchData.isActived = true;
|
|
var t1 = touches[0];
|
|
var t2 = touches[1];
|
|
var distance = parseInt(Math.sqrt(Math.pow(t1.clientX - t2.clientX, 2) +
|
|
Math.pow(t1.clientY - t2.clientY, 2)));
|
|
doubleTouchData.srcDistance = distance;
|
|
doubleTouchData.distance = distance;
|
|
}
|
|
this.setData({
|
|
doubleTouchData: doubleTouchData,
|
|
singleTouchData: singleTouchData,
|
|
});
|
|
},
|
|
handelTouchendCropper: function () {
|
|
var _a = this.data, singleTouchData = _a.singleTouchData, doubleTouchData = _a.doubleTouchData;
|
|
singleTouchData.isActived = false;
|
|
doubleTouchData.isActived = false;
|
|
this.setData({
|
|
doubleTouchData: doubleTouchData,
|
|
singleTouchData: singleTouchData,
|
|
});
|
|
},
|
|
handelTouchmoveCropper: function (e) {
|
|
var touches = e.touches;
|
|
var _a = this.data, avatar = _a.avatar, singleTouchData = _a.singleTouchData, doubleTouchData = _a.doubleTouchData;
|
|
if (touches.length === 1) {
|
|
var _b = touches[0], clientX = _b.clientX, clientY = _b.clientY;
|
|
if (singleTouchData.isActived) {
|
|
var zoom = avatar.zoom, width = avatar.width, height = avatar.height;
|
|
var maxX = ((zoom - 1) * width) / 2, minX = showImageWidth - width - maxX, maxY = ((zoom - 1) * height) / 2, minY = showImageHeight - height - maxY;
|
|
var x = avatar.x, y = avatar.y;
|
|
x += clientX - singleTouchData.x;
|
|
y += clientY - singleTouchData.y;
|
|
x = Math.min(x, maxX);
|
|
x = Math.max(x, minX);
|
|
y = Math.min(y, maxY);
|
|
y = Math.max(y, minY);
|
|
avatar.x = x;
|
|
avatar.y = y;
|
|
singleTouchData.x = clientX;
|
|
singleTouchData.y = clientY;
|
|
}
|
|
}
|
|
else if (touches.length > 1) {
|
|
doubleTouchData.isActived = true;
|
|
var t1 = touches[0];
|
|
var t2 = touches[1];
|
|
if (doubleTouchData.isActived) {
|
|
var distance = parseInt(Math.sqrt(Math.pow(t1.clientX - t2.clientX, 2) +
|
|
Math.pow(t1.clientY - t2.clientY, 2)));
|
|
var zoom = avatar.zoom;
|
|
zoom += ((distance - doubleTouchData.distance) * 2) / windowWidth;
|
|
zoom = Math.max(zoom, 1);
|
|
zoom = Math.min(zoom, 8);
|
|
var width = avatar.width, height = avatar.height;
|
|
var maxX = ((zoom - 1) * width) / 2, minX = showImageWidth - width - maxX, maxY = ((zoom - 1) * height) / 2, minY = showImageHeight - height - maxY;
|
|
var x = avatar.x, y = avatar.y;
|
|
x = Math.min(x, maxX);
|
|
x = Math.max(x, minX);
|
|
y = Math.min(y, maxY);
|
|
y = Math.max(y, minY);
|
|
avatar.x = x;
|
|
avatar.y = y;
|
|
avatar.zoom = zoom;
|
|
doubleTouchData.srcDistance = distance;
|
|
doubleTouchData.distance = distance;
|
|
}
|
|
}
|
|
this.setData({ avatar: avatar, doubleTouchData: doubleTouchData, singleTouchData: singleTouchData });
|
|
},
|
|
submit: function (e) {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var _a, avatar, uploadUrl, avatarTempUrl, _b, _c, code, data, msg;
|
|
return __generator(this, function (_d) {
|
|
switch (_d.label) {
|
|
case 0:
|
|
_a = this.data, avatar = _a.avatar, uploadUrl = _a.uploadUrl;
|
|
if (avatar.tempFilePath == "") {
|
|
return [2, wx.showToast({
|
|
title: "请先选择图片",
|
|
icon: "none",
|
|
duration: 1500,
|
|
})];
|
|
}
|
|
wx.showLoading({
|
|
title: "保存中…",
|
|
mask: true,
|
|
});
|
|
return [4, this.createImage()];
|
|
case 1:
|
|
avatarTempUrl = _d.sent();
|
|
console.log("剪裁成功图片临时地址", avatarTempUrl);
|
|
return [4, promise_wx_api_1.wxUploadFile(uploadUrl, avatarTempUrl, {})];
|
|
case 2:
|
|
_b = _d.sent(), _c = _b.data.data, code = _c.code, data = _c.data, msg = _b.msg;
|
|
wx.hideLoading();
|
|
if (msg === "success" && code === 0) {
|
|
console.log(data);
|
|
this.triggerEvent("cropSuccess", __assign({}, data));
|
|
}
|
|
return [2];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
iniHttpImage: function (src) {
|
|
return __awaiter(this, void 0, void 0, function () {
|
|
var _a, msg, tempFilePath;
|
|
return __generator(this, function (_b) {
|
|
switch (_b.label) {
|
|
case 0: return [4, promise_wx_api_2.default("downloadFile")({
|
|
url: src,
|
|
})];
|
|
case 1:
|
|
_a = _b.sent(), msg = _a.msg, tempFilePath = _a.data.tempFilePath;
|
|
if (msg == "success") {
|
|
this.reselectImage(tempFilePath);
|
|
}
|
|
return [2];
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
});
|
|
|