AlloyTeam/AlloyCrop

Name: AlloyCrop

Owner: ?? AlloyTeam

Description: The best and tiny size mobile cropping component - ?????????????

Created: 2017-07-31 03:23:33.0

Updated: 2018-05-24 10:15:51.0

Pushed: 2018-05-21 13:48:34.0

Homepage: https://alloyteam.github.io/AlloyCrop/

Size: 293

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

?## AlloyCrop 1.0 ??

AlloyCrop ?????8?????????AlloyFinger ???????????BAT?????????????????????????????????:

• ????????????????
• pinch???????????????????????????

???????????AlloyCrop ??????????????????????????AlloyCrop????????AlloyFinger????????????????? ??Web???AlloyFinger??

?????API???

API

AlloyCrop({
image_src: "img src",
circle: true, // optional parameters , the default value is false
width: 200, // crop width
height: 100, // crop height
output: 2, // output resolution --> 400*200
ok: function (base64, canvas) { },
cancel: function () { },
ok_text: "yes", // optional parameters , the default value is ok
cancel_text: "no" // optional parameters , the default value is cancel

?? |???? | ?? —-|——|—- image_src | ?? | ???????src?? circle | ???????false | ???????????????????????:???????????????? width | ?? | ???? height | ?? | ???? output | ?? | ??????????output?2?????300?????100??????????? (2×300?2×100? ok | ?? | ??ok????? cancel | ?? | ??cancel????? ok_text | ???????ok | ok????? cancel_text | ???????cancel | cancel?????

???????????????? output ????????????????

output??

: function () {
this.calculateRect();
this.ctx.drawImage(this.img, this.crop_rect[0], this.crop_rect[1], this.crop_rect[2], this.crop_rect[3], 0, 0, this.canvas.width, this.canvas.height);

?? this.calculateRect() ???????????????????drawImage ?????????? canvas ???? canvas ?????????:

.canvas.width = option.width * this.output;
.canvas.height = option.height * this.output;

?????????????????????????????????????? drawImage ?????????????????????????????????,??????????????????????????????????? drawImage?

calculateRect??????

???????????????????canvas????drawImage????????0, 0, this.canvas.width, this.canvas.height???????????????????

??????????????????????????

????????????(scale)???????????????????????????????scale?????????1????????drawImage??????? https://github.com/AlloyTeam/AlloyCrop/blob/master/alloy-crop.js#L227-L255

pinch ????

??AlloyCrop??????????????????? pinch ???????????????????????multipointStart??

• multipointStart?AlloyFinger????????????????????evt.touches?????????????????
• ?? originX ? originY????????
• ??? translateX ? translateY?????originX?originY???????

 AlloyFinger(this.croppingBox, {
multipointStart: function (evt) {
    //reset origin x and y
    var centerX = (evt.touches[0].pageX + evt.touches[1].pageX) / 2;
    var centerY = (evt.touches[0].pageY + evt.touches[1].pageY) / 2;
    var cr = self.img.getBoundingClientRect();
    var img_centerX = cr.left + cr.width / 2;
    var img_centerY = cr.top + cr.height / 2;
    var offX = centerX - img_centerX;
    var offY = centerY - img_centerY;
    var preOriginX = self.img.originX
    var preOriginY = self.img.originY
    self.img.originX = offX / self.img.scaleX;
    self.img.originY = offY / self.img.scaleY;
    //reset translateX and translateY
    self.img.translateX += offX - preOriginX * self.img.scaleX;
    self.img.translateY += offY - preOriginY * self.img.scaleX;
    self.initScale = self.img.scaleX;
},
pinch: function (evt) {
    self.img.scaleX = self.img.scaleY = self.initScale * evt.zoom;
},
pressMove: function (evt) {
    self.img.translateX += evt.deltaX;
    self.img.translateY += evt.deltaY;
    evt.preventDefault();
}

• ???translateX, translateY, translateZ, scaleX, scaleY, scaleZ, rotateX, rotateY, rotateZ, skewX, skewY, originX, originY, originZ ?? css3transform ?? ???DOM???????

Preview

Install

You can install it via npm:

install alloycrop

Or get it from CDN:

https://unpkg.com/alloycrop@1.0.1/alloy-crop.js

Demo

Dependencies

• AlloyFinger
• css3transform

License

This content is released under the MIT License.