小程序单张图片裁剪

1.选择上传的图片页面

const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: \'\',//姓名
    idcard: \'\',//身份证号
    title: \'\',//店铺名称
    shop_type: 0,//是否为线下店铺，0线上店铺，1线下店铺
    region: [\'陕西省\', \'西安市\', \'雁塔区\'],//三级联动地区信息
    address: \'\',//线下店铺才会有
    image_user: \'\',//半身照
    image_card: \'\', //证件照
    maxLength: 1//最大允许上传的照片数量
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 更新上传的图片
    this.setData({
      image_user: app.globalData.image_user,
      image_card: app.globalData.image_card
    })
  },


// 更新姓名
  bindName: function(e){
    this.setData({
      name: e.detail.value
    })
  },
// 更新身份证号
  bindIdcard: function (e) {
    this.setData({
      idcard: e.detail.value
    })
  },
// 更新店铺名称
  bindTitle: function (e) {
    this.setData({
      title: e.detail.value
    })
  },
// 更新是否为线下店铺的值
  switchChange: function(e){
    this.setData({
      shop_type: e.detail.value == true ? 1 : 0
    })
  },
//更新三级联动地址
  bindRegionChange: function (e) {
    this.setData({
      region: e.detail.value
    })
  },
//更新详细地址
  bindAddress: function(e){
    this.setData({
      address: e.detail.value
    })
  },


// 上传半身照
  upLoadImg1: function(){
    var that = this;
    let maxSize = 1024 * 1024;
    let flag = true;
    wx.chooseImage({
      count: 1, //最多可以选择的图片总数
      sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        wx.showToast({
          title: \'正在上传...\',
          icon: \'loading\',
          mask: true,
          duration: 500
        })
        for (let i = 0; i < res.tempFiles.length; i++) {
          if (res.tempFiles[i].size > maxSize) {
            flag = false;
            wx.showModal({
              content: \'图片太大，不允许上传\',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log(\'用户点击确定\')
                }
              }
            });
          }
        }
        if (res.tempFiles.length > that.data.maxLength) {
          wx.showModal({
            content: \'最多能上传\' + that.data.maxLength + \'张图片\',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log(\'确定\');
              }
            }
          })
        }
        if (flag == true && res.tempFiles.length <= that.data.maxLength) {
          that.setData({
            image_user: res.tempFilePaths[0]
          })
          wx.navigateTo({
            url: "/pages/ruzhu6/ruzhu6?src=" + res.tempFilePaths + "&type=user"
          });
        }
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },


// 上传证件照
  upLoadImg2: function () {
    var that = this;
    let maxSize = 1024 * 1024;
    let flag = true;
    wx.chooseImage({
      count: 1, //最多可以选择的图片总数
      sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        wx.showToast({
          title: \'正在上传...\',
          icon: \'loading\',
          mask: true,
          duration: 500
        })
        console.log(res.tempFiles);
        for (let i = 0; i < res.tempFiles.length; i++) {
          console.log(res.tempFiles[i].size);
          if (res.tempFiles[i].size > maxSize) {
            flag = false;
            console.log(111)
            wx.showModal({
              content: \'图片太大，不允许上传\',
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log(\'用户点击确定\')
                }
              }
            });
          }
        }
        if (res.tempFiles.length > that.data.maxLength) {
          console.log(\'222\');
          wx.showModal({
            content: \'最多能上传\' + that.data.maxLength + \'张图片\',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log(\'确定\');
              }
            }
          })
        }
        if (flag == true && res.tempFiles.length <= that.data.maxLength) {
          that.setData({
            image_card: res.tempFilePaths[0]
          })
          wx.navigateTo({
            url: "/pages/ruzhu6/ruzhu6?src=" + res.tempFilePaths + "&type=card"
          });
        }
        
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },


