dd-cropper.rar

Component({ mixins: [], data: { img_w: 0, img_h: 0, ratio: 0, img_l: 0, img_t: 0, oldX: 0, oldY: 0, hidden_image_src: "" }, props: { onCallBack:function(){}, image_url:"" }, didMount() { var system = dd.getSystemInfoSync(); var ratio = system.windowWidth / 750; this.setData({ system: system, ratio: ratio, shade_bt_bd: (system.windowHeight / ratio) - 700 }) }, didUpdate() { }, didUnmount() { }, methods: { draw_image() { var that = this, dt = that.data; const ctx = dd.createCanvasContext('cropper_ctx'); ctx.drawImage(that.props.image_url, dt.img_l, dt.img_t, dt.img_w, dt.img_h); ctx.draw(); this.setData({ hidden_image_src: that.props.image_url }) }, hidden_image_load(e) { var that = this, dt = that.data; const ctx = dd.createCanvasContext('cropper_ctx'); ctx.toTempFilePath({ x: 125 * dt.ratio, y: 200 * dt.ratio, width: 500 * dt.ratio, height: 500 * dt.ratio, destWidth:140, destHeight:140, success(res) { ctx.clearRect(dt.img_l, dt.img_t, dt.img_w, dt.img_h); ctx.draw(); that.setData({ hidden_image_src: "" }) that.props.onCallBack(res) }, }); }, image_onload(e) { var system = this.data.system, ratio = this.data.ratio; var dt = e.detail, h = dt.height, w = dt.width, t, l if (w > h) { w = 500 / h * w; h = 500; t = 200; l = 375 - (w / 2) } else { h = 500 / w * h; w = 500; t = 450 - (h / 2); l = 125; } this.setData({ img_w: w * ratio, img_h: h * ratio, img_l: l * ratio, img_t: t * ratio }) }, touchStart(e) { var touches = e.touches; if (touches.length == 1) { var x = touches[0].clientX, y = touches[0].clientY this.setData({ oldX: x, oldY: y }) } else if (touches.length == 2) { var x = touches[0].clientX - touches[1].clientX, y = touches[0].clientY - touches[1].clientY; this.setData({ od_dist: Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)) }) } }, touchMove(e) { var client = e.touches; if (client.length == 1) { var x = client[0].clientX, y = client[0].clientY, l = this.data.img_l, t = this.data.img_t, oldX = this.data.oldX, oldY = this.data.oldY; this.setData({ img_l: l + (x - oldX), img_t: t + (y - oldY), oldX: x, oldY: y }) } else if (client.length == 2) { var x = client[0].clientX - client[1].clientX, y = client[0].clientY - client[1].clientY; var l = this.data.img_l, t = this.data.img_t, w = this.data.img_w, h = this.data.img_h, od_dist = this.data.od_dist; var dist = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); var zoom_ratio = (dist - od_dist) / w * 2 var nh = h * (1 + zoom_ratio); var nw = w * (1 + zoom_ratio); l = l - ((nw - w) / 2); t = t - ((nh - h) / 2); this.setData({ img_w: nw, img_h: nh, img_l: l, img_t: t, od_dist: dist }) } }, touchEnd(e) { } }, });