123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208 |
- const HOST = require('../../utils/const.js').apiUrl;
- import httpRequestApi from '../../utils/APIRequest';
- Page({
-
- data: {
- imageUrl: '',
- cropperW: '',
- cropperH: '',
- img_ratio: '',
- IMG_W: '',
- IMG_H: '',
- clipImage: '',
- top: '',
- screenW: '',
- screenH: ''
- },
-
- move: function ({ detail }) {
- this.setData({
- top: detail.y * 2
- })
- },
-
- getImageInfo: function () {
- wx.showLoading({
- title: '图片生成中...',
- })
- const img_ratio = this.data.img_ratio;
- const canvasW = 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) {
-
- ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, 0, 0, this.data.screenW / 2, this.data.screenH / 2);
- } else {
-
- ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, 0, 0, this.data.screenW / 2, this.data.screenH / 1.2);
- }
- ctx.draw(true, () => {
-
- wx.canvasToTempFilePath({
- x: 0,
- y: 0,
- width: this.data.screenW / 2,
- height: this.data.screenH / 1.2,
- destWidth: this.data.screenW / 2,
- destHeight: this.data.screenH / 1.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: '上传图片失败'
- })
- }
- });
-
-
-
-
-
- }
- })
- })
- },
-
- onLoad: function (options) {
- console.log(options.imageUrl);
-
- const screenW = wx.getSystemInfoSync().windowWidth * 2;
-
- const screenH = screenW / 16 * 9;
- this.setData({
- screenW
- })
- 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,
- screenH: 750 / 16 * 9
- })
- } else {
-
- this.setData({
- cropperW: 750 * img_ratio,
- cropperH: 750,
- screenH: (750 * img_ratio) / 16 * 9
- })
- }
- }
- })
- },
-
- onReady: function () {
- },
-
- onShow: function () {
- },
-
- onHide: function () {
- },
-
- onUnload: function () {
- },
-
- onPullDownRefresh: function () {
- },
-
- onReachBottom: function () {
- },
-
- onShareAppMessage: function () {
- }
- })
|