// 提交入驻信息
  submit: function(){
    if (this.data.name == \'\'){
      wx.showToast({
        title: \'姓名不能为空\',
        icon: \'none\'
      })
      return false;
    }
    if (this.data.idcard == \'\') {
      wx.showToast({
        title: \'身份证号不能为空\',
        icon: \'none\'
      })
      return false;
    }
    if (!this.data.idcard.match(/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)) {
      wx.showToast({
        title: \'身份证号格式不正确\',
        icon: \'none\'
      })
      return false;
    }
    if (this.data.image_user == \'\') {
      wx.showToast({
        title: \'半身照不能为空\',
        icon: \'none\'
      })
      return false;
    }
    if (this.data.title == \'\') {
      wx.showToast({
        title: \'店铺名称不能为空\',
        icon: \'none\'
      })
      return false;
    }
    if (this.data.shop_type == 1 && (this.data.address == \'\')) {
      wx.showToast({
        title: \'详细地址不能为空\',
        icon: \'none\'
      })
      return false;
    }
    if (this.data.image_card == \'\') {
      wx.showToast({
        title: \'身份证照片不能为空\',
        icon: \'none\'
      })
      return false;
    }

    var url = app.globalData.reqUrl + \'set_shop/personal\';
    var params = {
      address: this.data.region.join(\'\') + this.data.address,
      name: this.data.name,
      number_id: this.data.idcard,
      shop_type: this.data.shop_type,
      title: this.data.title,
      type: 1,
      user_id: app.globalData.userId,
    };
    app.request.requestPostApi(url, params, this, this.successFun_myInfo, this.failFun)
  },
  successFun_myInfo: function(res,selfObj){
    var that = selfObj;
    if (res.code == 200) {
      console.log(res);
      var id = res.id;
      var imagesList = [];
      // imagesList[0] = that.data.image_user;
      // imagesList[1] = that.data.image_card;
      imagesList[0] = app.globalData.image_user;
      imagesList[1] = app.globalData.image_card;
      console.log(imagesList);
      wx.showLoading({
        title: \'上传中...\',
        icon: \'loading\'
      })
      for (let i = 0; i < imagesList.length; i++) {
        var name = (i == 0) ? \'person_img\' : \'pic_url\';
        wx.uploadFile({
          url: app.globalData.reqUrl + \'set_shop/upload?id=\' + id,
          filePath: imagesList[i],
          name: name,
          header: {
            "Content-Type": "multipart/form-data"
          },
          success: function (data) {
            console.log(data);
            if ((imagesList.length - 1) == i) {
              wx.hideLoading();
              wx.showToast({
                title: \'提交成功\',
                icon: \'none\',
                duration: 2000
              })

              that.setData({
                name: \'\',
                idcard: \'\',
                title: \'\',
                shop_type: 0,
                region: [\'陕西省\', \'西安市\', \'雁塔区\'],
                address: \'\',
                image_user: \'\',
                image_card: \'\'
              });
              setTimeout(function () {
                wx.switchTab({
                  url: \'/pages/my/my\'
                })
              }, 2000)
            }
          },
          fail: function (data) {
            console.log(data);
          }
        });
      }
    } else {
      wx.showToast({
        title: res.message,
        icon: \'none\'
      })
    }
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

View Code

 

2.裁剪图片页面wxml

<!--pages/ruzhu6/ruzhu6.wxml-->
<import src="weCropper.wxml"></import>
<view class="cropper-wrapper">
    <template is="weCropper" data="{{...cropperOpt}}"></template>
    <view class="cropper-buttons">
        <view bindtap="uploadTap" class="upload">
            重新选择
        </view>
        <view bindtap="getCropperImage" class="getCropperImage">
            确定
        </view>
    </view>
</view>

View Code

 

裁剪图片页面wxss

/* pages/ruzhu6/ruzhu6.wxss */
page {
    user-select: none;
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    font-family: Arial,Helvetica,sans-serif;
    overflow-x: hidden;
}

.cropper {
    position: absolute;
    top: 0;
    left: 0;
}

.cropper-buttons {
    background-color: rgba(0,0,0,0.95);
    color: #04b00f;
}

.cropper-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #e5e5e5;
}

.cropper-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
}

.cropper-buttons .upload,.cropper-buttons .getCropperImage {
    width: 50%;
    text-align: center;
}

View Code

 

裁剪图片页面js

var o = function (o) {
  return o && o.__esModule ? o : {
    default: o
  };
}(require("../../utils/weCropper.js")),
  e = wx.getSystemInfoSync(),
  t = e.windowWidth,
  r = e.windowHeight - 50;
var app = getApp();
Page({
  data: {
    type: \'\',//\'user\'用户半身照，\'card\'证件照
    cropperOpt: {
      id: "cropper",
      width: t,
      height: r,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (t - 375) / 2,
        y: (r - 200) / 2,
        width: 375,
        height: 280
      }
    }
  },
  touchStart: function (o) {
    this.wecropper.touchStart(o);
  },
  touchMove: function (o) {
    this.wecropper.touchMove(o);
  },
  touchEnd: function (o) {
    this.wecropper.touchEnd(o);
  },
  getCropperImage: function () {
    let that = this;
    this.wecropper.getCropperImage(function (o) {
      console.log("这个是什么鬼" + o);
      // app.globalData.imgs = o; //这个是上传图片的关键，剪裁后的图片，添加到全局图片中
      console.log(that.data.type);
      console.log(that.data.type == \'user\')
      if (that.data.type == \'user\'){
        app.globalData.image_user = o;
      }else{
        app.globalData.image_card = o;
      }
      wx.navigateBack({})
    });
  },
  uploadTap: function () {
    var o = this;
    wx.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: [\'camera\', \'album\'],
      success: function (e) {
        var t = e.tempFilePaths[0];
        o.wecropper.pushOrign(t);
      }
    });
  },
  onLoad: function (e) {
    console.log(e);
    var isChoose = e.isChoose;
    this.setData({
      isChoose: isChoose,
      type: e.type
    })
    var t = this.data.cropperOpt,
      r = e.src;
    r && (Object.assign(t, {
      src: r
    }), new o.default(t).on("ready", function (o) {
      console.log("wecropper is ready for work!");
    }).on("beforeImageLoad", function (o) {
      console.log("before picture loaded, i can do something"), console.log("current canvas context:", o),
        wx.showToast({
          title: "上传中",
          icon: "loading",
          duration: 2e4
        });
    }).on("imageLoad", function (o) {
      console.log("picture loaded"), console.log("current canvas context:", o), wx.hideToast();
    }));
  }
});

View Code

 

 

3.裁剪组件wxml

<template name="weCropper">
    <canvas bindtouchend="touchEnd" bindtouchmove="touchMove" bindtouchstart="touchStart" canvasId="{{id}}" class="cropper" disableScroll="true" style="width:{{width}}px;height:{{height}}px;background-color: rgba(0, 0, 0, 0.8)"></canvas>
</template>

View Code

 

4./util/weCropper.js

var t = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(t) {
    return typeof t;
} : function(t) {
    return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
};

!function(e, o) {
    "object" === ("undefined" == typeof exports ? "undefined" : t(exports)) && "undefined" != typeof module ? module.exports = o() : "function" == typeof define && define.amd ? define(o) : e.weCropper = o();
}(void 0, function() {
    function e(t) {
        return t.charAt(0).toUpperCase() + t.slice(1);
    }
    function o(t) {
        for (var e = arguments.length, o = Array(e > 1 ? e - 1 : 0), n = 1; n < e; n++) o[n - 1] = arguments[n];
        c.forEach(function(e, n) {
            void 0 !== o[n] && (t[e] = o[n]);
        });
    }
    function n(t, e) {
        Object.defineProperties(t, e);
    }
    function i() {
        return r || (r = wx.getSystemInfoSync()), r;
    }
    var r = void 0, c = [ "touchstarted", "touchmoved", "touchended" ], a = "function" == typeof Symbol && "symbol" === t(Symbol.iterator) ? function(e) {
        return void 0 === e ? "undefined" : t(e);
    } : function(e) {
        return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : void 0 === e ? "undefined" : t(e);
    }, u = function(t, e) {
        if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function");
    }, s = function() {
        function t(t, e) {
            for (var o = 0; o < e.length; o++) {
                var n = e[o];
                n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), 
                Object.defineProperty(t, n.key, n);
            }
        }
        return function(e, o, n) {
            return o && t(e.prototype, o), n && t(e, n), e;
        };
    }(), l = function() {
        function t(t, e) {
            var o = [], n = !0, i = !1, r = void 0;
            try {
                for (var c, a = t[Symbol.iterator](); !(n = (c = a.next()).done) && (o.push(c.value), 
                !e || o.length !== e); n = !0) ;
            } catch (t) {
                i = !0, r = t;
            } finally {
                try {
                    !n && a.return && a.return();
                } finally {
                    if (i) throw r;
                }
            }
            return o;
        }
        return function(e, o) {
            if (Array.isArray(e)) return e;
            if (Symbol.iterator in Object(e)) return t(e, o);
            throw new TypeError("Invalid attempt to destructure non-iterable instance");
        };
    }(), d = {}, f = {
        id: {
            default: "cropper",
            get: function() {
                return d.id;
            },
            set: function(t) {
                "string" != typeof t && console.error("id：" + t + " is invalid"), d.id = t;
            }
        },
        width: {
            default: 750,
            get: function() {
                return d.width;
            },
            set: function(t) {
                "number" != typeof t && console.error("width：" + t + " is invalid"), d.width = t;
            }
        },
        height: {
            default: 750,
            get: function() {
                return d.height;
            },
            set: function(t) {
                "number" != typeof t && console.error("height：" + t + " is invalid"), d.height = t;
            }
        },
        scale: {
            default: 2.5,
            get: function() {
                return d.scale;
            },
            set: function(t) {
                "number" != typeof t && console.error("scale：" + t + " is invalid"), d.scale = t;
            }
        },
        zoom: {
            default: 5,
            get: function() {
                return d.zoom;
            },
            set: function(t) {
                "number" != typeof t ? console.error("zoom：" + t + " is invalid") : (t < 0 || t > 10) && console.error("zoom should be ranged in 0 ~ 10"), 
                d.zoom = t;
            }
        },
        src: {
            default: "cropper",
            get: function() {
                return d.src;
            },
            set: function(t) {
                "string" != typeof t && console.error("id：" + t + " is invalid"), d.src = t;
            }
        },
        cut: {
            default: {},
            get: function() {
                return d.cut;
            },
            set: function(t) {
                "object" !== (void 0 === t ? "undefined" : a(t)) && console.error("id：" + t + " is invalid"), 
                d.cut = t;
            }
        },
        onReady: {
            default: null,
            get: function() {
                return d.ready;
            },
            set: function(t) {
                d.ready = t;
            }
        },
        onBeforeImageLoad: {
            default: null,
            get: function() {
                return d.beforeImageLoad;
            },
            set: function(t) {
                d.beforeImageLoad = t;
            }
        },
        onImageLoad: {
            default: null,
            get: function() {
                return d.imageLoad;
            },
            set: function(t) {
                d.imageLoad = t;
            }
        },
        onBeforeDraw: {
            default: null,
            get: function() {
                return d.beforeDraw;
            },
            set: function(t) {
                d.beforeDraw = t;
            }
        }
    }, h = {
        touchStart: function(t) {
            var e = this, n = l(t.touches, 2), i = n[0], r = n[1];
            o(e, !0, null, null), e.__oneTouchStart(i), t.touches.length >= 2 && e.__twoTouchStart(i, r);
        },
        touchMove: function(t) {
            var e = this, n = l(t.touches, 2), i = n[0], r = n[1];
            o(e, null, !0), 1 === t.touches.length && e.__oneTouchMove(i), t.touches.length >= 2 && e.__twoTouchMove(i, r);
        },
        touchEnd: function(t) {
            var e = this;
            o(e, !1, !1, !0), e.__xtouchEnd();
        }
    }, g = function() {
        function t(e) {
            u(this, t);
            var o = this, i = {};
            return n(o, f), Object.keys(f).forEach(function(t) {
                i[t] = f[t].default;
            }), Object.assign(o, i, e), o.prepare(), o.attachPage(), o.createCtx(), o.observer(), 
            o.cutt(), o.methods(), o.init(), o.update(), o;
        }
        return s(t, [ {
            key: "init",
            value: function() {
                var t = this, e = t.src;
                return t.version = "1.1.4", "function" == typeof t.onReady && t.onReady(t.ctx, t), 
                e && t.pushOrign(e), o(t, !1, !1, !1), t.oldScale = 1, t.newScale = 1, t;
            }
        } ]), t;
    }();
    return Object.assign(g.prototype, h), g.prototype.prepare = function() {
        var t = this, e = i().windowWidth;
        t.attachPage = function() {
            var e = getCurrentPages();
            e[e.length - 1].wecropper = t;
        }, t.createCtx = function() {
            var e = t.id;
            e ? t.ctx = wx.createCanvasContext(e) : console.error("constructor: create canvas context failed, \'id\' must be valuable");
        }, t.deviceRadio = e / 750;
    }, g.prototype.observer = function() {
        var t = this, o = [ "ready", "beforeImageLoad", "beforeDraw", "imageLoad" ];
        t.on = function(n, i) {
            return o.indexOf(n) > -1 ? "function" == typeof i && ("ready" === n ? i(t) : t["on" + e(n)] = i) : console.error("event: " + n + " is invalid"), 
            t;
        };
    }, g.prototype.methods = function() {
        var t = this, e = t.deviceRadio, o = t.width, n = t.height, i = t.cut, r = i.x, c = void 0 === r ? 0 : r, a = i.y, u = void 0 === a ? 0 : a, s = i.width, l = void 0 === s ? o : s, d = i.height, f = void 0 === d ? n : d;
        t.updateCanvas = function() {
            return t.croperTarget && t.ctx.drawImage(t.croperTarget, t.imgLeft, t.imgTop, t.scaleWidth, t.scaleHeight), 
            "function" == typeof t.onBeforeDraw && t.onBeforeDraw(t.ctx, t), t.setBoundStyle(), 
            t.ctx.draw(), t;
        }, t.pushOrign = function(e) {
            return t.src = e, "function" == typeof t.onBeforeImageLoad && t.onBeforeImageLoad(t.ctx, t), 
            wx.getImageInfo({
                src: e,
                success: function(e) {
                    var o = e.width / e.height;
                    t.croperTarget = e.path, console.log(c, u), o < l / f ? (t.rectX = c, t.baseWidth = l, 
                    t.baseHeight = l / o, t.rectY = u - Math.abs((f - t.baseHeight) / 2)) : (t.rectY = u, 
                    t.baseWidth = f * o, t.baseHeight = f, t.rectX = c - Math.abs((l - t.baseWidth) / 2)), 
                    t.imgLeft = t.rectX, t.imgTop = t.rectY, t.scaleWidth = t.baseWidth, t.scaleHeight = t.baseHeight, 
                    t.updateCanvas(), "function" == typeof t.onImageLoad && t.onImageLoad(t.ctx, t);
                }
            }), t.update(), t;
        }, t.getCropperImage = function() {
            for (var o = arguments.length, n = Array(o), i = 0; i < o; i++) n[i] = arguments[i];
            var r = t.id;
            switch (toString.call(n[0])) {
              case "[object Object]":
                var a = n[0].quality, s = void 0 === a ? 10 : a;
                "number" != typeof s ? console.error("quality：" + s + " is invalid") : (s < 0 || s > 10) && console.error("quality should be ranged in 0 ~ 10"), 
                wx.canvasToTempFilePath({
                    canvasId: r,
                    x: c,
                    y: u,
                    width: l,
                    height: f,
                    destWidth: l * s / (10 * e),
                    destHeight: f * s / (10 * e),
                    success: function(t) {
                        "function" == typeof n[n.length - 1] && n[n.length - 1](t.tempFilePath);
                    }
                });
                break;

              case "[object Function]":
                console.log("wx.canvasToTempFilePath start"), wx.canvasToTempFilePath({
                    canvasId: r,
                    x: c,
                    y: u,
                    width: l,
                    height: f,
                    destWidth: l / e,
                    destHeight: f / e,
                    success: function(t) {
                        console.log("wx.canvasToTempFilePath success"), "function" == typeof n[n.length - 1] && n[n.length - 1](t.tempFilePath);
                    },
                    fail: function(t) {
                        console.log(t);
                    },
                    complete: function() {
                        console.log("wx.canvasToTempFilePath end");
                    }
                });
            }
            return t;
        };
    }, g.prototype.cutt = function() {
        var t = this, e = (t.deviceRadio, t.width), o = t.height, n = t.cut, i = n.x, r = void 0 === i ? 0 : i, c = n.y, a = void 0 === c ? 0 : c, u = n.width, s = void 0 === u ? e : u, l = n.height, d = void 0 === l ? o : l;
        t.outsideBound = function(e, o) {
            t.imgLeft = e >= r ? r : t.scaleWidth + e - r <= s ? r + s - t.scaleWidth : e, t.imgTop = o >= a ? a : t.scaleHeight + o - a <= d ? a + d - t.scaleHeight : o;
        }, t.setBoundStyle = function() {
            var n = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, i = n.color, c = void 0 === i ? "#04b00f" : i, u = n.mask, l = void 0 === u ? "rgba(0, 0, 0, 0.3)" : u, f = n.lineWidth, h = void 0 === f ? 1 : f;
            t.ctx.beginPath(), t.ctx.setFillStyle(l), t.ctx.fillRect(0, 0, r, o), t.ctx.fillRect(r, 0, s, a), 
            t.ctx.fillRect(r, a + d, s, o - a - d), t.ctx.fillRect(r + s, 0, e - r - s, o), 
            t.ctx.fill(), t.ctx.beginPath(), t.ctx.setStrokeStyle(c), t.ctx.setLineWidth(h), 
            t.ctx.moveTo(r - h, a + 10 - h), t.ctx.lineTo(r - h, a - h), t.ctx.lineTo(r + 10 - h, a - h), 
            t.ctx.stroke(), t.ctx.beginPath(), t.ctx.setStrokeStyle(c), t.ctx.setLineWidth(h), 
            t.ctx.moveTo(r - h, a + d - 10 + h), t.ctx.lineTo(r - h, a + d + h), t.ctx.lineTo(r + 10 - h, a + d + h), 
            t.ctx.stroke(), t.ctx.beginPath(), t.ctx.setStrokeStyle(c), t.ctx.setLineWidth(h), 
            t.ctx.moveTo(r + s - 10 + h, a - h), t.ctx.lineTo(r + s + h, a - h), t.ctx.lineTo(r + s + h, a + 10 - h), 
            t.ctx.stroke(), t.ctx.beginPath(), t.ctx.setStrokeStyle(c), t.ctx.setLineWidth(h), 
            t.ctx.moveTo(r + s + h, a + d - 10 + h), t.ctx.lineTo(r + s + h, a + d + h), t.ctx.lineTo(r + s - 10 + h, a + d + h), 
            t.ctx.stroke();
        };
    }, g.prototype.update = function() {
        var t = this;
        t.src && (t.__oneTouchStart = function(e) {
            t.touchX0 = e.x, t.touchY0 = e.y;
        }, t.__oneTouchMove = function(e) {
            var o = void 0, n = void 0;
            if (t.touchended) return t.updateCanvas();
            o = e.x - t.touchX0, n = e.y - t.touchY0;
            var i = t.rectX + o, r = t.rectY + n;
            t.outsideBound(i, r), t.updateCanvas();
        }, t.__twoTouchStart = function(e, o) {
            var n = void 0, i = void 0, r = void 0;
            t.touchX1 = t.rectX + t.scaleWidth / 2, t.touchY1 = t.rectY + t.scaleHeight / 2, 
            n = o.x - e.x, i = o.y - e.y, r = Math.sqrt(n * n + i * i), t.oldDistance = r;
        }, t.__twoTouchMove = function(e, o) {
            var n = void 0, i = void 0, r = void 0, c = t.scale, a = t.zoom;
            n = o.x - e.x, i = o.y - e.y, r = Math.sqrt(n * n + i * i), t.newScale = t.oldScale + .001 * a * (r - t.oldDistance), 
            t.newScale <= 1 && (t.newScale = 1), t.newScale >= c && (t.newScale = c), t.scaleWidth = t.newScale * t.baseWidth, 
            t.scaleHeight = t.newScale * t.baseHeight;
            var u = t.touchX1 - t.scaleWidth / 2, s = t.touchY1 - t.scaleHeight / 2;
            t.outsideBound(u, s), t.updateCanvas();
        }, t.__xtouchEnd = function() {
            t.oldScale = t.newScale, t.rectX = t.imgLeft, t.rectY = t.imgTop;
        });
    }, g;
});

View Code

 

5.app.js