|
|
@@ -0,0 +1,212 @@
|
|
|
+// pages/clip/clip.js
|
|
|
+const HOST = require('../../utils/const.js').apiUrl;
|
|
|
+import httpRequestApi from '../../utils/APIRequest';
|
|
|
+Page({
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面的初始数据
|
|
|
+ */
|
|
|
+ data: {
|
|
|
+ imageUrl: '',
|
|
|
+ cropperW: '',
|
|
|
+ cropperH: '',
|
|
|
+ img_ratio: '',
|
|
|
+ IMG_W: '',
|
|
|
+ IMG_H: '',
|
|
|
+ clipImage: '',
|
|
|
+ left: '',
|
|
|
+ top: '',
|
|
|
+ screenW: '',
|
|
|
+ screenH: ''
|
|
|
+ },
|
|
|
+ //拖拽事件
|
|
|
+ move: function ({ detail }) {
|
|
|
+ this.setData({
|
|
|
+ left: detail.x * 2,
|
|
|
+ top: detail.y * 2
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //生成图片
|
|
|
+ getImageInfo: function () {
|
|
|
+ wx.showLoading({
|
|
|
+ title: '图片生成中...',
|
|
|
+ })
|
|
|
+ const img_ratio = this.data.img_ratio;
|
|
|
+ const canvasW = (this.data.screenW / this.data.cropperW) * this.data.IMG_W
|
|
|
+ const canvasH = (this.data.screenH / this.data.cropperH) * this.data.IMG_H
|
|
|
+ const canvasL = 0;
|
|
|
+ const canvasT = (this.data.top / this.data.cropperH) * this.data.IMG_H
|
|
|
+ // 将图片写入画布
|
|
|
+ const ctx = wx.createCanvasContext('myCanvas');
|
|
|
+ //绘制图像到画布
|
|
|
+ ctx.beginPath(); //开始绘制
|
|
|
+ //判断是竖着显示还是横着显示
|
|
|
+ if(this.data.img_ratio >= 1) {
|
|
|
+ //保存图片分别是图片地址，canvas绘制距离左边距离，距离上边距离，截取原图片宽度，原图片高度，图片在canvas上的左位置，上位置，生成图片的宽，生成图片的高；
|
|
|
+ ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, 0, 0, this.data.screenW / 2, this.data.screenH / 2);
|
|
|
+
|
|
|
+ } else {
|
|
|
+ //如果图片比较窄两边留白，留白距离
|
|
|
+ const liubaiLeft = (this.data.screenW / 2 - this.data.cropperW / 2) /2;
|
|
|
+ //保存图片分别是图片地址，canvas绘制距离左边距离，距离上边距离，截取原图片宽度，原图片高度，图片在canvas上的左位置，上位置，生成图片的宽，生成图片的高；
|
|
|
+ ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, liubaiLeft, 0, this.data.cropperW, this.data.screenH * img_ratio);
|
|
|
+ }
|
|
|
+ ctx.draw(true, () => {
|
|
|
+ // 获取画布要裁剪的位置和宽度
|
|
|
+ wx.canvasToTempFilePath({
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ width: this.data.screenW / 2,
|
|
|
+ height: this.data.screenH / 2,
|
|
|
+ destWidth: this.data.screenW / 2,
|
|
|
+ destHeight: this.data.screenH / 2,
|
|
|
+ quality: 0.5,
|
|
|
+ canvasId: 'myCanvas',
|
|
|
+ success: (res) => {
|
|
|
+ wx.hideLoading()
|
|
|
+ console.log(res);
|
|
|
+ this.setData({
|
|
|
+ clipImage: res.tempFilePath
|
|
|
+ })
|
|
|
+
|
|
|
+ //上传文件
|
|
|
+ wx.uploadFile({
|
|
|
+ url: HOST + 'wx/file/upload',
|
|
|
+ filePath: res.tempFilePath,
|
|
|
+ name: 'uploadfile_ant',
|
|
|
+ header: {
|
|
|
+ "Content-Type": "multipart/form-data"
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ const data = JSON.parse(res.data);
|
|
|
+ if(data.success) {
|
|
|
+ //上传文件成功后放到相册里
|
|
|
+ httpRequestApi.addPhotoList({
|
|
|
+ path: data.data
|
|
|
+ }).success((res) => {
|
|
|
+ wx.navigateTo({
|
|
|
+ url: '/pages/album/album'
|
|
|
+ })
|
|
|
+ }).fail(() => {
|
|
|
+ wx.showModal({
|
|
|
+ title: '错误提示',
|
|
|
+ content: '图片上传到相册失败'
|
|
|
+ })
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: function (res) {
|
|
|
+ wx.hideToast();
|
|
|
+ wx.showModal({
|
|
|
+ title: '错误提示',
|
|
|
+ content: '上传图片失败'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //成功获得地址的地方
|
|
|
+ // wx.previewImage({
|
|
|
+ // current: '', // 当前显示图片的http链接
|
|
|
+ // urls: [res.tempFilePath] // 需要预览的图片http链接列表
|
|
|
+ // })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面加载
|
|
|
+ */
|
|
|
+ onLoad: function (options) {
|
|
|
+ console.log(options.imageUrl);
|
|
|
+ //获取初始屏幕宽度
|
|
|
+ const screenW = wx.getSystemInfoSync().windowWidth * 2;
|
|
|
+ //h获取剪裁框的高度，按照16:9来计算高度
|
|
|
+ const screenH = screenW / 16 * 9;
|
|
|
+ console.log('剪裁框宽高',screenW,screenH);
|
|
|
+ this.setData({
|
|
|
+ screenW,
|
|
|
+ screenH
|
|
|
+ })
|
|
|
+ const imageUrl = options.imageUrl;
|
|
|
+ this.setData({
|
|
|
+ imageUrl
|
|
|
+ })
|
|
|
+ wx.getImageInfo({
|
|
|
+ src: imageUrl,
|
|
|
+ success: (res) => {
|
|
|
+ console.log(res);
|
|
|
+ //图片实际款高
|
|
|
+ const width = res.width;
|
|
|
+ const height = res.height;
|
|
|
+ //图片宽高比例
|
|
|
+ const img_ratio = width / height
|
|
|
+ this.setData({
|
|
|
+ img_ratio,
|
|
|
+ IMG_W: width,
|
|
|
+ IMG_H: height,
|
|
|
+ })
|
|
|
+ if (img_ratio >= 1) {
|
|
|
+ //宽比较大，横着显示
|
|
|
+ this.setData({
|
|
|
+ cropperW: 750,
|
|
|
+ cropperH: 750 / img_ratio,
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ //竖着显示
|
|
|
+ this.setData({
|
|
|
+ cropperW: 750 * img_ratio,
|
|
|
+ cropperH: 750
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面初次渲染完成
|
|
|
+ */
|
|
|
+ onReady: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面显示
|
|
|
+ */
|
|
|
+ onShow: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面隐藏
|
|
|
+ */
|
|
|
+ onHide: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 生命周期函数--监听页面卸载
|
|
|
+ */
|
|
|
+ onUnload: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面相关事件处理函数--监听用户下拉动作
|
|
|
+ */
|
|
|
+ onPullDownRefresh: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 页面上拉触底事件的处理函数
|
|
|
+ */
|
|
|
+ onReachBottom: function () {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 用户点击右上角分享
|
|
|
+ */
|
|
|
+ onShareAppMessage: function () {
|
|
|
+
|
|
|
+ }
|
|
|
+})
|
