Maison > interface Web > Tutoriel Layui > Méthode pour implémenter la fonction de recadrage des images téléchargées basée sur layui+cropper.js

Méthode pour implémenter la fonction de recadrage des images téléchargées basée sur layui+cropper.js

Libérer: 2020-01-13 16:58:49
avant
4683 Les gens l'ont consulté

Méthode pour implémenter la fonction de recadrage des images téléchargées basée sur layui+cropper.js

前端的裁剪我知道的可以分为这么两种:flash一种,canvas一种。现在用的多的是canvas这种。

其实裁剪最本质的原理:通过工具获取到图片(不是JS那种获取DOM的方式,比如flash获取到图片,对图片任意操作,canvas也是一样,将图片放在画布上,任意操作)

本文使用的是canvas这种方式,借助的是cropper.js实现图片的裁剪。

由于前端页面使用的是layui这个框架,所有使用cropper时,最好的能够将cropper这个包作为一个layui的扩展嵌入到layui中,这样都省事,嵌入很简单,具体可以参考下面我封装好的代码

备注:cropper默认裁剪后的图片格式为png格式,如果需要自定义上传图片的格式,可以参考下面这段代码,如果不需要请直接忽略

cropper修改上传图片的格式:

1

2

3

4

5

6

7

8

9

10

var cas=imageEle.cropper('getCroppedCanvas');

var base64url=cas.toDataURL('image/jpeg');

console.log(base64url); //生成base64图片的格式

 

// 展示裁剪的图片的两种方式

// 方式一

$('.cavans').html(cas)  //在body显示出canvas元素

 

// 方式二

$('.canvans').attr("src", base64url);

Copier après la connexion

封装好的cropper源码如下,包括cropper-jQuery的

具体代码:

cropper-css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

/*!

 * Cropper.js v1.4.3

 * https://fengyuanchen.github.io/cropperjs

 *

 * Copyright 2015-present Chen Fengyuan

 * Released under the MIT license

 *

 * Date: 2018-10-24T13:07:11.429Z

 */

 

.cropper-container {

    direction: ltr;

    font-size: 0;

    line-height: 0;

    position: relative;

    -ms-touch-action: none;

    touch-action: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

 

.cropper-container img {

    display: block;

    height: 100%;

    image-orientation: 0deg;

    max-height: none !important;

    max-width: none !important;

    min-height: 0 !important;

    min-width: 0 !important;

    width: 100%;

}

 

.cropper-wrap-box,

.cropper-canvas,

.cropper-drag-box,

.cropper-crop-box,

.cropper-modal {

    bottom: 0;

    left: 0;

    position: absolute;

    right: 0;

    top: 0;

}

 

.cropper-wrap-box,

.cropper-canvas {

    overflow: hidden;

}

 

.cropper-drag-box {

    background-color: #fff;

    opacity: 0;

}

 

.cropper-modal {

    background-color: #000;

    opacity: .5;

}

 

.cropper-view-box {

    display: block;

    height: 100%;

    outline-color: rgba(51, 153, 255, 0.75);

    outline: 1px solid #39f;

    overflow: hidden;

    width: 100%;

}

 

.cropper-dashed {

    border: 0 dashed #eee;

    display: block;

    opacity: .5;

    position: absolute;

}

 

.cropper-dashed.dashed-h {

    border-bottom-width: 1px;

    border-top-width: 1px;

    height: calc(100% / 3);

    left: 0;

    top: calc(100% / 3);

    width: 100%;

}

 

.cropper-dashed.dashed-v {

    border-left-width: 1px;

    border-right-width: 1px;

    height: 100%;

    left: calc(100% / 3);

    top: 0;

    width: calc(100% / 3);

}

 

.cropper-center {

    display: block;

    height: 0;

    left: 50%;

    opacity: .75;

    position: absolute;

    top: 50%;

    width: 0;

}

 

.cropper-center:before,

.cropper-center:after {

    background-color: #eee;

    content: ' ';

    display: block;

    position: absolute;

}

 

.cropper-center:before {

    height: 1px;

    left: -3px;

    top: 0;

    width: 7px;

}

 

.cropper-center:after {

    height: 7px;

    left: 0;

    top: -3px;

    width: 1px;

}

 

.cropper-face,

.cropper-line,

.cropper-point {

    display: block;

    height: 100%;

    opacity: .1;

    position: absolute;

    width: 100%;

}

 

.cropper-face {

    background-color: #fff;

    left: 0;

    top: 0;

}

 

.cropper-line {

    background-color: #39f;

}

 

.cropper-line.line-e {

    cursor: ew-resize;

    right: -3px;

    top: 0;

    width: 5px;

}

 

.cropper-line.line-n {

    cursor: ns-resize;

    height: 5px;

    left: 0;

    top: -3px;

}

 

.cropper-line.line-w {

    cursor: ew-resize;

    left: -3px;

    top: 0;

    width: 5px;

}

 

.cropper-line.line-s {

    bottom: -3px;

    cursor: ns-resize;

    height: 5px;

    left: 0;

}

 

.cropper-point {

    background-color: #39f;

    height: 5px;

    opacity: .75;

    width: 5px;

}

 

.cropper-point.point-e {

    cursor: ew-resize;

    margin-top: -3px;

    right: -3px;

    top: 50%;

}

 

.cropper-point.point-n {

    cursor: ns-resize;

    left: 50%;

    margin-left: -3px;

    top: -3px;

}

 

.cropper-point.point-w {

    cursor: ew-resize;

    left: -3px;

    margin-top: -3px;

    top: 50%;

}

 

.cropper-point.point-s {

    bottom: -3px;

    cursor: s-resize;

    left: 50%;

    margin-left: -3px;

}

 

.cropper-point.point-ne {

    cursor: nesw-resize;

    right: -3px;

    top: -3px;

}

 

.cropper-point.point-nw {

    cursor: nwse-resize;

    left: -3px;

    top: -3px;

}

 

.cropper-point.point-sw {

    bottom: -3px;

    cursor: nesw-resize;

    left: -3px;

}

 

.cropper-point.point-se {

    bottom: -3px;

    cursor: nwse-resize;

    height: 20px;

    opacity: 1;

    right: -3px;

    width: 20px;

}

 

@media (min-width: 768px) {

    .cropper-point.point-se {

        height: 15px;

        width: 15px;

    }

}

 

@media (min-width: 992px) {

    .cropper-point.point-se {

        height: 10px;

        width: 10px;

    }

}

 

@media (min-width: 1200px) {

    .cropper-point.point-se {

        height: 5px;

        opacity: .75;

        width: 5px;

    }

}

 

.cropper-point.point-se:before {

    background-color: #39f;

    bottom: -50%;

    content: ' ';

    display: block;

    height: 200%;

    opacity: 0;

    position: absolute;

    right: -50%;

    width: 200%;

}

 

.cropper-invisible {

    opacity: 0;

}

 

.cropper-bg {

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');

}

 

.cropper-hide {

    display: block;

    height: 0;

    position: absolute;

    width: 0;

}

 

.cropper-hidden {

    display: none !important;

}

 

.cropper-move {

    cursor: move;

}

 

.cropper-crop {

    cursor: crosshair;

}

 

.cropper-disabled .cropper-drag-box,

.cropper-disabled .cropper-face,

.cropper-disabled .cropper-line,

.cropper-disabled .cropper-point {

    cursor: not-allowed;

}

 

cropper-css

Copier après la connexion

cropper-js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

712

713

714

715

716

717

718

719

720

721

722

723

724

725

726

727

728

729

730

731

732

733

734

735

736

737

738

739

740

741

742

743

744

745

746

747

748

749

750

751

752

753

754

755

756

757

758

759

760

761

762

763

764

765

766

767

768

769

770

771

772

773

774

775

776

777

778

779

780

781

782

783

784

785

786

787

788

789

790

791

792

793

794

795

796

797

798

799

800

801

802

803

804

805

806

807

808

809

810

811

812

813

814

815

816

817

818

819

820

821

822

823

824

825

826

827

828

829

830

831

832

833

834

835

836

837

838

839

840

841

842

843

844

845

846

847

848

849

850

851

852

853

854

855

856

857

858

859

860

861

862

863

864

865

866

867

868

869

870

871

872

873

874

875

876

877

878

879

880

881

882

883

884

885

886

887

888

889

890

891

892

893

894

895

896

897

898

899

900

901

902

903

904

905

906

907

908

909

910

911

912

913

914

915

916

917

918

919

920

921

922

923

924

925

926

927

928

929

930

931

932

933

934

935

936

937

938

939

940

941

942

943

944

945

946

947

948

949

950

951

952

953

954

955

956

957

958

959

960

961

962

963

964

965

966

967

968

969

970

971

972

973

974

975

976

977

978

979

980

981

982

983

984

985

986

987

988

989

990

991

992

993

994

995

996

997

998

999

1000

1001

1002

1003

1004

1005

1006

1007

1008

1009

1010

1011

1012

1013

1014

1015

1016

1017

1018

1019

1020

1021

1022

1023

1024

1025

1026

1027

1028

1029

1030

1031

1032

1033

1034

1035

1036

1037

1038

1039

1040

1041

1042

1043

1044

1045

1046

1047

1048

1049

1050

1051

1052

1053

1054

1055

1056

1057

1058

1059

1060

1061

1062

1063

1064

1065

1066

1067

1068

1069

1070

1071

1072

1073

1074

1075

1076

1077

1078

1079

1080

1081

1082

1083

1084

1085

1086

1087

1088

1089

1090

1091

1092

1093

1094

1095

1096

1097

1098

1099

1100

1101

1102

1103

1104

1105

1106

1107

1108

1109

1110

1111

1112

1113

1114

1115

1116

1117

1118

1119

1120

1121

1122

1123

1124

1125

1126

1127

1128

1129

1130

1131

1132

1133

1134

1135

1136

1137

1138

1139

1140

1141

1142

1143

1144

1145

1146

1147

1148

1149

1150

1151

1152

1153

1154

1155

1156

1157

1158

1159

1160

1161

1162

1163

1164

1165

1166

1167

1168

1169

1170

1171

1172

1173

1174

1175

1176

1177

1178

1179

1180

1181

1182

1183

1184

1185

1186

1187

1188

1189

1190

1191

1192

1193

1194

1195

1196

1197

1198

1199

1200

1201

1202

1203

1204

1205

1206

1207

1208

1209

1210

1211

1212

1213

1214

1215

1216

1217

1218

1219

1220

1221

1222

1223

1224

1225

1226

1227

1228

1229

1230

1231

1232

1233

1234

1235

1236

1237

1238

1239

1240

1241

1242

1243

1244

1245

1246

1247

1248

1249

1250

1251

1252

1253

1254

1255

1256

1257

1258

1259

1260

1261

1262

1263

1264

1265

1266

1267

1268

1269

1270

1271

1272

1273

1274

1275

1276

1277

1278

1279

1280

1281

1282

1283

1284

1285

1286

1287

1288

1289

1290

1291

1292

1293

1294

1295

1296

1297

1298

1299

1300

1301

1302

1303

1304

1305

1306

1307

1308

1309

1310

1311

1312

1313

1314

1315

1316

1317

1318

1319

1320

1321

1322

1323

1324

1325

1326

1327

1328

1329

1330

1331

1332

1333

1334

1335

1336

1337

1338

1339

1340

1341

1342

1343

1344

1345

1346

1347

1348

1349

1350

1351

1352

1353

1354

1355

1356

1357

1358

1359

1360

1361

1362

1363

1364

1365

1366

1367

1368

1369

1370

1371

1372

1373

1374

1375

1376

1377

1378

1379

1380

1381

1382

1383

1384

1385

1386

1387

1388

1389

1390

1391

1392

1393

1394

1395

1396

1397

1398

1399

1400

1401

1402

1403

1404

1405

1406

1407

1408

1409

1410

1411

1412

1413

1414

1415

1416

1417

1418

1419

1420

1421

1422

1423

1424

1425

1426

1427

1428

1429

1430

1431

1432

1433

1434

1435

1436

1437

1438

1439

1440

1441

1442

1443

1444

1445

1446

1447

1448

1449

1450

1451

1452

1453

1454

1455

1456

1457

1458

1459

1460

1461

1462

1463

1464

1465

1466

1467

1468

1469

1470

1471

1472

1473

1474

1475

1476

1477

1478

1479

1480

1481

1482

1483

1484

1485

1486

1487

1488

1489

1490

1491

1492

1493

1494

1495

1496

1497

1498

1499

1500

1501

1502

1503

1504

1505

1506

1507

1508

1509

1510

1511

1512

1513

1514

1515

1516

1517

1518

1519

1520

1521

1522

1523

1524

1525

1526

1527

1528

1529

1530

1531

1532

1533

1534

1535

1536

1537

1538

1539

1540

1541

1542

1543

1544

1545

1546

1547

1548

1549

1550

1551

1552

1553

1554

1555

1556

1557

1558

1559

1560

1561

1562

1563

1564

1565

1566

1567

1568

1569

1570

1571

1572

1573

1574

1575

1576

1577

1578

1579

1580

1581

1582

1583

1584

1585

1586

1587

1588

1589

1590

1591

1592

1593

1594

1595

1596

1597

1598

1599

1600

1601

1602

1603

1604

1605

1606

1607

1608

1609

1610

1611

1612

1613

1614

1615

1616

1617

1618

1619

1620

1621

1622

1623

1624

1625

1626

1627

1628

1629

1630

1631

1632

1633

1634

1635

1636

1637

1638

1639

1640

1641

1642

1643

1644

1645

1646

1647

1648

1649

1650

1651

1652

1653

1654

1655

1656

1657

1658

1659

1660

1661

1662

1663

1664

1665

1666

1667

1668

1669

1670

1671

1672

1673

1674

1675

1676

1677

1678

1679

1680

1681

1682

1683

1684

1685

1686

1687

1688

1689

1690

1691

1692

1693

1694

1695

1696

1697

1698

1699

1700

1701

1702

1703

1704

1705

1706

1707

1708

1709

1710

1711

1712

1713

1714

1715

1716

1717

1718

1719

1720

1721

1722

1723

1724

1725

1726

1727

1728

1729

1730

1731

1732

1733

1734

1735

1736

1737

1738

1739

1740

1741

1742

1743

1744

1745

1746

1747

1748

1749

1750

1751

1752

1753

1754

1755

1756

1757

1758

1759

1760

1761

1762

1763

1764

1765

1766

1767

1768

1769

1770

1771

1772

1773

1774

1775

1776

1777

1778

1779

1780

1781

1782

1783

1784

1785

1786

1787

1788

1789

1790

1791

1792

1793

1794

1795

1796

1797

1798

1799

1800

1801

1802

1803

1804

1805

1806

1807

1808

1809

1810

1811

1812

1813

1814

1815

1816

1817

1818

1819

1820

1821

1822

1823

1824

1825

1826

1827

1828

1829

1830

1831

1832

1833

1834

1835

1836

1837

1838

1839

1840

1841

1842

1843

1844

1845

1846

1847

1848

1849

1850

1851

1852

1853

1854

1855

1856

1857

1858

1859

1860

1861

1862

1863

1864

1865

1866

1867

1868

1869

1870

1871

1872

1873

1874

1875

1876

1877

1878

1879

1880

1881

1882

1883

1884

1885

1886

1887

1888

1889

1890

1891

1892

1893

1894

1895

1896

1897

1898

1899

1900

1901

1902

1903

1904

1905

1906

1907

1908

1909

1910

1911

1912

1913

1914

1915

1916

1917

1918

1919

1920

1921

1922

1923

1924

1925

1926

1927

1928

1929

1930

1931

1932

1933

1934

1935

1936

1937

1938

1939

1940

1941

1942

1943

1944

1945

1946

1947

1948

1949

1950

1951

1952

1953

1954

1955

1956

1957

1958

1959

1960

1961

1962

1963

1964

1965

1966

1967

1968

1969

1970

1971

1972

1973

1974

1975

1976

1977

1978

1979

1980

1981

1982

1983

1984

1985

1986

1987

1988

1989

1990

1991

1992

1993

1994

1995

1996

1997

1998

1999

2000

2001

2002

2003

2004

2005

2006

2007

2008

2009

2010

2011

2012

2013

2014

2015

2016

2017

2018

2019

2020

2021

2022

2023

2024

2025

2026

2027

2028

2029

2030

2031

2032

2033

2034

2035

2036

2037

2038

2039

2040

2041

2042

2043

2044

2045

2046

2047

2048

2049

2050

2051

2052

2053

2054

2055

2056

2057

2058

2059

2060

2061

2062

2063

2064

2065

2066

2067

2068

2069

2070

2071

2072

2073

2074

2075

2076

2077

2078

2079

2080

2081

2082

2083

2084

2085

2086

2087

2088

2089

2090

2091

2092

2093

2094

2095

2096

2097

2098

2099

2100

2101

2102

2103

2104

2105

2106

2107

2108

2109

2110

2111

2112

2113

2114

2115

2116

2117

2118

2119

2120

2121

2122

2123

2124

2125

2126

2127

2128

2129

2130

2131

2132

2133

2134

2135

2136

2137

2138

2139

2140

2141

2142

2143

2144

2145

2146

2147

2148

2149

2150

2151

2152

2153

2154

2155

2156

2157

2158

2159

2160

2161

2162

2163

2164

2165

2166

2167

2168

2169

2170

2171

2172

2173

2174

2175

2176

2177

2178

2179

2180

2181

2182

2183

2184

2185

2186

2187

2188

2189

2190

2191

2192

2193

2194

2195

2196

2197

2198

2199

2200

2201

2202

2203

2204

2205

2206

2207

2208

2209

2210

2211

2212

2213

2214

2215

2216

2217

2218

2219

2220

2221

2222

2223

2224

2225

2226

2227

2228

2229

2230

2231

2232

2233

2234

2235

2236

2237

2238

2239

2240

2241

2242

2243

2244

2245

2246

2247

2248

2249

2250

2251

2252

2253

2254

2255

2256

2257

2258

2259

2260

2261

2262

2263

2264

2265

2266

2267

2268

2269

2270

2271

2272

2273

2274

2275

2276

2277

2278

2279

2280

2281

2282

2283

2284

2285

2286

2287

2288

2289

2290

2291

2292

2293

2294

2295

2296

2297

2298

2299

2300

2301

2302

2303

2304

2305

2306

2307

2308

2309

2310

2311

2312

2313

2314

2315

2316

2317

2318

2319

2320

2321

2322

2323

2324

2325

2326

2327

2328

2329

2330

2331

2332

2333

2334

2335

2336

2337

2338

2339

2340

2341

2342

2343

2344

2345

2346

2347

2348

2349

2350

2351

2352

2353

2354

2355

2356

2357

2358

2359

2360

2361

2362

2363

2364

2365

2366

2367

2368

2369

2370

2371

2372

2373

2374

2375

2376

2377

2378

2379

2380

2381

2382

2383

2384

2385

2386

2387

2388

2389

2390

2391

2392

2393

2394

2395

2396

2397

2398

2399

2400

2401

2402

2403

2404

2405

2406

2407

2408

2409

2410

2411

2412

2413

2414

2415

2416

2417

2418

2419

2420

2421

2422

2423

2424

2425

2426

2427

2428

2429

2430

2431

2432

2433

2434

2435

2436

2437

2438

2439

2440

2441

2442

2443

2444

2445

2446

2447

2448

2449

2450

2451

2452

2453

2454

2455

2456

2457

2458

2459

2460

2461

2462

2463

2464

2465

2466

2467

2468

2469

2470

2471

2472

2473

2474

2475

2476

2477

2478

2479

2480

2481

2482

2483

2484

2485

2486

2487

2488

2489

2490

2491

2492

2493

2494

2495

2496

2497

2498

2499

2500

2501

2502

2503

2504

2505

2506

2507

2508

2509

2510

2511

2512

2513

2514

2515

2516

2517

2518

2519

2520

2521

2522

2523

2524

2525

2526

2527

2528

2529

2530

2531

2532

2533

2534

2535

2536

2537

2538

2539

2540

2541

2542

2543

2544

2545

2546

2547

2548

2549

2550

2551

2552

2553

2554

2555

2556

2557

2558

2559

2560

2561

2562

2563

2564

2565

2566

2567

2568

2569

2570

2571

2572

2573

2574

2575

2576

2577

2578

2579

2580

2581

2582

2583

2584

2585

2586

2587

2588

2589

2590

2591

2592

2593

2594

2595

2596

2597

2598

2599

2600

2601

2602

2603

2604

2605

2606

2607

2608

2609

2610

2611

2612

2613

2614

2615

2616

2617

2618

2619

2620

2621

2622

2623

2624

2625

2626

2627

2628

2629

2630

2631

2632

2633

2634

2635

2636

2637

2638

2639

2640

2641

2642

2643

2644

2645

2646

2647

2648

2649

2650

2651

2652

2653

2654

2655

2656

2657

2658

2659

2660

2661

2662

2663

2664

2665

2666

2667

2668

2669

2670

2671

2672

2673

2674

2675

2676

2677

2678

2679

2680

2681

2682

2683

2684

2685

2686

2687

2688

2689

2690

2691

2692

2693

2694

2695

2696

2697

2698

2699

2700

2701

2702

2703

2704

2705

2706

2707

2708

2709

2710

2711

2712

2713

2714

2715

2716

2717

2718

2719

2720

2721

2722

2723

2724

2725

2726

2727

2728

2729

2730

2731

2732

2733

2734

2735

2736

2737

2738

2739

2740

2741

2742

2743

2744

2745

2746

2747

2748

2749

2750

2751

2752

2753

2754

2755

2756

2757

2758

2759

2760

2761

2762

2763

2764

2765

2766

2767

2768

2769

2770

2771

2772

2773

2774

2775

2776

2777

2778

2779

2780

2781

2782

2783

2784

2785

2786

2787

2788

2789

2790

2791

2792

2793

2794

2795

2796

2797

2798

2799

2800

2801

2802

2803

2804

2805

2806

2807

2808

2809

2810

2811

2812

2813

2814

2815

2816

2817

2818

2819

2820

2821

2822

2823

2824

2825

2826

2827

2828

2829

2830

2831

2832

2833

2834

2835

2836

2837

2838

2839

2840

2841

2842

2843

2844

2845

2846

2847

2848

2849

2850

2851

2852

2853

2854

2855

2856

2857

2858

2859

2860

2861

2862

2863

2864

2865

2866

2867

2868

2869

2870

2871

2872

2873

2874

2875

2876

2877

2878

2879

2880

2881

2882

2883

2884

2885

2886

2887

2888

2889

2890

2891

2892

2893

2894

2895

2896

2897

2898

2899

2900

2901

2902

2903

2904

2905

2906

2907

2908

2909

2910

2911

2912

2913

2914

2915

2916

2917

2918

2919

2920

2921

2922

2923

2924

2925

2926

2927

2928

2929

2930

2931

2932

2933

2934

2935

2936

2937

2938

2939

2940

2941

2942

2943

2944

2945

2946

2947

2948

2949

2950

2951

2952

2953

2954

2955

2956

2957

2958

2959

2960

2961

2962

2963

2964

2965

2966

2967

2968

2969

2970

2971

2972

2973

2974

2975

2976

2977

2978

2979

2980

2981

2982

2983

2984

2985

2986

2987

2988

2989

2990

2991

2992

2993

2994

2995

2996

2997

2998

2999

3000

3001

3002

3003

3004

3005

3006

3007

3008

3009

3010

3011

3012

3013

3014

3015

3016

3017

3018

3019

3020

3021

3022

3023

3024

3025

3026

3027

3028

3029

3030

3031

3032

3033

3034

3035

3036

3037

3038

3039

3040

3041

3042

3043

3044

3045

3046

3047

3048

3049

3050

3051

3052

3053

3054

3055

3056

3057

3058

3059

3060

3061

3062

3063

3064

3065

3066

3067

3068

3069

3070

3071

3072

3073

3074

3075

3076

3077

3078

3079

3080

3081

3082

3083

3084

3085

3086

3087

3088

3089

3090

3091

3092

3093

3094

3095

3096

3097

3098

3099

3100

3101

3102

3103

3104

3105

3106

3107

3108

3109

3110

3111

3112

3113

3114

3115

3116

3117

3118

3119

3120

3121

3122

3123

3124

3125

3126

3127

3128

3129

3130

3131

3132

3133

3134

3135

3136

3137

3138

3139

3140

3141

3142

3143

3144

3145

3146

3147

3148

3149

3150

3151

3152

3153

3154

3155

3156

3157

3158

3159

3160

3161

3162

3163

3164

3165

3166

3167

3168

3169

3170

3171

3172

3173

3174

3175

3176

3177

3178

3179

3180

3181

3182

3183

3184

3185

3186

3187

3188

3189

3190

3191

3192

3193

3194

3195

3196

3197

3198

3199

3200

3201

3202

3203

3204

3205

3206

3207

3208

3209

3210

3211

3212

3213

3214

3215

3216

3217

3218

3219

3220

3221

3222

3223

3224

3225

3226

3227

3228

3229

3230

3231

3232

3233

3234

3235

3236

3237

3238

3239

3240

3241

3242

3243

3244

3245

3246

3247

3248

3249

3250

3251

3252

3253

3254

3255

3256

3257

3258

3259

3260

3261

3262

3263

3264

3265

3266

3267

3268

3269

3270

3271

3272

3273

3274

3275

3276

3277

3278

3279

3280

3281

3282

3283

3284

3285

3286

3287

3288

3289

3290

3291

3292

3293

3294

3295

3296

3297

3298

3299

3300

3301

3302

3303

3304

3305

3306

3307

3308

3309

3310

3311

3312

3313

3314

3315

3316

3317

3318

3319

3320

3321

3322

3323

3324

3325

3326

3327

3328

3329

3330

3331

3332

3333

3334

3335

3336

3337

3338

3339

3340

3341

3342

3343

3344

3345

3346

3347

3348

3349

3350

3351

3352

3353

3354

3355

3356

3357

3358

3359

3360

3361

3362

3363

3364

3365

3366

3367

3368

3369

3370

3371

3372

3373

3374

3375

3376

3377

3378

3379

3380

3381

3382

3383

3384

3385

3386

3387

3388

3389

3390

3391

3392

3393

3394

3395

3396

3397

3398

3399

3400

3401

3402

3403

3404

3405

3406

3407

3408

3409

3410

3411

3412

3413

3414

3415

3416

3417

3418

3419

3420

3421

3422

3423

3424

3425

3426

3427

3428

3429

3430

3431

3432

3433

3434

3435

3436

3437

3438

3439

3440

3441

3442

3443

3444

3445

3446

3447

3448

3449

3450

3451

3452

3453

3454

3455

3456

3457

3458

3459

3460

3461

3462

3463

3464

3465

3466

3467

3468

3469

3470

3471

3472

3473

3474

3475

3476

3477

3478

3479

3480

3481

3482

3483

3484

3485

3486

3487

3488

3489

3490

3491

3492

3493

3494

3495

3496

3497

3498

3499

3500

3501

3502

3503

3504

3505

3506

3507

3508

3509

3510

3511

3512

3513

3514

3515

3516

3517

3518

3519

3520

3521

3522

3523

3524

3525

3526

3527

3528

3529

3530

3531

3532

3533

3534

3535

3536

3537

3538

3539

3540

3541

3542

3543

3544

3545

3546

3547

3548

3549

3550

3551

3552

3553

3554

3555

3556

3557

3558

3559

3560

3561

3562

3563

3564

3565

3566

3567

3568

3569

3570

3571

/*!

 * Cropper.js v1.4.3

 * https://fengyuanchen.github.io/cropperjs

 *

 * Copyright 2015-present Chen Fengyuan

 * Released under the MIT license

 *

 * Date: 2018-10-24T13:07:15.032Z

 */

 

(function (global, factory) {

    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :

        typeof define === 'function' && define.amd ? define(factory) :

            global.layui && layui.define ? layui.define(function (exports) {

                    exports('cropper', factory())

                }) :

                (global.Cropper = factory());

}(this, (function () {

    'use strict';

 

    function _typeof(obj) {

        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {

            _typeof = function (obj) {

                return typeof obj;

            };

        } else {

            _typeof = function (obj) {

                return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;

            };

        }

 

        return _typeof(obj);

    }

 

    function _classCallCheck(instance, Constructor) {

        if (!(instance instanceof Constructor)) {

            throw new TypeError("Cannot call a class as a function");

        }

    }

 

    function _defineProperties(target, props) {

        for (var i = 0; i < props.length; i++) {

            var descriptor = props[i];

            descriptor.enumerable = descriptor.enumerable || false;

            descriptor.configurable = true;

            if ("value" in descriptor) descriptor.writable = true;

            Object.defineProperty(target, descriptor.key, descriptor);

        }

    }

 

    function _createClass(Constructor, protoProps, staticProps) {

        if (protoProps) _defineProperties(Constructor.prototype, protoProps);

        if (staticProps) _defineProperties(Constructor, staticProps);

        return Constructor;

    }

 

    function _toConsumableArray(arr) {

        return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();

    }

 

    function _arrayWithoutHoles(arr) {

        if (Array.isArray(arr)) {

            for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

 

            return arr2;

        }

    }

 

    function _iterableToArray(iter) {

        if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);

    }

 

    function _nonIterableSpread() {

        throw new TypeError("Invalid attempt to spread non-iterable instance");

    }

 

    var IN_BROWSER = typeof window !== &#39;undefined&#39;;

    var WINDOW = IN_BROWSER ? window : {};

    var NAMESPACE = &#39;cropper&#39;; // Actions

 

    var ACTION_ALL = &#39;all&#39;;

    var ACTION_CROP = &#39;crop&#39;;

    var ACTION_MOVE = &#39;move&#39;;

    var ACTION_ZOOM = &#39;zoom&#39;;

    var ACTION_EAST = &#39;e&#39;;

    var ACTION_WEST = &#39;w&#39;;

    var ACTION_SOUTH = &#39;s&#39;;

    var ACTION_NORTH = &#39;n&#39;;

    var ACTION_NORTH_EAST = &#39;ne&#39;;

    var ACTION_NORTH_WEST = &#39;nw&#39;;

    var ACTION_SOUTH_EAST = &#39;se&#39;;

    var ACTION_SOUTH_WEST = &#39;sw&#39;; // Classes

 

    var CLASS_CROP = "".concat(NAMESPACE, "-crop");

    var CLASS_DISABLED = "".concat(NAMESPACE, "-disabled");

    var CLASS_HIDDEN = "".concat(NAMESPACE, "-hidden");

    var CLASS_HIDE = "".concat(NAMESPACE, "-hide");

    var CLASS_INVISIBLE = "".concat(NAMESPACE, "-invisible");

    var CLASS_MODAL = "".concat(NAMESPACE, "-modal");

    var CLASS_MOVE = "".concat(NAMESPACE, "-move"); // Data keys

 

    var DATA_ACTION = "".concat(NAMESPACE, "Action");

    var DATA_PREVIEW = "".concat(NAMESPACE, "Preview"); // Drag modes

 

    var DRAG_MODE_CROP = &#39;crop&#39;;

    var DRAG_MODE_MOVE = &#39;move&#39;;

    var DRAG_MODE_NONE = &#39;none&#39;; // Events

 

    var EVENT_CROP = &#39;crop&#39;;

    var EVENT_CROP_END = &#39;cropend&#39;;

    var EVENT_CROP_MOVE = &#39;cropmove&#39;;

    var EVENT_CROP_START = &#39;cropstart&#39;;

    var EVENT_DBLCLICK = &#39;dblclick&#39;;

    var EVENT_POINTER_DOWN = WINDOW.PointerEvent ? &#39;pointerdown&#39; : &#39;touchstart mousedown&#39;;

    var EVENT_POINTER_MOVE = WINDOW.PointerEvent ? &#39;pointermove&#39; : &#39;touchmove mousemove&#39;;

    var EVENT_POINTER_UP = WINDOW.PointerEvent ? &#39;pointerup pointercancel&#39; : &#39;touchend touchcancel mouseup&#39;;

    var EVENT_READY = &#39;ready&#39;;

    var EVENT_RESIZE = &#39;resize&#39;;

    var EVENT_WHEEL = &#39;wheel mousewheel DOMMouseScroll&#39;;

    var EVENT_ZOOM = &#39;zoom&#39;; // Mime types

 

    var MIME_TYPE_JPEG = &#39;image/jpeg&#39;; // RegExps

 

    var REGEXP_ACTIONS = /^(?:e|w|s|n|se|sw|ne|nw|all|crop|move|zoom)$/;

    var REGEXP_DATA_URL = /^data:/;

    var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/;

    var REGEXP_TAG_NAME = /^(?:img|canvas)$/i;

 

    var DEFAULTS = {

        // Define the view mode of the cropper

        viewMode: 0,

        // 0, 1, 2, 3

        // Define the dragging mode of the cropper

        dragMode: DRAG_MODE_CROP,

        // &#39;crop&#39;, &#39;move&#39; or &#39;none&#39;

        // Define the initial aspect ratio of the crop box

        initialAspectRatio: NaN,

        // Define the aspect ratio of the crop box

        aspectRatio: NaN,

        // An object with the previous cropping result data

        data: null,

        // A selector for adding extra containers to preview

        preview: &#39;&#39;,

        // Re-render the cropper when resize the window

        responsive: true,

        // Restore the cropped area after resize the window

        restore: true,

        // Check if the current image is a cross-origin image

        checkCrossOrigin: false,

        // Check the current image&#39;s Exif Orientation information

        checkOrientation: true,

        // Show the black modal

        modal: true,

        // Show the dashed lines for guiding

        guides: true,

        // Show the center indicator for guiding

        center: true,

        // Show the white modal to highlight the crop box

        highlight: true,

        // Show the grid background

        background: true,

        // Enable to crop the image automatically when initialize

        autoCrop: true,

        // Define the percentage of automatic cropping area when initializes

        autoCropArea: 0.8,

        // Enable to move the image

        movable: true,

        // Enable to rotate the image

        rotatable: true,

        // Enable to scale the image

        scalable: true,

        // Enable to zoom the image

        zoomable: true,

        // Enable to zoom the image by dragging touch

        zoomOnTouch: true,

        // Enable to zoom the image by wheeling mouse

        zoomOnWheel: true,

        // Define zoom ratio when zoom the image by wheeling mouse

        wheelZoomRatio: 0.1,

        // Enable to move the crop box

        cropBoxMovable: true,

        // Enable to resize the crop box

        cropBoxResizable: true,

        // Toggle drag mode between "crop" and "move" when click twice on the cropper

        toggleDragModeOnDblclick: true,

        // Size limitation

        minCanvasWidth: 0,

        minCanvasHeight: 0,

        minCropBoxWidth: 0,

        minCropBoxHeight: 0,

        minContainerWidth: 200,

        minContainerHeight: 100,

        // Shortcuts of events

        ready: null,

        cropstart: null,

        cropmove: null,

        cropend: null,

        crop: null,

        zoom: null

    };

 

    var TEMPLATE = &#39;<div class="cropper-container" touch-action="none">&#39; + &#39;<div class="cropper-wrap-box">&#39; + &#39;<div class="cropper-canvas"></div>&#39; + &#39;</div>&#39; + &#39;<div class="cropper-drag-box"></div>&#39; + &#39;<div class="cropper-crop-box">&#39; + &#39;<span class="cropper-view-box"></span>&#39; + &#39;<span class="cropper-dashed dashed-h"></span>&#39; + &#39;<span class="cropper-dashed dashed-v"></span>&#39; + &#39;<span class="cropper-center"></span>&#39; + &#39;<span class="cropper-face"></span>&#39; + &#39;<span class="cropper-line line-e" data-cropper-action="e"></span>&#39; + &#39;<span class="cropper-line line-n" data-cropper-action="n"></span>&#39; + &#39;<span class="cropper-line line-w" data-cropper-action="w"></span>&#39; + &#39;<span class="cropper-line line-s" data-cropper-action="s"></span>&#39; + &#39;<span class="cropper-point point-e" data-cropper-action="e"></span>&#39; + &#39;<span class="cropper-point point-n" data-cropper-action="n"></span>&#39; + &#39;<span class="cropper-point point-w" data-cropper-action="w"></span>&#39; + &#39;<span class="cropper-point point-s" data-cropper-action="s"></span>&#39; + &#39;<span class="cropper-point point-ne" data-cropper-action="ne"></span>&#39; + &#39;<span class="cropper-point point-nw" data-cropper-action="nw"></span>&#39; + &#39;<span class="cropper-point point-sw" data-cropper-action="sw"></span>&#39; + &#39;<span class="cropper-point point-se" data-cropper-action="se"></span>&#39; + &#39;</div>&#39; + &#39;</div>&#39;;

 

    /**

     * Check if the given value is not a number.

     */

 

    var isNaN = Number.isNaN || WINDOW.isNaN;

 

    /**

     * Check if the given value is a number.

     * @param {*} value - The value to check.

     * @returns {boolean} Returns `true` if the given value is a number, else `false`.

     */

 

    function isNumber(value) {

        return typeof value === &#39;number&#39; && !isNaN(value);

    }

 

    /**

     * Check if the given value is undefined.

     * @param {*} value - The value to check.

     * @returns {boolean} Returns `true` if the given value is undefined, else `false`.

     */

 

    function isUndefined(value) {

        return typeof value === &#39;undefined&#39;;

    }

 

    /**

     * Check if the given value is an object.

     * @param {*} value - The value to check.

     * @returns {boolean} Returns `true` if the given value is an object, else `false`.

     */

 

    function isObject(value) {

        return _typeof(value) === &#39;object&#39; && value !== null;

    }

 

    var hasOwnProperty = Object.prototype.hasOwnProperty;

 

    /**

     * Check if the given value is a plain object.

     * @param {*} value - The value to check.

     * @returns {boolean} Returns `true` if the given value is a plain object, else `false`.

     */

 

    function isPlainObject(value) {

        if (!isObject(value)) {

            return false;

        }

 

        try {

            var _constructor = value.constructor;

            var prototype = _constructor.prototype;

            return _constructor && prototype && hasOwnProperty.call(prototype, &#39;isPrototypeOf&#39;);

        } catch (e) {

            return false;

        }

    }

 

    /**

     * Check if the given value is a function.

     * @param {*} value - The value to check.

     * @returns {boolean} Returns `true` if the given value is a function, else `false`.

     */

 

    function isFunction(value) {

        return typeof value === &#39;function&#39;;

    }

 

    /**

     * Iterate the given data.

     * @param {*} data - The data to iterate.

     * @param {Function} callback - The process function for each element.

     * @returns {*} The original data.

     */

 

    function forEach(data, callback) {

        if (data && isFunction(callback)) {

            if (Array.isArray(data) || isNumber(data.length)

            /* array-like */

            ) {

                var length = data.length;

                var i;

 

                for (i = 0; i < length; i += 1) {

                    if (callback.call(data, data[i], i, data) === false) {

                        break;

                    }

                }

            } else if (isObject(data)) {

                Object.keys(data).forEach(function (key) {

                    callback.call(data, data[key], key, data);

                });

            }

        }

 

        return data;

    }

 

    /**

     * Extend the given object.

     * @param {*} obj - The object to be extended.

     * @param {*} args - The rest objects which will be merged to the first object.

     * @returns {Object} The extended object.

     */

 

    var assign = Object.assign || function assign(obj) {

        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

            args[_key - 1] = arguments[_key];

        }

 

        if (isObject(obj) && args.length > 0) {

            args.forEach(function (arg) {

                if (isObject(arg)) {

                    Object.keys(arg).forEach(function (key) {

                        obj[key] = arg[key];

                    });

                }

            });

        }

 

        return obj;

    };

    var REGEXP_DECIMALS = /\.\d*(?:0|9){12}\d*$/;

 

    /**

     * Normalize decimal number.

     * Check out {@link http://0.30000000000000004.com/}

     * @param {number} value - The value to normalize.

     * @param {number} [times=100000000000] - The times for normalizing.

     * @returns {number} Returns the normalized number.

     */

 

    function normalizeDecimalNumber(value) {

        var times = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100000000000;

        return REGEXP_DECIMALS.test(value) ? Math.round(value * times) / times : value;

    }

 

    var REGEXP_SUFFIX = /^(?:width|height|left|top|marginLeft|marginTop)$/;

 

    /**

     * Apply styles to the given element.

     * @param {Element} element - The target element.

     * @param {Object} styles - The styles for applying.

     */

 

    function setStyle(element, styles) {

        var style = element.style;

        forEach(styles, function (value, property) {

            if (REGEXP_SUFFIX.test(property) && isNumber(value)) {

                value += &#39;px&#39;;

            }

 

            style[property] = value;

        });

    }

 

    /**

     * Check if the given element has a special class.

     * @param {Element} element - The element to check.

     * @param {string} value - The class to search.

     * @returns {boolean} Returns `true` if the special class was found.

     */

 

    function hasClass(element, value) {

        return element.classList ? element.classList.contains(value) : element.className.indexOf(value) > -1;

    }

 

    /**

     * Add classes to the given element.

     * @param {Element} element - The target element.

     * @param {string} value - The classes to be added.

     */

 

    function addClass(element, value) {

        if (!value) {

            return;

        }

 

        if (isNumber(element.length)) {

            forEach(element, function (elem) {

                addClass(elem, value);

            });

            return;

        }

 

        if (element.classList) {

            element.classList.add(value);

            return;

        }

 

        var className = element.className.trim();

 

        if (!className) {

            element.className = value;

        } else if (className.indexOf(value) < 0) {

            element.className = "".concat(className, " ").concat(value);

        }

    }

 

    /**

     * Remove classes from the given element.

     * @param {Element} element - The target element.

     * @param {string} value - The classes to be removed.

     */

 

    function removeClass(element, value) {

        if (!value) {

            return;

        }

 

        if (isNumber(element.length)) {

            forEach(element, function (elem) {

                removeClass(elem, value);

            });

            return;

        }

 

        if (element.classList) {

            element.classList.remove(value);

            return;

        }

 

        if (element.className.indexOf(value) >= 0) {

            element.className = element.className.replace(value, &#39;&#39;);

        }

    }

 

    /**

     * Add or remove classes from the given element.

     * @param {Element} element - The target element.

     * @param {string} value - The classes to be toggled.

     * @param {boolean} added - Add only.

     */

 

    function toggleClass(element, value, added) {

        if (!value) {

            return;

        }

 

        if (isNumber(element.length)) {

            forEach(element, function (elem) {

                toggleClass(elem, value, added);

            });

            return;

        } // IE10-11 doesn&#39;t support the second parameter of `classList.toggle`

 

 

        if (added) {

            addClass(element, value);

        } else {

            removeClass(element, value);

        }

    }

 

    var REGEXP_HYPHENATE = /([a-z\d])([A-Z])/g;

 

    /**

     * Transform the given string from camelCase to kebab-case

     * @param {string} value - The value to transform.

     * @returns {string} The transformed value.

     */

 

    function hyphenate(value) {

        return value.replace(REGEXP_HYPHENATE, &#39;$1-$2&#39;).toLowerCase();

    }

 

    /**

     * Get data from the given element.

     * @param {Element} element - The target element.

     * @param {string} name - The data key to get.

     * @returns {string} The data value.

     */

 

    function getData(element, name) {

        if (isObject(element[name])) {

            return element[name];

        }

 

        if (element.dataset) {

            return element.dataset[name];

        }

 

        return element.getAttribute("data-".concat(hyphenate(name)));

    }

 

    /**

     * Set data to the given element.

     * @param {Element} element - The target element.

     * @param {string} name - The data key to set.

     * @param {string} data - The data value.

     */

 

    function setData(element, name, data) {

        if (isObject(data)) {

            element[name] = data;

        } else if (element.dataset) {

            element.dataset[name] = data;

        } else {

            element.setAttribute("data-".concat(hyphenate(name)), data);

        }

    }

 

    /**

     * Remove data from the given element.

     * @param {Element} element - The target element.

     * @param {string} name - The data key to remove.

     */

 

    function removeData(element, name) {

        if (isObject(element[name])) {

            try {

                delete element[name];

            } catch (e) {

                element[name] = undefined;

            }

        } else if (element.dataset) {

            // #128 Safari not allows to delete dataset property

            try {

                delete element.dataset[name];

            } catch (e) {

                element.dataset[name] = undefined;

            }

        } else {

            element.removeAttribute("data-".concat(hyphenate(name)));

        }

    }

 

    var REGEXP_SPACES = /\s\s*/;

 

    var onceSupported = function () {

        var supported = false;

 

        if (IN_BROWSER) {

            var once = false;

 

            var listener = function listener() {

            };

 

            var options = Object.defineProperty({}, &#39;once&#39;, {

                get: function get() {

                    supported = true;

                    return once;

                },

 

                /**

                 * This setter can fix a `TypeError` in strict mode

                 * {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Getter_only}

                 * @param {boolean} value - The value to set

                 */

                set: function set(value) {

                    once = value;

                }

            });

            WINDOW.addEventListener(&#39;test&#39;, listener, options);

            WINDOW.removeEventListener(&#39;test&#39;, listener, options);

        }

 

        return supported;

    }();

 

    /**

     * Remove event listener from the target element.

     * @param {Element} element - The event target.

     * @param {string} type - The event type(s).

     * @param {Function} listener - The event listener.

     * @param {Object} options - The event options.

     */

 

 

    function removeListener(element, type, listener) {

        var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};

        var handler = listener;

        type.trim().split(REGEXP_SPACES).forEach(function (event) {

            if (!onceSupported) {

                var listeners = element.listeners;

 

                if (listeners && listeners[event] && listeners[event][listener]) {

                    handler = listeners[event][listener];

                    delete listeners[event][listener];

 

                    if (Object.keys(listeners[event]).length === 0) {

                        delete listeners[event];

                    }

 

                    if (Object.keys(listeners).length === 0) {

                        delete element.listeners;

                    }

                }

            }

 

            element.removeEventListener(event, handler, options);

        });

    }

 

    /**

     * Add event listener to the target element.

     * @param {Element} element - The event target.

     * @param {string} type - The event type(s).

     * @param {Function} listener - The event listener.

     * @param {Object} options - The event options.

     */

 

    function addListener(element, type, listener) {

        var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};

        var _handler = listener;

        type.trim().split(REGEXP_SPACES).forEach(function (event) {

            if (options.once && !onceSupported) {

                var _element$listeners = element.listeners,

                    listeners = _element$listeners === void 0 ? {} : _element$listeners;

 

                _handler = function handler() {

                    delete listeners[event][listener];

                    element.removeEventListener(event, _handler, options);

 

                    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {

                        args[_key2] = arguments[_key2];

                    }

 

                    listener.apply(element, args);

                };

 

                if (!listeners[event]) {

                    listeners[event] = {};

                }

 

                if (listeners[event][listener]) {

                    element.removeEventListener(event, listeners[event][listener], options);

                }

 

                listeners[event][listener] = _handler;

                element.listeners = listeners;

            }

 

            element.addEventListener(event, _handler, options);

        });

    }

 

    /**

     * Dispatch event on the target element.

     * @param {Element} element - The event target.

     * @param {string} type - The event type(s).

     * @param {Object} data - The additional event data.

     * @returns {boolean} Indicate if the event is default prevented or not.

     */

 

    function dispatchEvent(element, type, data) {

        var event; // Event and CustomEvent on IE9-11 are global objects, not constructors

 

        if (isFunction(Event) && isFunction(CustomEvent)) {

            event = new CustomEvent(type, {

                detail: data,

                bubbles: true,

                cancelable: true

            });

        } else {

            event = document.createEvent(&#39;CustomEvent&#39;);

            event.initCustomEvent(type, true, true, data);

        }

 

        return element.dispatchEvent(event);

    }

 

    /**

     * Get the offset base on the document.

     * @param {Element} element - The target element.

     * @returns {Object} The offset data.

     */

 

    function getOffset(element) {

        var box = element.getBoundingClientRect();

        return {

            left: box.left + (window.pageXOffset - document.documentElement.clientLeft),

            top: box.top + (window.pageYOffset - document.documentElement.clientTop)

        };

    }

 

    var location = WINDOW.location;

    var REGEXP_ORIGINS = /^(https?:)\/\/([^:/?#]+):?(\d*)/i;

 

    /**

     * Check if the given URL is a cross origin URL.

     * @param {string} url - The target URL.

     * @returns {boolean} Returns `true` if the given URL is a cross origin URL, else `false`.

     */

 

    function isCrossOriginURL(url) {

        var parts = url.match(REGEXP_ORIGINS);

        return parts && (parts[1] !== location.protocol || parts[2] !== location.hostname || parts[3] !== location.port);

    }

 

    /**

     * Add timestamp to the given URL.

     * @param {string} url - The target URL.

     * @returns {string} The result URL.

     */

 

    function addTimestamp(url) {

        var timestamp = "timestamp=".concat(new Date().getTime());

        return url + (url.indexOf(&#39;?&#39;) === -1 ? &#39;?&#39; : &#39;&&#39;) + timestamp;

    }

 

    /**

     * Get transforms base on the given object.

     * @param {Object} obj - The target object.

     * @returns {string} A string contains transform values.

     */

 

    function getTransforms(_ref) {

        var rotate = _ref.rotate,

            scaleX = _ref.scaleX,

            scaleY = _ref.scaleY,

            translateX = _ref.translateX,

            translateY = _ref.translateY;

        var values = [];

 

        if (isNumber(translateX) && translateX !== 0) {

            values.push("translateX(".concat(translateX, "px)"));

        }

 

        if (isNumber(translateY) && translateY !== 0) {

            values.push("translateY(".concat(translateY, "px)"));

        } // Rotate should come first before scale to match orientation transform

 

 

        if (isNumber(rotate) && rotate !== 0) {

            values.push("rotate(".concat(rotate, "deg)"));

        }

 

        if (isNumber(scaleX) && scaleX !== 1) {

            values.push("scaleX(".concat(scaleX, ")"));

        }

 

        if (isNumber(scaleY) && scaleY !== 1) {

            values.push("scaleY(".concat(scaleY, ")"));

        }

 

        var transform = values.length ? values.join(&#39; &#39;) : &#39;none&#39;;

        return {

            WebkitTransform: transform,

            msTransform: transform,

            transform: transform

        };

    }

 

    /**

     * Get the max ratio of a group of pointers.

     * @param {string} pointers - The target pointers.

     * @returns {number} The result ratio.

     */

 

    function getMaxZoomRatio(pointers) {

        var pointers2 = assign({}, pointers);

        var ratios = [];

        forEach(pointers, function (pointer, pointerId) {

            delete pointers2[pointerId];

            forEach(pointers2, function (pointer2) {

                var x1 = Math.abs(pointer.startX - pointer2.startX);

                var y1 = Math.abs(pointer.startY - pointer2.startY);

                var x2 = Math.abs(pointer.endX - pointer2.endX);

                var y2 = Math.abs(pointer.endY - pointer2.endY);

                var z1 = Math.sqrt(x1 * x1 + y1 * y1);

                var z2 = Math.sqrt(x2 * x2 + y2 * y2);

                var ratio = (z2 - z1) / z1;

                ratios.push(ratio);

            });

        });

        ratios.sort(function (a, b) {

            return Math.abs(a) < Math.abs(b);

        });

        return ratios[0];

    }

 

    /**

     * Get a pointer from an event object.

     * @param {Object} event - The target event object.

     * @param {boolean} endOnly - Indicates if only returns the end point coordinate or not.

     * @returns {Object} The result pointer contains start and/or end point coordinates.

     */

 

    function getPointer(_ref2, endOnly) {

        var pageX = _ref2.pageX,

            pageY = _ref2.pageY;

        var end = {

            endX: pageX,

            endY: pageY

        };

        return endOnly ? end : assign({

            startX: pageX,

            startY: pageY

        }, end);

    }

 

    /**

     * Get the center point coordinate of a group of pointers.

     * @param {Object} pointers - The target pointers.

     * @returns {Object} The center point coordinate.

     */

 

    function getPointersCenter(pointers) {

        var pageX = 0;

        var pageY = 0;

        var count = 0;

        forEach(pointers, function (_ref3) {

            var startX = _ref3.startX,

                startY = _ref3.startY;

            pageX += startX;

            pageY += startY;

            count += 1;

        });

        pageX /= count;

        pageY /= count;

        return {

            pageX: pageX,

            pageY: pageY

        };

    }

 

    /**

     * Check if the given value is a finite number.

     */

 

    var isFinite = Number.isFinite || WINDOW.isFinite;

 

    /**

     * Get the max sizes in a rectangle under the given aspect ratio.

     * @param {Object} data - The original sizes.

     * @param {string} [type=&#39;contain&#39;] - The adjust type.

     * @returns {Object} The result sizes.

     */

 

    function getAdjustedSizes(_ref4) // or &#39;cover&#39;

    {

        var aspectRatio = _ref4.aspectRatio,

            height = _ref4.height,

            width = _ref4.width;

        var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : &#39;contain&#39;;

 

        var isValidNumber = function isValidNumber(value) {

            return isFinite(value) && value > 0;

        };

 

        if (isValidNumber(width) && isValidNumber(height)) {

            var adjustedWidth = height * aspectRatio;

 

            if (type === &#39;contain&#39; && adjustedWidth > width || type === &#39;cover&#39; && adjustedWidth < width) {

                height = width / aspectRatio;

            } else {

                width = height * aspectRatio;

            }

        } else if (isValidNumber(width)) {

            height = width / aspectRatio;

        } else if (isValidNumber(height)) {

            width = height * aspectRatio;

        }

 

        return {

            width: width,

            height: height

        };

    }

 

    /**

     * Get the new sizes of a rectangle after rotated.

     * @param {Object} data - The original sizes.

     * @returns {Object} The result sizes.

     */

 

    function getRotatedSizes(_ref5) {

        var width = _ref5.width,

            height = _ref5.height,

            degree = _ref5.degree;

        degree = Math.abs(degree) % 180;

 

        if (degree === 90) {

            return {

                width: height,

                height: width

            };

        }

 

        var arc = degree % 90 * Math.PI / 180;

        var sinArc = Math.sin(arc);

        var cosArc = Math.cos(arc);

        var newWidth = width * cosArc + height * sinArc;

        var newHeight = width * sinArc + height * cosArc;

        return degree > 90 ? {

            width: newHeight,

            height: newWidth

        } : {

            width: newWidth,

            height: newHeight

        };

    }

 

    /**

     * Get a canvas which drew the given image.

     * @param {HTMLImageElement} image - The image for drawing.

     * @param {Object} imageData - The image data.

     * @param {Object} canvasData - The canvas data.

     * @param {Object} options - The options.

     * @returns {HTMLCanvasElement} The result canvas.

     */

 

    function getSourceCanvas(image, _ref6, _ref7, _ref8) {

        var imageAspectRatio = _ref6.aspectRatio,

            imageNaturalWidth = _ref6.naturalWidth,

            imageNaturalHeight = _ref6.naturalHeight,

            _ref6$rotate = _ref6.rotate,

            rotate = _ref6$rotate === void 0 ? 0 : _ref6$rotate,

            _ref6$scaleX = _ref6.scaleX,

            scaleX = _ref6$scaleX === void 0 ? 1 : _ref6$scaleX,

            _ref6$scaleY = _ref6.scaleY,

            scaleY = _ref6$scaleY === void 0 ? 1 : _ref6$scaleY;

        var aspectRatio = _ref7.aspectRatio,

            naturalWidth = _ref7.naturalWidth,

            naturalHeight = _ref7.naturalHeight;

        var _ref8$fillColor = _ref8.fillColor,

            fillColor = _ref8$fillColor === void 0 ? &#39;transparent&#39; : _ref8$fillColor,

            _ref8$imageSmoothingE = _ref8.imageSmoothingEnabled,

            imageSmoothingEnabled = _ref8$imageSmoothingE === void 0 ? true : _ref8$imageSmoothingE,

            _ref8$imageSmoothingQ = _ref8.imageSmoothingQuality,

            imageSmoothingQuality = _ref8$imageSmoothingQ === void 0 ? &#39;low&#39; : _ref8$imageSmoothingQ,

            _ref8$maxWidth = _ref8.maxWidth,

            maxWidth = _ref8$maxWidth === void 0 ? Infinity : _ref8$maxWidth,

            _ref8$maxHeight = _ref8.maxHeight,

            maxHeight = _ref8$maxHeight === void 0 ? Infinity : _ref8$maxHeight,

            _ref8$minWidth = _ref8.minWidth,

            minWidth = _ref8$minWidth === void 0 ? 0 : _ref8$minWidth,

            _ref8$minHeight = _ref8.minHeight,

            minHeight = _ref8$minHeight === void 0 ? 0 : _ref8$minHeight;

        var canvas = document.createElement(&#39;canvas&#39;);

        var context = canvas.getContext(&#39;2d&#39;);

        var maxSizes = getAdjustedSizes({

            aspectRatio: aspectRatio,

            width: maxWidth,

            height: maxHeight

        });

        var minSizes = getAdjustedSizes({

            aspectRatio: aspectRatio,

            width: minWidth,

            height: minHeight

        }, &#39;cover&#39;);

        var width = Math.min(maxSizes.width, Math.max(minSizes.width, naturalWidth));

        var height = Math.min(maxSizes.height, Math.max(minSizes.height, naturalHeight)); // Note: should always use image&#39;s natural sizes for drawing as

        // imageData.naturalWidth === canvasData.naturalHeight when rotate % 180 === 90

 

        var destMaxSizes = getAdjustedSizes({

            aspectRatio: imageAspectRatio,

            width: maxWidth,

            height: maxHeight

        });

        var destMinSizes = getAdjustedSizes({

            aspectRatio: imageAspectRatio,

            width: minWidth,

            height: minHeight

        }, &#39;cover&#39;);

        var destWidth = Math.min(destMaxSizes.width, Math.max(destMinSizes.width, imageNaturalWidth));

        var destHeight = Math.min(destMaxSizes.height, Math.max(destMinSizes.height, imageNaturalHeight));

        var params = [-destWidth / 2, -destHeight / 2, destWidth, destHeight];

        canvas.width = normalizeDecimalNumber(width);

        canvas.height = normalizeDecimalNumber(height);

        context.fillStyle = fillColor;

        context.fillRect(0, 0, width, height);

        context.save();

        context.translate(width / 2, height / 2);

        context.rotate(rotate * Math.PI / 180);

        context.scale(scaleX, scaleY);

        context.imageSmoothingEnabled = imageSmoothingEnabled;

        context.imageSmoothingQuality = imageSmoothingQuality;

        context.drawImage.apply(context, [image].concat(_toConsumableArray(params.map(function (param) {

            return Math.floor(normalizeDecimalNumber(param));

        }))));

        context.restore();

        return canvas;

    }

 

    var fromCharCode = String.fromCharCode;

 

    /**

     * Get string from char code in data view.

     * @param {DataView} dataView - The data view for read.

     * @param {number} start - The start index.

     * @param {number} length - The read length.

     * @returns {string} The read result.

     */

 

    function getStringFromCharCode(dataView, start, length) {

        var str = &#39;&#39;;

        var i;

        length += start;

 

        for (i = start; i < length; i += 1) {

            str += fromCharCode(dataView.getUint8(i));

        }

 

        return str;

    }

 

    var REGEXP_DATA_URL_HEAD = /^data:.*,/;

 

    /**

     * Transform Data URL to array buffer.

     * @param {string} dataURL - The Data URL to transform.

     * @returns {ArrayBuffer} The result array buffer.

     */

 

    function dataURLToArrayBuffer(dataURL) {

        var base64 = dataURL.replace(REGEXP_DATA_URL_HEAD, &#39;&#39;);

        var binary = atob(base64);

        var arrayBuffer = new ArrayBuffer(binary.length);

        var uint8 = new Uint8Array(arrayBuffer);

        forEach(uint8, function (value, i) {

            uint8[i] = binary.charCodeAt(i);

        });

        return arrayBuffer;

    }

 

    /**

     * Transform array buffer to Data URL.

     * @param {ArrayBuffer} arrayBuffer - The array buffer to transform.

     * @param {string} mimeType - The mime type of the Data URL.

     * @returns {string} The result Data URL.

     */

 

    function arrayBufferToDataURL(arrayBuffer, mimeType) {

        var chunks = [];

        var chunkSize = 8192;

        var uint8 = new Uint8Array(arrayBuffer);

 

        while (uint8.length > 0) {

            chunks.push(fromCharCode.apply(void 0, _toConsumableArray(uint8.subarray(0, chunkSize))));

            uint8 = uint8.subarray(chunkSize);

        }

 

        return "data:".concat(mimeType, ";base64,").concat(btoa(chunks.join(&#39;&#39;)));

    }

 

    /**

     * Get orientation value from given array buffer.

     * @param {ArrayBuffer} arrayBuffer - The array buffer to read.

     * @returns {number} The read orientation value.

     */

 

    function resetAndGetOrientation(arrayBuffer) {

        var dataView = new DataView(arrayBuffer);

        var orientation; // Ignores range error when the image does not have correct Exif information

 

        try {

            var littleEndian;

            var app1Start;

            var ifdStart; // Only handle JPEG image (start by 0xFFD8)

 

            if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {

                var length = dataView.byteLength;

                var offset = 2;

 

                while (offset + 1 < length) {

                    if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {

                        app1Start = offset;

                        break;

                    }

 

                    offset += 1;

                }

            }

 

            if (app1Start) {

                var exifIDCode = app1Start + 4;

                var tiffOffset = app1Start + 10;

 

                if (getStringFromCharCode(dataView, exifIDCode, 4) === &#39;Exif&#39;) {

                    var endianness = dataView.getUint16(tiffOffset);

                    littleEndian = endianness === 0x4949;

 

                    if (littleEndian || endianness === 0x4D4D

                    /* bigEndian */

                    ) {

                        if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {

                            var firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);

 

                            if (firstIFDOffset >= 0x00000008) {

                                ifdStart = tiffOffset + firstIFDOffset;

                            }

                        }

                    }

                }

            }

 

            if (ifdStart) {

                var _length = dataView.getUint16(ifdStart, littleEndian);

 

                var _offset;

 

                var i;

 

                for (i = 0; i < _length; i += 1) {

                    _offset = ifdStart + i * 12 + 2;

 

                    if (dataView.getUint16(_offset, littleEndian) === 0x0112

                    /* Orientation */

                    ) {

                        // 8 is the offset of the current tag&#39;s value

                        _offset += 8; // Get the original orientation value

 

                        orientation = dataView.getUint16(_offset, littleEndian); // Override the orientation with its default value

 

                        dataView.setUint16(_offset, 1, littleEndian);

                        break;

                    }

                }

            }

        } catch (e) {

            orientation = 1;

        }

 

        return orientation;

    }

 

    /**

     * Parse Exif Orientation value.

     * @param {number} orientation - The orientation to parse.

     * @returns {Object} The parsed result.

     */

 

    function parseOrientation(orientation) {

        var rotate = 0;

        var scaleX = 1;

        var scaleY = 1;

 

        switch (orientation) {

            // Flip horizontal

            case 2:

                scaleX = -1;

                break;

            // Rotate left 180°

 

            case 3:

                rotate = -180;

                break;

            // Flip vertical

 

            case 4:

                scaleY = -1;

                break;

            // Flip vertical and rotate right 90°

 

            case 5:

                rotate = 90;

                scaleY = -1;

                break;

            // Rotate right 90°

 

            case 6:

                rotate = 90;

                break;

            // Flip horizontal and rotate right 90°

 

            case 7:

                rotate = 90;

                scaleX = -1;

                break;

            // Rotate left 90°

 

            case 8:

                rotate = -90;

                break;

 

            default:

        }

 

        return {

            rotate: rotate,

            scaleX: scaleX,

            scaleY: scaleY

        };

    }

 

    var render = {

        render: function render() {

            this.initContainer();

            this.initCanvas();

            this.initCropBox();

            this.renderCanvas();

 

            if (this.cropped) {

                this.renderCropBox();

            }

        },

        initContainer: function initContainer() {

            var element = this.element,

                options = this.options,

                container = this.container,

                cropper = this.cropper;

            addClass(cropper, CLASS_HIDDEN);

            removeClass(element, CLASS_HIDDEN);

            var containerData = {

                width: Math.max(container.offsetWidth, Number(options.minContainerWidth) || 200),

                height: Math.max(container.offsetHeight, Number(options.minContainerHeight) || 100)

            };

            this.containerData = containerData;

            setStyle(cropper, {

                width: containerData.width,

                height: containerData.height

            });

            addClass(element, CLASS_HIDDEN);

            removeClass(cropper, CLASS_HIDDEN);

        },

        // Canvas (image wrapper)

        initCanvas: function initCanvas() {

            var containerData = this.containerData,

                imageData = this.imageData;

            var viewMode = this.options.viewMode;

            var rotated = Math.abs(imageData.rotate) % 180 === 90;

            var naturalWidth = rotated ? imageData.naturalHeight : imageData.naturalWidth;

            var naturalHeight = rotated ? imageData.naturalWidth : imageData.naturalHeight;

            var aspectRatio = naturalWidth / naturalHeight;

            var canvasWidth = containerData.width;

            var canvasHeight = containerData.height;

 

            if (containerData.height * aspectRatio > containerData.width) {

                if (viewMode === 3) {

                    canvasWidth = containerData.height * aspectRatio;

                } else {

                    canvasHeight = containerData.width / aspectRatio;

                }

            } else if (viewMode === 3) {

                canvasHeight = containerData.width / aspectRatio;

            } else {

                canvasWidth = containerData.height * aspectRatio;

            }

 

            var canvasData = {

                aspectRatio: aspectRatio,

                naturalWidth: naturalWidth,

                naturalHeight: naturalHeight,

                width: canvasWidth,

                height: canvasHeight

            };

            canvasData.left = (containerData.width - canvasWidth) / 2;

            canvasData.top = (containerData.height - canvasHeight) / 2;

            canvasData.oldLeft = canvasData.left;

            canvasData.oldTop = canvasData.top;

            this.canvasData = canvasData;

            this.limited = viewMode === 1 || viewMode === 2;

            this.limitCanvas(true, true);

            this.initialImageData = assign({}, imageData);

            this.initialCanvasData = assign({}, canvasData);

        },

        limitCanvas: function limitCanvas(sizeLimited, positionLimited) {

            var options = this.options,

                containerData = this.containerData,

                canvasData = this.canvasData,

                cropBoxData = this.cropBoxData;

            var viewMode = options.viewMode;

            var aspectRatio = canvasData.aspectRatio;

            var cropped = this.cropped && cropBoxData;

 

            if (sizeLimited) {

                var minCanvasWidth = Number(options.minCanvasWidth) || 0;

                var minCanvasHeight = Number(options.minCanvasHeight) || 0;

 

                if (viewMode > 1) {

                    minCanvasWidth = Math.max(minCanvasWidth, containerData.width);

                    minCanvasHeight = Math.max(minCanvasHeight, containerData.height);

 

                    if (viewMode === 3) {

                        if (minCanvasHeight * aspectRatio > minCanvasWidth) {

                            minCanvasWidth = minCanvasHeight * aspectRatio;

                        } else {

                            minCanvasHeight = minCanvasWidth / aspectRatio;

                        }

                    }

                } else if (viewMode > 0) {

                    if (minCanvasWidth) {

                        minCanvasWidth = Math.max(minCanvasWidth, cropped ? cropBoxData.width : 0);

                    } else if (minCanvasHeight) {

                        minCanvasHeight = Math.max(minCanvasHeight, cropped ? cropBoxData.height : 0);

                    } else if (cropped) {

                        minCanvasWidth = cropBoxData.width;

                        minCanvasHeight = cropBoxData.height;

 

                        if (minCanvasHeight * aspectRatio > minCanvasWidth) {

                            minCanvasWidth = minCanvasHeight * aspectRatio;

                        } else {

                            minCanvasHeight = minCanvasWidth / aspectRatio;

                        }

                    }

                }

 

                var _getAdjustedSizes = getAdjustedSizes({

                    aspectRatio: aspectRatio,

                    width: minCanvasWidth,

                    height: minCanvasHeight

                });

 

                minCanvasWidth = _getAdjustedSizes.width;

                minCanvasHeight = _getAdjustedSizes.height;

                canvasData.minWidth = minCanvasWidth;

                canvasData.minHeight = minCanvasHeight;

                canvasData.maxWidth = Infinity;

                canvasData.maxHeight = Infinity;

            }

 

            if (positionLimited) {

                if (viewMode > (cropped ? 0 : 1)) {

                    var newCanvasLeft = containerData.width - canvasData.width;

                    var newCanvasTop = containerData.height - canvasData.height;

                    canvasData.minLeft = Math.min(0, newCanvasLeft);

                    canvasData.minTop = Math.min(0, newCanvasTop);

                    canvasData.maxLeft = Math.max(0, newCanvasLeft);

                    canvasData.maxTop = Math.max(0, newCanvasTop);

 

                    if (cropped && this.limited) {

                        canvasData.minLeft = Math.min(cropBoxData.left, cropBoxData.left + (cropBoxData.width - canvasData.width));

                        canvasData.minTop = Math.min(cropBoxData.top, cropBoxData.top + (cropBoxData.height - canvasData.height));

                        canvasData.maxLeft = cropBoxData.left;

                        canvasData.maxTop = cropBoxData.top;

 

                        if (viewMode === 2) {

                            if (canvasData.width >= containerData.width) {

                                canvasData.minLeft = Math.min(0, newCanvasLeft);

                                canvasData.maxLeft = Math.max(0, newCanvasLeft);

                            }

 

                            if (canvasData.height >= containerData.height) {

                                canvasData.minTop = Math.min(0, newCanvasTop);

                                canvasData.maxTop = Math.max(0, newCanvasTop);

                            }

                        }

                    }

                } else {

                    canvasData.minLeft = -canvasData.width;

                    canvasData.minTop = -canvasData.height;

                    canvasData.maxLeft = containerData.width;

                    canvasData.maxTop = containerData.height;

                }

            }

        },

        renderCanvas: function renderCanvas(changed, transformed) {

            var canvasData = this.canvasData,

                imageData = this.imageData;

 

            if (transformed) {

                var _getRotatedSizes = getRotatedSizes({

                        width: imageData.naturalWidth * Math.abs(imageData.scaleX || 1),

                        height: imageData.naturalHeight * Math.abs(imageData.scaleY || 1),

                        degree: imageData.rotate || 0

                    }),

                    naturalWidth = _getRotatedSizes.width,

                    naturalHeight = _getRotatedSizes.height;

 

                var width = canvasData.width * (naturalWidth / canvasData.naturalWidth);

                var height = canvasData.height * (naturalHeight / canvasData.naturalHeight);

                canvasData.left -= (width - canvasData.width) / 2;

                canvasData.top -= (height - canvasData.height) / 2;

                canvasData.width = width;

                canvasData.height = height;

                canvasData.aspectRatio = naturalWidth / naturalHeight;

                canvasData.naturalWidth = naturalWidth;

                canvasData.naturalHeight = naturalHeight;

                this.limitCanvas(true, false);

            }

 

            if (canvasData.width > canvasData.maxWidth || canvasData.width < canvasData.minWidth) {

                canvasData.left = canvasData.oldLeft;

            }

 

            if (canvasData.height > canvasData.maxHeight || canvasData.height < canvasData.minHeight) {

                canvasData.top = canvasData.oldTop;

            }

 

            canvasData.width = Math.min(Math.max(canvasData.width, canvasData.minWidth), canvasData.maxWidth);

            canvasData.height = Math.min(Math.max(canvasData.height, canvasData.minHeight), canvasData.maxHeight);

            this.limitCanvas(false, true);

            canvasData.left = Math.min(Math.max(canvasData.left, canvasData.minLeft), canvasData.maxLeft);

            canvasData.top = Math.min(Math.max(canvasData.top, canvasData.minTop), canvasData.maxTop);

            canvasData.oldLeft = canvasData.left;

            canvasData.oldTop = canvasData.top;

            setStyle(this.canvas, assign({

                width: canvasData.width,

                height: canvasData.height

            }, getTransforms({

                translateX: canvasData.left,

                translateY: canvasData.top

            })));

            this.renderImage(changed);

 

            if (this.cropped && this.limited) {

                this.limitCropBox(true, true);

            }

        },

        renderImage: function renderImage(changed) {

            var canvasData = this.canvasData,

                imageData = this.imageData;

            var width = imageData.naturalWidth * (canvasData.width / canvasData.naturalWidth);

            var height = imageData.naturalHeight * (canvasData.height / canvasData.naturalHeight);

            assign(imageData, {

                width: width,

                height: height,

                left: (canvasData.width - width) / 2,

                top: (canvasData.height - height) / 2

            });

            setStyle(this.image, assign({

                width: imageData.width,

                height: imageData.height

            }, getTransforms(assign({

                translateX: imageData.left,

                translateY: imageData.top

            }, imageData))));

 

            if (changed) {

                this.output();

            }

        },

        initCropBox: function initCropBox() {

            var options = this.options,

                canvasData = this.canvasData;

            var aspectRatio = options.aspectRatio || options.initialAspectRatio;

            var autoCropArea = Number(options.autoCropArea) || 0.8;

            var cropBoxData = {

                width: canvasData.width,

                height: canvasData.height

            };

 

            if (aspectRatio) {

                if (canvasData.height * aspectRatio > canvasData.width) {

                    cropBoxData.height = cropBoxData.width / aspectRatio;

                } else {

                    cropBoxData.width = cropBoxData.height * aspectRatio;

                }

            }

 

            this.cropBoxData = cropBoxData;

            this.limitCropBox(true, true); // Initialize auto crop area

 

            cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);

            cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight); // The width/height of auto crop area must large than "minWidth/Height"

 

            cropBoxData.width = Math.max(cropBoxData.minWidth, cropBoxData.width * autoCropArea);

            cropBoxData.height = Math.max(cropBoxData.minHeight, cropBoxData.height * autoCropArea);

            cropBoxData.left = canvasData.left + (canvasData.width - cropBoxData.width) / 2;

            cropBoxData.top = canvasData.top + (canvasData.height - cropBoxData.height) / 2;

            cropBoxData.oldLeft = cropBoxData.left;

            cropBoxData.oldTop = cropBoxData.top;

            this.initialCropBoxData = assign({}, cropBoxData);

        },

        limitCropBox: function limitCropBox(sizeLimited, positionLimited) {

            var options = this.options,

                containerData = this.containerData,

                canvasData = this.canvasData,

                cropBoxData = this.cropBoxData,

                limited = this.limited;

            var aspectRatio = options.aspectRatio;

 

            if (sizeLimited) {

                var minCropBoxWidth = Number(options.minCropBoxWidth) || 0;

                var minCropBoxHeight = Number(options.minCropBoxHeight) || 0;

                var maxCropBoxWidth = limited ? Math.min(containerData.width, canvasData.width, canvasData.width + canvasData.left, containerData.width - canvasData.left) : containerData.width;

                var maxCropBoxHeight = limited ? Math.min(containerData.height, canvasData.height, canvasData.height + canvasData.top, containerData.height - canvasData.top) : containerData.height; // The min/maxCropBoxWidth/Height must be less than container&#39;s width/height

 

                minCropBoxWidth = Math.min(minCropBoxWidth, containerData.width);

                minCropBoxHeight = Math.min(minCropBoxHeight, containerData.height);

 

                if (aspectRatio) {

                    if (minCropBoxWidth && minCropBoxHeight) {

                        if (minCropBoxHeight * aspectRatio > minCropBoxWidth) {

                            minCropBoxHeight = minCropBoxWidth / aspectRatio;

                        } else {

                            minCropBoxWidth = minCropBoxHeight * aspectRatio;

                        }

                    } else if (minCropBoxWidth) {

                        minCropBoxHeight = minCropBoxWidth / aspectRatio;

                    } else if (minCropBoxHeight) {

                        minCropBoxWidth = minCropBoxHeight * aspectRatio;

                    }

 

                    if (maxCropBoxHeight * aspectRatio > maxCropBoxWidth) {

                        maxCropBoxHeight = maxCropBoxWidth / aspectRatio;

                    } else {

                        maxCropBoxWidth = maxCropBoxHeight * aspectRatio;

                    }

                } // The minWidth/Height must be less than maxWidth/Height

 

 

                cropBoxData.minWidth = Math.min(minCropBoxWidth, maxCropBoxWidth);

                cropBoxData.minHeight = Math.min(minCropBoxHeight, maxCropBoxHeight);

                cropBoxData.maxWidth = maxCropBoxWidth;

                cropBoxData.maxHeight = maxCropBoxHeight;

            }

 

            if (positionLimited) {

                if (limited) {

                    cropBoxData.minLeft = Math.max(0, canvasData.left);

                    cropBoxData.minTop = Math.max(0, canvasData.top);

                    cropBoxData.maxLeft = Math.min(containerData.width, canvasData.left + canvasData.width) - cropBoxData.width;

                    cropBoxData.maxTop = Math.min(containerData.height, canvasData.top + canvasData.height) - cropBoxData.height;

                } else {

                    cropBoxData.minLeft = 0;

                    cropBoxData.minTop = 0;

                    cropBoxData.maxLeft = containerData.width - cropBoxData.width;

                    cropBoxData.maxTop = containerData.height - cropBoxData.height;

                }

            }

        },

        renderCropBox: function renderCropBox() {

            var options = this.options,

                containerData = this.containerData,

                cropBoxData = this.cropBoxData;

 

            if (cropBoxData.width > cropBoxData.maxWidth || cropBoxData.width < cropBoxData.minWidth) {

                cropBoxData.left = cropBoxData.oldLeft;

            }

 

            if (cropBoxData.height > cropBoxData.maxHeight || cropBoxData.height < cropBoxData.minHeight) {

                cropBoxData.top = cropBoxData.oldTop;

            }

 

            cropBoxData.width = Math.min(Math.max(cropBoxData.width, cropBoxData.minWidth), cropBoxData.maxWidth);

            cropBoxData.height = Math.min(Math.max(cropBoxData.height, cropBoxData.minHeight), cropBoxData.maxHeight);

            this.limitCropBox(false, true);

            cropBoxData.left = Math.min(Math.max(cropBoxData.left, cropBoxData.minLeft), cropBoxData.maxLeft);

            cropBoxData.top = Math.min(Math.max(cropBoxData.top, cropBoxData.minTop), cropBoxData.maxTop);

            cropBoxData.oldLeft = cropBoxData.left;

            cropBoxData.oldTop = cropBoxData.top;

 

            if (options.movable && options.cropBoxMovable) {

                // Turn to move the canvas when the crop box is equal to the container

                setData(this.face, DATA_ACTION, cropBoxData.width >= containerData.width && cropBoxData.height >= containerData.height ? ACTION_MOVE : ACTION_ALL);

            }

 

            setStyle(this.cropBox, assign({

                width: cropBoxData.width,

                height: cropBoxData.height

            }, getTransforms({

                translateX: cropBoxData.left,

                translateY: cropBoxData.top

            })));

 

            if (this.cropped && this.limited) {

                this.limitCanvas(true, true);

            }

 

            if (!this.disabled) {

                this.output();

            }

        },

        output: function output() {

            this.preview();

            dispatchEvent(this.element, EVENT_CROP, this.getData());

        }

    };

 

    var preview = {

        initPreview: function initPreview() {

            var crossOrigin = this.crossOrigin;

            var preview = this.options.preview;

            var url = crossOrigin ? this.crossOriginUrl : this.url;

            var image = document.createElement(&#39;img&#39;);

 

            if (crossOrigin) {

                image.crossOrigin = crossOrigin;

            }

 

            image.src = url;

            this.viewBox.appendChild(image);

            this.viewBoxImage = image;

 

            if (!preview) {

                return;

            }

 

            var previews = preview;

 

            if (typeof preview === &#39;string&#39;) {

                previews = this.element.ownerDocument.querySelectorAll(preview);

            } else if (preview.querySelector) {

                previews = [preview];

            }

 

            this.previews = previews;

            forEach(previews, function (el) {

                var img = document.createElement(&#39;img&#39;); // Save the original size for recover

 

                setData(el, DATA_PREVIEW, {

                    width: el.offsetWidth,

                    height: el.offsetHeight,

                    html: el.innerHTML

                });

 

                if (crossOrigin) {

                    img.crossOrigin = crossOrigin;

                }

 

                img.src = url;

                /**

                 * Override img element styles

                 * Add `display:block` to avoid margin top issue

                 * Add `height:auto` to override `height` attribute on IE8

                 * (Occur only when margin-top <= -height)

                 */

 

                img.style.cssText = &#39;display:block;&#39; + &#39;width:100%;&#39; + &#39;height:auto;&#39; + &#39;min-width:0!important;&#39; + &#39;min-height:0!important;&#39; + &#39;max-width:none!important;&#39; + &#39;max-height:none!important;&#39; + &#39;image-orientation:0deg!important;"&#39;;

                el.innerHTML = &#39;&#39;;

                el.appendChild(img);

            });

        },

        resetPreview: function resetPreview() {

            forEach(this.previews, function (element) {

                var data = getData(element, DATA_PREVIEW);

                setStyle(element, {

                    width: data.width,

                    height: data.height

                });

                element.innerHTML = data.html;

                removeData(element, DATA_PREVIEW);

            });

        },

        preview: function preview() {

            var imageData = this.imageData,

                canvasData = this.canvasData,

                cropBoxData = this.cropBoxData;

            var cropBoxWidth = cropBoxData.width,

                cropBoxHeight = cropBoxData.height;

            var width = imageData.width,

                height = imageData.height;

            var left = cropBoxData.left - canvasData.left - imageData.left;

            var top = cropBoxData.top - canvasData.top - imageData.top;

 

            if (!this.cropped || this.disabled) {

                return;

            }

 

            setStyle(this.viewBoxImage, assign({

                width: width,

                height: height

            }, getTransforms(assign({

                translateX: -left,

                translateY: -top

            }, imageData))));

            forEach(this.previews, function (element) {

                var data = getData(element, DATA_PREVIEW);

                var originalWidth = data.width;

                var originalHeight = data.height;

                var newWidth = originalWidth;

                var newHeight = originalHeight;

                var ratio = 1;

 

                if (cropBoxWidth) {

                    ratio = originalWidth / cropBoxWidth;

                    newHeight = cropBoxHeight * ratio;

                }

 

                if (cropBoxHeight && newHeight > originalHeight) {

                    ratio = originalHeight / cropBoxHeight;

                    newWidth = cropBoxWidth * ratio;

                    newHeight = originalHeight;

                }

 

                setStyle(element, {

                    width: newWidth,

                    height: newHeight

                });

                setStyle(element.getElementsByTagName(&#39;img&#39;)[0], assign({

                    width: width * ratio,

                    height: height * ratio

                }, getTransforms(assign({

                    translateX: -left * ratio,

                    translateY: -top * ratio

                }, imageData))));

            });

        }

    };

 

    var events = {

        bind: function bind() {

            var element = this.element,

                options = this.options,

                cropper = this.cropper;

 

            if (isFunction(options.cropstart)) {

                addListener(element, EVENT_CROP_START, options.cropstart);

            }

 

            if (isFunction(options.cropmove)) {

                addListener(element, EVENT_CROP_MOVE, options.cropmove);

            }

 

            if (isFunction(options.cropend)) {

                addListener(element, EVENT_CROP_END, options.cropend);

            }

 

            if (isFunction(options.crop)) {

                addListener(element, EVENT_CROP, options.crop);

            }

 

            if (isFunction(options.zoom)) {

                addListener(element, EVENT_ZOOM, options.zoom);

            }

 

            addListener(cropper, EVENT_POINTER_DOWN, this.onCropStart = this.cropStart.bind(this));

 

            if (options.zoomable && options.zoomOnWheel) {

                addListener(cropper, EVENT_WHEEL, this.onWheel = this.wheel.bind(this));

            }

 

            if (options.toggleDragModeOnDblclick) {

                addListener(cropper, EVENT_DBLCLICK, this.onDblclick = this.dblclick.bind(this));

            }

 

            addListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove = this.cropMove.bind(this));

            addListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd = this.cropEnd.bind(this));

 

            if (options.responsive) {

                addListener(window, EVENT_RESIZE, this.onResize = this.resize.bind(this));

            }

        },

        unbind: function unbind() {

            var element = this.element,

                options = this.options,

                cropper = this.cropper;

 

            if (isFunction(options.cropstart)) {

                removeListener(element, EVENT_CROP_START, options.cropstart);

            }

 

            if (isFunction(options.cropmove)) {

                removeListener(element, EVENT_CROP_MOVE, options.cropmove);

            }

 

            if (isFunction(options.cropend)) {

                removeListener(element, EVENT_CROP_END, options.cropend);

            }

 

            if (isFunction(options.crop)) {

                removeListener(element, EVENT_CROP, options.crop);

            }

 

            if (isFunction(options.zoom)) {

                removeListener(element, EVENT_ZOOM, options.zoom);

            }

 

            removeListener(cropper, EVENT_POINTER_DOWN, this.onCropStart);

 

            if (options.zoomable && options.zoomOnWheel) {

                removeListener(cropper, EVENT_WHEEL, this.onWheel);

            }

 

            if (options.toggleDragModeOnDblclick) {

                removeListener(cropper, EVENT_DBLCLICK, this.onDblclick);

            }

 

            removeListener(element.ownerDocument, EVENT_POINTER_MOVE, this.onCropMove);

            removeListener(element.ownerDocument, EVENT_POINTER_UP, this.onCropEnd);

 

            if (options.responsive) {

                removeListener(window, EVENT_RESIZE, this.onResize);

            }

        }

    };

 

    var handlers = {

        resize: function resize() {

            var options = this.options,

                container = this.container,

                containerData = this.containerData;

            var minContainerWidth = Number(options.minContainerWidth) || 200;

            var minContainerHeight = Number(options.minContainerHeight) || 100;

 

            if (this.disabled || containerData.width <= minContainerWidth || containerData.height <= minContainerHeight) {

                return;

            }

 

            var ratio = container.offsetWidth / containerData.width; // Resize when width changed or height changed

 

            if (ratio !== 1 || container.offsetHeight !== containerData.height) {

                var canvasData;

                var cropBoxData;

 

                if (options.restore) {

                    canvasData = this.getCanvasData();

                    cropBoxData = this.getCropBoxData();

                }

 

                this.render();

 

                if (options.restore) {

                    this.setCanvasData(forEach(canvasData, function (n, i) {

                        canvasData[i] = n * ratio;

                    }));

                    this.setCropBoxData(forEach(cropBoxData, function (n, i) {

                        cropBoxData[i] = n * ratio;

                    }));

                }

            }

        },

        dblclick: function dblclick() {

            if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {

                return;

            }

 

            this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP);

        },

        wheel: function wheel(e) {

            var _this = this;

 

            var ratio = Number(this.options.wheelZoomRatio) || 0.1;

            var delta = 1;

 

            if (this.disabled) {

                return;

            }

 

            e.preventDefault(); // Limit wheel speed to prevent zoom too fast (#21)

 

            if (this.wheeling) {

                return;

            }

 

            this.wheeling = true;

            setTimeout(function () {

                _this.wheeling = false;

            }, 50);

 

            if (e.deltaY) {

                delta = e.deltaY > 0 ? 1 : -1;

            } else if (e.wheelDelta) {

                delta = -e.wheelDelta / 120;

            } else if (e.detail) {

                delta = e.detail > 0 ? 1 : -1;

            }

 

            this.zoom(-delta * ratio, e);

        },

        cropStart: function cropStart(e) {

            if (this.disabled) {

                return;

            }

 

            var options = this.options,

                pointers = this.pointers;

            var action;

 

            if (e.changedTouches) {

                // Handle touch event

                forEach(e.changedTouches, function (touch) {

                    pointers[touch.identifier] = getPointer(touch);

                });

            } else {

                // Handle mouse event and pointer event

                pointers[e.pointerId || 0] = getPointer(e);

            }

 

            if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) {

                action = ACTION_ZOOM;

            } else {

                action = getData(e.target, DATA_ACTION);

            }

 

            if (!REGEXP_ACTIONS.test(action)) {

                return;

            }

 

            if (dispatchEvent(this.element, EVENT_CROP_START, {

                    originalEvent: e,

                    action: action

                }) === false) {

                return;

            } // This line is required for preventing page zooming in iOS browsers

 

 

            e.preventDefault();

            this.action = action;

            this.cropping = false;

 

            if (action === ACTION_CROP) {

                this.cropping = true;

                addClass(this.dragBox, CLASS_MODAL);

            }

        },

        cropMove: function cropMove(e) {

            var action = this.action;

 

            if (this.disabled || !action) {

                return;

            }

 

            var pointers = this.pointers;

            e.preventDefault();

 

            if (dispatchEvent(this.element, EVENT_CROP_MOVE, {

                    originalEvent: e,

                    action: action

                }) === false) {

                return;

            }

 

            if (e.changedTouches) {

                forEach(e.changedTouches, function (touch) {

                    // The first parameter should not be undefined (#432)

                    assign(pointers[touch.identifier] || {}, getPointer(touch, true));

                });

            } else {

                assign(pointers[e.pointerId || 0] || {}, getPointer(e, true));

            }

 

            this.change(e);

        },

        cropEnd: function cropEnd(e) {

            if (this.disabled) {

                return;

            }

 

            var action = this.action,

                pointers = this.pointers;

 

            if (e.changedTouches) {

                forEach(e.changedTouches, function (touch) {

                    delete pointers[touch.identifier];

                });

            } else {

                delete pointers[e.pointerId || 0];

            }

 

            if (!action) {

                return;

            }

 

            e.preventDefault();

 

            if (!Object.keys(pointers).length) {

                this.action = &#39;&#39;;

            }

 

            if (this.cropping) {

                this.cropping = false;

                toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal);

            }

 

            dispatchEvent(this.element, EVENT_CROP_END, {

                originalEvent: e,

                action: action

            });

        }

    };

 

    var change = {

        change: function change(e) {

            var options = this.options,

                canvasData = this.canvasData,

                containerData = this.containerData,

                cropBoxData = this.cropBoxData,

                pointers = this.pointers;

            var action = this.action;

            var aspectRatio = options.aspectRatio;

            var left = cropBoxData.left,

                top = cropBoxData.top,

                width = cropBoxData.width,

                height = cropBoxData.height;

            var right = left + width;

            var bottom = top + height;

            var minLeft = 0;

            var minTop = 0;

            var maxWidth = containerData.width;

            var maxHeight = containerData.height;

            var renderable = true;

            var offset; // Locking aspect ratio in "free mode" by holding shift key

 

            if (!aspectRatio && e.shiftKey) {

                aspectRatio = width && height ? width / height : 1;

            }

 

            if (this.limited) {

                minLeft = cropBoxData.minLeft;

                minTop = cropBoxData.minTop;

                maxWidth = minLeft + Math.min(containerData.width, canvasData.width, canvasData.left + canvasData.width);

                maxHeight = minTop + Math.min(containerData.height, canvasData.height, canvasData.top + canvasData.height);

            }

 

            var pointer = pointers[Object.keys(pointers)[0]];

            var range = {

                x: pointer.endX - pointer.startX,

                y: pointer.endY - pointer.startY

            };

 

            var check = function check(side) {

                switch (side) {

                    case ACTION_EAST:

                        if (right + range.x > maxWidth) {

                            range.x = maxWidth - right;

                        }

 

                        break;

 

                    case ACTION_WEST:

                        if (left + range.x < minLeft) {

                            range.x = minLeft - left;

                        }

 

                        break;

 

                    case ACTION_NORTH:

                        if (top + range.y < minTop) {

                            range.y = minTop - top;

                        }

 

                        break;

 

                    case ACTION_SOUTH:

                        if (bottom + range.y > maxHeight) {

                            range.y = maxHeight - bottom;

                        }

 

                        break;

 

                    default:

                }

            };

 

            switch (action) {

                // Move crop box

                case ACTION_ALL:

                    left += range.x;

                    top += range.y;

                    break;

                // Resize crop box

 

                case ACTION_EAST:

                    if (range.x >= 0 && (right >= maxWidth || aspectRatio && (top <= minTop || bottom >= maxHeight))) {

                        renderable = false;

                        break;

                    }

 

                    check(ACTION_EAST);

                    width += range.x;

 

                    if (width < 0) {

                        action = ACTION_WEST;

                        width = -width;

                        left -= width;

                    }

 

                    if (aspectRatio) {

                        height = width / aspectRatio;

                        top += (cropBoxData.height - height) / 2;

                    }

 

                    break;

 

                case ACTION_NORTH:

                    if (range.y <= 0 && (top <= minTop || aspectRatio && (left <= minLeft || right >= maxWidth))) {

                        renderable = false;

                        break;

                    }

 

                    check(ACTION_NORTH);

                    height -= range.y;

                    top += range.y;

 

                    if (height < 0) {

                        action = ACTION_SOUTH;

                        height = -height;

                        top -= height;

                    }

 

                    if (aspectRatio) {

                        width = height * aspectRatio;

                        left += (cropBoxData.width - width) / 2;

                    }

 

                    break;

 

                case ACTION_WEST:

                    if (range.x <= 0 && (left <= minLeft || aspectRatio && (top <= minTop || bottom >= maxHeight))) {

                        renderable = false;

                        break;

                    }

 

                    check(ACTION_WEST);

                    width -= range.x;

                    left += range.x;

 

                    if (width < 0) {

                        action = ACTION_EAST;

                        width = -width;

                        left -= width;

                    }

 

                    if (aspectRatio) {

                        height = width / aspectRatio;

                        top += (cropBoxData.height - height) / 2;

                    }

 

                    break;

 

                case ACTION_SOUTH:

                    if (range.y >= 0 && (bottom >= maxHeight || aspectRatio && (left <= minLeft || right >= maxWidth))) {

                        renderable = false;

                        break;

                    }

 

                    check(ACTION_SOUTH);

                    height += range.y;

 

                    if (height < 0) {

                        action = ACTION_NORTH;

                        height = -height;

                        top -= height;

                    }

 

                    if (aspectRatio) {

                        width = height * aspectRatio;

                        left += (cropBoxData.width - width) / 2;

                    }

 

                    break;

 

                case ACTION_NORTH_EAST:

                    if (aspectRatio) {

                        if (range.y <= 0 && (top <= minTop || right >= maxWidth)) {

                            renderable = false;

                            break;

                        }

 

                        check(ACTION_NORTH);

                        height -= range.y;

                        top += range.y;

                        width = height * aspectRatio;

                    } else {

                        check(ACTION_NORTH);

                        check(ACTION_EAST);

 

                        if (range.x >= 0) {

                            if (right < maxWidth) {

                                width += range.x;

                            } else if (range.y <= 0 && top <= minTop) {

                                renderable = false;

                            }

                        } else {

                            width += range.x;

                        }

 

                        if (range.y <= 0) {

                            if (top > minTop) {

                                height -= range.y;

                                top += range.y;

                            }

                        } else {

                            height -= range.y;

                            top += range.y;

                        }

                    }

 

                    if (width < 0 && height < 0) {

                        action = ACTION_SOUTH_WEST;

                        height = -height;

                        width = -width;

                        top -= height;

                        left -= width;

                    } else if (width < 0) {

                        action = ACTION_NORTH_WEST;

                        width = -width;

                        left -= width;

                    } else if (height < 0) {

                        action = ACTION_SOUTH_EAST;

                        height = -height;

                        top -= height;

                    }

 

                    break;

 

                case ACTION_NORTH_WEST:

                    if (aspectRatio) {

                        if (range.y <= 0 && (top <= minTop || left <= minLeft)) {

                            renderable = false;

                            break;

                        }

 

                        check(ACTION_NORTH);

                        height -= range.y;

                        top += range.y;

                        width = height * aspectRatio;

                        left += cropBoxData.width - width;

                    } else {

                        check(ACTION_NORTH);

                        check(ACTION_WEST);

 

                        if (range.x <= 0) {

                            if (left > minLeft) {

                                width -= range.x;

                                left += range.x;

                            } else if (range.y <= 0 && top <= minTop) {

                                renderable = false;

                            }

                        } else {

                            width -= range.x;

                            left += range.x;

                        }

 

                        if (range.y <= 0) {

                            if (top > minTop) {

                                height -= range.y;

                                top += range.y;

                            }

                        } else {

                            height -= range.y;

                            top += range.y;

                        }

                    }

 

                    if (width < 0 && height < 0) {

                        action = ACTION_SOUTH_EAST;

                        height = -height;

                        width = -width;

                        top -= height;

                        left -= width;

                    } else if (width < 0) {

                        action = ACTION_NORTH_EAST;

                        width = -width;

                        left -= width;

                    } else if (height < 0) {

                        action = ACTION_SOUTH_WEST;

                        height = -height;

                        top -= height;

                    }

 

                    break;

 

                case ACTION_SOUTH_WEST:

                    if (aspectRatio) {

                        if (range.x <= 0 && (left <= minLeft || bottom >= maxHeight)) {

                            renderable = false;

                            break;

                        }

 

                        check(ACTION_WEST);

                        width -= range.x;

                        left += range.x;

                        height = width / aspectRatio;

                    } else {

                        check(ACTION_SOUTH);

                        check(ACTION_WEST);

 

                        if (range.x <= 0) {

                            if (left > minLeft) {

                                width -= range.x;

                                left += range.x;

                            } else if (range.y >= 0 && bottom >= maxHeight) {

                                renderable = false;

                            }

                        } else {

                            width -= range.x;

                            left += range.x;

                        }

 

                        if (range.y >= 0) {

                            if (bottom < maxHeight) {

                                height += range.y;

                            }

                        } else {

                            height += range.y;

                        }

                    }

 

                    if (width < 0 && height < 0) {

                        action = ACTION_NORTH_EAST;

                        height = -height;

                        width = -width;

                        top -= height;

                        left -= width;

                    } else if (width < 0) {

                        action = ACTION_SOUTH_EAST;

                        width = -width;

                        left -= width;

                    } else if (height < 0) {

                        action = ACTION_NORTH_WEST;

                        height = -height;

                        top -= height;

                    }

 

                    break;

 

                case ACTION_SOUTH_EAST:

                    if (aspectRatio) {

                        if (range.x >= 0 && (right >= maxWidth || bottom >= maxHeight)) {

                            renderable = false;

                            break;

                        }

 

                        check(ACTION_EAST);

                        width += range.x;

                        height = width / aspectRatio;

                    } else {

                        check(ACTION_SOUTH);

                        check(ACTION_EAST);

 

                        if (range.x >= 0) {

                            if (right < maxWidth) {

                                width += range.x;

                            } else if (range.y >= 0 && bottom >= maxHeight) {

                                renderable = false;

                            }

                        } else {

                            width += range.x;

                        }

 

                        if (range.y >= 0) {

                            if (bottom < maxHeight) {

                                height += range.y;

                            }

                        } else {

                            height += range.y;

                        }

                    }

 

                    if (width < 0 && height < 0) {

                        action = ACTION_NORTH_WEST;

                        height = -height;

                        width = -width;

                        top -= height;

                        left -= width;

                    } else if (width < 0) {

                        action = ACTION_SOUTH_WEST;

                        width = -width;

                        left -= width;

                    } else if (height < 0) {

                        action = ACTION_NORTH_EAST;

                        height = -height;

                        top -= height;

                    }

 

                    break;

                // Move canvas

 

                case ACTION_MOVE:

                    this.move(range.x, range.y);

                    renderable = false;

                    break;

                // Zoom canvas

 

                case ACTION_ZOOM:

                    this.zoom(getMaxZoomRatio(pointers), e);

                    renderable = false;

                    break;

                // Create crop box

 

                case ACTION_CROP:

                    if (!range.x || !range.y) {

                        renderable = false;

                        break;

                    }

 

                    offset = getOffset(this.cropper);

                    left = pointer.startX - offset.left;

                    top = pointer.startY - offset.top;

                    width = cropBoxData.minWidth;

                    height = cropBoxData.minHeight;

 

                    if (range.x > 0) {

                        action = range.y > 0 ? ACTION_SOUTH_EAST : ACTION_NORTH_EAST;

                    } else if (range.x < 0) {

                        left -= width;

                        action = range.y > 0 ? ACTION_SOUTH_WEST : ACTION_NORTH_WEST;

                    }

 

                    if (range.y < 0) {

                        top -= height;

                    } // Show the crop box if is hidden

 

 

                    if (!this.cropped) {

                        removeClass(this.cropBox, CLASS_HIDDEN);

                        this.cropped = true;

 

                        if (this.limited) {

                            this.limitCropBox(true, true);

                        }

                    }

 

                    break;

 

                default:

            }

 

            if (renderable) {

                cropBoxData.width = width;

                cropBoxData.height = height;

                cropBoxData.left = left;

                cropBoxData.top = top;

                this.action = action;

                this.renderCropBox();

            } // Override

 

 

            forEach(pointers, function (p) {

                p.startX = p.endX;

                p.startY = p.endY;

            });

        }

    };

 

    var methods = {

        // Show the crop box manually

        crop: function crop() {

            if (this.ready && !this.cropped && !this.disabled) {

                this.cropped = true;

                this.limitCropBox(true, true);

 

                if (this.options.modal) {

                    addClass(this.dragBox, CLASS_MODAL);

                }

 

                removeClass(this.cropBox, CLASS_HIDDEN);

                this.setCropBoxData(this.initialCropBoxData);

            }

 

            return this;

        },

        // Reset the image and crop box to their initial states

        reset: function reset() {

            if (this.ready && !this.disabled) {

                this.imageData = assign({}, this.initialImageData);

                this.canvasData = assign({}, this.initialCanvasData);

                this.cropBoxData = assign({}, this.initialCropBoxData);

                this.renderCanvas();

 

                if (this.cropped) {

                    this.renderCropBox();

                }

            }

 

            return this;

        },

        // Clear the crop box

        clear: function clear() {

            if (this.cropped && !this.disabled) {

                assign(this.cropBoxData, {

                    left: 0,

                    top: 0,

                    width: 0,

                    height: 0

                });

                this.cropped = false;

                this.renderCropBox();

                this.limitCanvas(true, true); // Render canvas after crop box rendered

 

                this.renderCanvas();

                removeClass(this.dragBox, CLASS_MODAL);

                addClass(this.cropBox, CLASS_HIDDEN);

            }

 

            return this;

        },

 

        /**

         * Replace the image&#39;s src and rebuild the cropper

         * @param {string} url - The new URL.

         * @param {boolean} [hasSameSize] - Indicate if the new image has the same size as the old one.

         * @returns {Cropper} this

         */

        replace: function replace(url) {

            var hasSameSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;

 

            if (!this.disabled && url) {

                if (this.isImg) {

                    this.element.src = url;

                }

 

                if (hasSameSize) {

                    this.url = url;

                    this.image.src = url;

 

                    if (this.ready) {

                        this.viewBoxImage.src = url;

                        forEach(this.previews, function (element) {

                            element.getElementsByTagName(&#39;img&#39;)[0].src = url;

                        });

                    }

                } else {

                    if (this.isImg) {

                        this.replaced = true;

                    }

 

                    this.options.data = null;

                    this.uncreate();

                    this.load(url);

                }

            }

 

            return this;

        },

        // Enable (unfreeze) the cropper

        enable: function enable() {

            if (this.ready && this.disabled) {

                this.disabled = false;

                removeClass(this.cropper, CLASS_DISABLED);

            }

 

            return this;

        },

        // Disable (freeze) the cropper

        disable: function disable() {

            if (this.ready && !this.disabled) {

                this.disabled = true;

                addClass(this.cropper, CLASS_DISABLED);

            }

 

            return this;

        },

 

        /**

         * Destroy the cropper and remove the instance from the image

         * @returns {Cropper} this

         */

        destroy: function destroy() {

            var element = this.element;

 

            if (!element[NAMESPACE]) {

                return this;

            }

 

            element[NAMESPACE] = undefined;

 

            if (this.isImg && this.replaced) {

                element.src = this.originalUrl;

            }

 

            this.uncreate();

            return this;

        },

 

        /**

         * Move the canvas with relative offsets

         * @param {number} offsetX - The relative offset distance on the x-axis.

         * @param {number} [offsetY=offsetX] - The relative offset distance on the y-axis.

         * @returns {Cropper} this

         */

        move: function move(offsetX) {

            var offsetY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : offsetX;

            var _this$canvasData = this.canvasData,

                left = _this$canvasData.left,

                top = _this$canvasData.top;

            return this.moveTo(isUndefined(offsetX) ? offsetX : left + Number(offsetX), isUndefined(offsetY) ? offsetY : top + Number(offsetY));

        },

 

        /**

         * Move the canvas to an absolute point

         * @param {number} x - The x-axis coordinate.

         * @param {number} [y=x] - The y-axis coordinate.

         * @returns {Cropper} this

         */

        moveTo: function moveTo(x) {

            var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;

            var canvasData = this.canvasData;

            var changed = false;

            x = Number(x);

            y = Number(y);

 

            if (this.ready && !this.disabled && this.options.movable) {

                if (isNumber(x)) {

                    canvasData.left = x;

                    changed = true;

                }

 

                if (isNumber(y)) {

                    canvasData.top = y;

                    changed = true;

                }

 

                if (changed) {

                    this.renderCanvas(true);

                }

            }

 

            return this;

        },

 

        /**

         * Zoom the canvas with a relative ratio

         * @param {number} ratio - The target ratio.

         * @param {Event} _originalEvent - The original event if any.

         * @returns {Cropper} this

         */

        zoom: function zoom(ratio, _originalEvent) {

            var canvasData = this.canvasData;

            ratio = Number(ratio);

 

            if (ratio < 0) {

                ratio = 1 / (1 - ratio);

            } else {

                ratio = 1 + ratio;

            }

 

            return this.zoomTo(canvasData.width * ratio / canvasData.naturalWidth, null, _originalEvent);

        },

 

        /**

         * Zoom the canvas to an absolute ratio

         * @param {number} ratio - The target ratio.

         * @param {Object} pivot - The zoom pivot point coordinate.

         * @param {Event} _originalEvent - The original event if any.

         * @returns {Cropper} this

         */

        zoomTo: function zoomTo(ratio, pivot, _originalEvent) {

            var options = this.options,

                canvasData = this.canvasData;

            var width = canvasData.width,

                height = canvasData.height,

                naturalWidth = canvasData.naturalWidth,

                naturalHeight = canvasData.naturalHeight;

            ratio = Number(ratio);

 

            if (ratio >= 0 && this.ready && !this.disabled && options.zoomable) {

                var newWidth = naturalWidth * ratio;

                var newHeight = naturalHeight * ratio;

 

                if (dispatchEvent(this.element, EVENT_ZOOM, {

                        ratio: ratio,

                        oldRatio: width / naturalWidth,

                        originalEvent: _originalEvent

                    }) === false) {

                    return this;

                }

 

                if (_originalEvent) {

                    var pointers = this.pointers;

                    var offset = getOffset(this.cropper);

                    var center = pointers && Object.keys(pointers).length ? getPointersCenter(pointers) : {

                        pageX: _originalEvent.pageX,

                        pageY: _originalEvent.pageY

                    }; // Zoom from the triggering point of the event

 

                    canvasData.left -= (newWidth - width) * ((center.pageX - offset.left - canvasData.left) / width);

                    canvasData.top -= (newHeight - height) * ((center.pageY - offset.top - canvasData.top) / height);

                } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {

                    canvasData.left -= (newWidth - width) * ((pivot.x - canvasData.left) / width);

                    canvasData.top -= (newHeight - height) * ((pivot.y - canvasData.top) / height);

                } else {

                    // Zoom from the center of the canvas

                    canvasData.left -= (newWidth - width) / 2;

                    canvasData.top -= (newHeight - height) / 2;

                }

 

                canvasData.width = newWidth;

                canvasData.height = newHeight;

                this.renderCanvas(true);

            }

 

            return this;

        },

 

        /**

         * Rotate the canvas with a relative degree

         * @param {number} degree - The rotate degree.

         * @returns {Cropper} this

         */

        rotate: function rotate(degree) {

            return this.rotateTo((this.imageData.rotate || 0) + Number(degree));

        },

 

        /**

         * Rotate the canvas to an absolute degree

         * @param {number} degree - The rotate degree.

         * @returns {Cropper} this

         */

        rotateTo: function rotateTo(degree) {

            degree = Number(degree);

 

            if (isNumber(degree) && this.ready && !this.disabled && this.options.rotatable) {

                this.imageData.rotate = degree % 360;

                this.renderCanvas(true, true);

            }

 

            return this;

        },

 

        /**

         * Scale the image on the x-axis.

         * @param {number} scaleX - The scale ratio on the x-axis.

         * @returns {Cropper} this

         */

        scaleX: function scaleX(_scaleX) {

            var scaleY = this.imageData.scaleY;

            return this.scale(_scaleX, isNumber(scaleY) ? scaleY : 1);

        },

 

        /**

         * Scale the image on the y-axis.

         * @param {number} scaleY - The scale ratio on the y-axis.

         * @returns {Cropper} this

         */

        scaleY: function scaleY(_scaleY) {

            var scaleX = this.imageData.scaleX;

            return this.scale(isNumber(scaleX) ? scaleX : 1, _scaleY);

        },

 

        /**

         * Scale the image

         * @param {number} scaleX - The scale ratio on the x-axis.

         * @param {number} [scaleY=scaleX] - The scale ratio on the y-axis.

         * @returns {Cropper} this

         */

        scale: function scale(scaleX) {

            var scaleY = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : scaleX;

            var imageData = this.imageData;

            var transformed = false;

            scaleX = Number(scaleX);

            scaleY = Number(scaleY);

 

            if (this.ready && !this.disabled && this.options.scalable) {

                if (isNumber(scaleX)) {

                    imageData.scaleX = scaleX;

                    transformed = true;

                }

 

                if (isNumber(scaleY)) {

                    imageData.scaleY = scaleY;

                    transformed = true;

                }

 

                if (transformed) {

                    this.renderCanvas(true, true);

                }

            }

 

            return this;

        },

 

        /**

         * Get the cropped area position and size data (base on the original image)

         * @param {boolean} [rounded=false] - Indicate if round the data values or not.

         * @returns {Object} The result cropped data.

         */

        getData: function getData$$1() {

            var rounded = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

            var options = this.options,

                imageData = this.imageData,

                canvasData = this.canvasData,

                cropBoxData = this.cropBoxData;

            var data;

 

            if (this.ready && this.cropped) {

                data = {

                    x: cropBoxData.left - canvasData.left,

                    y: cropBoxData.top - canvasData.top,

                    width: cropBoxData.width,

                    height: cropBoxData.height

                };

                var ratio = imageData.width / imageData.naturalWidth;

                forEach(data, function (n, i) {

                    data[i] = n / ratio;

                });

 

                if (rounded) {

                    // In case rounding off leads to extra 1px in right or bottom border

                    // we should round the top-left corner and the dimension (#343).

                    var bottom = Math.round(data.y + data.height);

                    var right = Math.round(data.x + data.width);

                    data.x = Math.round(data.x);

                    data.y = Math.round(data.y);

                    data.width = right - data.x;

                    data.height = bottom - data.y;

                }

            } else {

                data = {

                    x: 0,

                    y: 0,

                    width: 0,

                    height: 0

                };

            }

 

            if (options.rotatable) {

                data.rotate = imageData.rotate || 0;

            }

 

            if (options.scalable) {

                data.scaleX = imageData.scaleX || 1;

                data.scaleY = imageData.scaleY || 1;

            }

 

            return data;

        },

 

        /**

         * Set the cropped area position and size with new data

         * @param {Object} data - The new data.

         * @returns {Cropper} this

         */

        setData: function setData$$1(data) {

            var options = this.options,

                imageData = this.imageData,

                canvasData = this.canvasData;

            var cropBoxData = {};

 

            if (this.ready && !this.disabled && isPlainObject(data)) {

                var transformed = false;

 

                if (options.rotatable) {

                    if (isNumber(data.rotate) && data.rotate !== imageData.rotate) {

                        imageData.rotate = data.rotate;

                        transformed = true;

                    }

                }

 

                if (options.scalable) {

                    if (isNumber(data.scaleX) && data.scaleX !== imageData.scaleX) {

                        imageData.scaleX = data.scaleX;

                        transformed = true;

                    }

 

                    if (isNumber(data.scaleY) && data.scaleY !== imageData.scaleY) {

                        imageData.scaleY = data.scaleY;

                        transformed = true;

                    }

                }

 

                if (transformed) {

                    this.renderCanvas(true, true);

                }

 

                var ratio = imageData.width / imageData.naturalWidth;

 

                if (isNumber(data.x)) {

                    cropBoxData.left = data.x * ratio + canvasData.left;

                }

 

                if (isNumber(data.y)) {

                    cropBoxData.top = data.y * ratio + canvasData.top;

                }

 

                if (isNumber(data.width)) {

                    cropBoxData.width = data.width * ratio;

                }

 

                if (isNumber(data.height)) {

                    cropBoxData.height = data.height * ratio;

                }

 

                this.setCropBoxData(cropBoxData);

            }

 

            return this;

        },

 

        /**

         * Get the container size data.

         * @returns {Object} The result container data.

         */

        getContainerData: function getContainerData() {

            return this.ready ? assign({}, this.containerData) : {};

        },

 

        /**

         * Get the image position and size data.

         * @returns {Object} The result image data.

         */

        getImageData: function getImageData() {

            return this.sized ? assign({}, this.imageData) : {};

        },

 

        /**

         * Get the canvas position and size data.

         * @returns {Object} The result canvas data.

         */

        getCanvasData: function getCanvasData() {

            var canvasData = this.canvasData;

            var data = {};

 

            if (this.ready) {

                forEach([&#39;left&#39;, &#39;top&#39;, &#39;width&#39;, &#39;height&#39;, &#39;naturalWidth&#39;, &#39;naturalHeight&#39;], function (n) {

                    data[n] = canvasData[n];

                });

            }

 

            return data;

        },

 

        /**

         * Set the canvas position and size with new data.

         * @param {Object} data - The new canvas data.

         * @returns {Cropper} this

         */

        setCanvasData: function setCanvasData(data) {

            var canvasData = this.canvasData;

            var aspectRatio = canvasData.aspectRatio;

 

            if (this.ready && !this.disabled && isPlainObject(data)) {

                if (isNumber(data.left)) {

                    canvasData.left = data.left;

                }

 

                if (isNumber(data.top)) {

                    canvasData.top = data.top;

                }

 

                if (isNumber(data.width)) {

                    canvasData.width = data.width;

                    canvasData.height = data.width / aspectRatio;

                } else if (isNumber(data.height)) {

                    canvasData.height = data.height;

                    canvasData.width = data.height * aspectRatio;

                }

 

                this.renderCanvas(true);

            }

 

            return this;

        },

 

        /**

         * Get the crop box position and size data.

         * @returns {Object} The result crop box data.

         */

        getCropBoxData: function getCropBoxData() {

            var cropBoxData = this.cropBoxData;

            var data;

 

            if (this.ready && this.cropped) {

                data = {

                    left: cropBoxData.left,

                    top: cropBoxData.top,

                    width: cropBoxData.width,

                    height: cropBoxData.height

                };

            }

 

            return data || {};

        },

 

        /**

         * Set the crop box position and size with new data.

         * @param {Object} data - The new crop box data.

         * @returns {Cropper} this

         */

        setCropBoxData: function setCropBoxData(data) {

            var cropBoxData = this.cropBoxData;

            var aspectRatio = this.options.aspectRatio;

            var widthChanged;

            var heightChanged;

 

            if (this.ready && this.cropped && !this.disabled && isPlainObject(data)) {

                if (isNumber(data.left)) {

                    cropBoxData.left = data.left;

                }

 

                if (isNumber(data.top)) {

                    cropBoxData.top = data.top;

                }

 

                if (isNumber(data.width) && data.width !== cropBoxData.width) {

                    widthChanged = true;

                    cropBoxData.width = data.width;

                }

 

                if (isNumber(data.height) && data.height !== cropBoxData.height) {

                    heightChanged = true;

                    cropBoxData.height = data.height;

                }

 

                if (aspectRatio) {

                    if (widthChanged) {

                        cropBoxData.height = cropBoxData.width / aspectRatio;

                    } else if (heightChanged) {

                        cropBoxData.width = cropBoxData.height * aspectRatio;

                    }

                }

 

                this.renderCropBox();

            }

 

            return this;

        },

 

        /**

         * Get a canvas drawn the cropped image.

         * @param {Object} [options={}] - The config options.

         * @returns {HTMLCanvasElement} - The result canvas.

         */

        getCroppedCanvas: function getCroppedCanvas() {

            var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

 

            if (!this.ready || !window.HTMLCanvasElement) {

                return null;

            }

 

            var canvasData = this.canvasData;

            var source = getSourceCanvas(this.image, this.imageData, canvasData, options); // Returns the source canvas if it is not cropped.

 

            if (!this.cropped) {

                return source;

            }

 

            var _this$getData = this.getData(),

                initialX = _this$getData.x,

                initialY = _this$getData.y,

                initialWidth = _this$getData.width,

                initialHeight = _this$getData.height;

 

            var ratio = source.width / Math.floor(canvasData.naturalWidth);

 

            if (ratio !== 1) {

                initialX *= ratio;

                initialY *= ratio;

                initialWidth *= ratio;

                initialHeight *= ratio;

            }

 

            var aspectRatio = initialWidth / initialHeight;

            var maxSizes = getAdjustedSizes({

                aspectRatio: aspectRatio,

                width: options.maxWidth || Infinity,

                height: options.maxHeight || Infinity

            });

            var minSizes = getAdjustedSizes({

                aspectRatio: aspectRatio,

                width: options.minWidth || 0,

                height: options.minHeight || 0

            }, &#39;cover&#39;);

 

            var _getAdjustedSizes = getAdjustedSizes({

                    aspectRatio: aspectRatio,

                    width: options.width || (ratio !== 1 ? source.width : initialWidth),

                    height: options.height || (ratio !== 1 ? source.height : initialHeight)

                }),

                width = _getAdjustedSizes.width,

                height = _getAdjustedSizes.height;

 

            width = Math.min(maxSizes.width, Math.max(minSizes.width, width));

            height = Math.min(maxSizes.height, Math.max(minSizes.height, height));

            var canvas = document.createElement(&#39;canvas&#39;);

            var context = canvas.getContext(&#39;2d&#39;);

            canvas.width = normalizeDecimalNumber(width);

            canvas.height = normalizeDecimalNumber(height);

            context.fillStyle = options.fillColor || &#39;transparent&#39;;

            context.fillRect(0, 0, width, height);

            var _options$imageSmoothi = options.imageSmoothingEnabled,

                imageSmoothingEnabled = _options$imageSmoothi === void 0 ? true : _options$imageSmoothi,

                imageSmoothingQuality = options.imageSmoothingQuality;

            context.imageSmoothingEnabled = imageSmoothingEnabled;

 

            if (imageSmoothingQuality) {

                context.imageSmoothingQuality = imageSmoothingQuality;

            } // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage

 

 

            var sourceWidth = source.width;

            var sourceHeight = source.height; // Source canvas parameters

 

            var srcX = initialX;

            var srcY = initialY;

            var srcWidth;

            var srcHeight; // Destination canvas parameters

 

            var dstX;

            var dstY;

            var dstWidth;

            var dstHeight;

 

            if (srcX <= -initialWidth || srcX > sourceWidth) {

                srcX = 0;

                srcWidth = 0;

                dstX = 0;

                dstWidth = 0;

            } else if (srcX <= 0) {

                dstX = -srcX;

                srcX = 0;

                srcWidth = Math.min(sourceWidth, initialWidth + srcX);

                dstWidth = srcWidth;

            } else if (srcX <= sourceWidth) {

                dstX = 0;

                srcWidth = Math.min(initialWidth, sourceWidth - srcX);

                dstWidth = srcWidth;

            }

 

            if (srcWidth <= 0 || srcY <= -initialHeight || srcY > sourceHeight) {

                srcY = 0;

                srcHeight = 0;

                dstY = 0;

                dstHeight = 0;

            } else if (srcY <= 0) {

                dstY = -srcY;

                srcY = 0;

                srcHeight = Math.min(sourceHeight, initialHeight + srcY);

                dstHeight = srcHeight;

            } else if (srcY <= sourceHeight) {

                dstY = 0;

                srcHeight = Math.min(initialHeight, sourceHeight - srcY);

                dstHeight = srcHeight;

            }

 

            var params = [srcX, srcY, srcWidth, srcHeight]; // Avoid "IndexSizeError"

 

            if (dstWidth > 0 && dstHeight > 0) {

                var scale = width / initialWidth;

                params.push(dstX * scale, dstY * scale, dstWidth * scale, dstHeight * scale);

            } // All the numerical parameters should be integer for `drawImage`

            // https://github.com/fengyuanchen/cropper/issues/476

 

 

            context.drawImage.apply(context, [source].concat(_toConsumableArray(params.map(function (param) {

                return Math.floor(normalizeDecimalNumber(param));

            }))));

            return canvas;

        },

 

        /**

         * Change the aspect ratio of the crop box.

         * @param {number} aspectRatio - The new aspect ratio.

         * @returns {Cropper} this

         */

        setAspectRatio: function setAspectRatio(aspectRatio) {

            var options = this.options;

 

            if (!this.disabled && !isUndefined(aspectRatio)) {

                // 0 -> NaN

                options.aspectRatio = Math.max(0, aspectRatio) || NaN;

 

                if (this.ready) {

                    this.initCropBox();

 

                    if (this.cropped) {

                        this.renderCropBox();

                    }

                }

            }

 

            return this;

        },

 

        /**

         * Change the drag mode.

         * @param {string} mode - The new drag mode.

         * @returns {Cropper} this

         */

        setDragMode: function setDragMode(mode) {

            var options = this.options,

                dragBox = this.dragBox,

                face = this.face;

 

            if (this.ready && !this.disabled) {

                var croppable = mode === DRAG_MODE_CROP;

                var movable = options.movable && mode === DRAG_MODE_MOVE;

                mode = croppable || movable ? mode : DRAG_MODE_NONE;

                options.dragMode = mode;

                setData(dragBox, DATA_ACTION, mode);

                toggleClass(dragBox, CLASS_CROP, croppable);

                toggleClass(dragBox, CLASS_MOVE, movable);

 

                if (!options.cropBoxMovable) {

                    // Sync drag mode to crop box when it is not movable

                    setData(face, DATA_ACTION, mode);

                    toggleClass(face, CLASS_CROP, croppable);

                    toggleClass(face, CLASS_MOVE, movable);

                }

            }

 

            return this;

        }

    };

 

    var AnotherCropper = WINDOW.Cropper;

 

    var Cropper =

        /*#__PURE__*/

        function () {

            /**

             * Create a new Cropper.

             * @param {Element} element - The target element for cropping.

             * @param {Object} [options={}] - The configuration options.

             */

            function Cropper(element) {

                var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

 

                _classCallCheck(this, Cropper);

 

                if (!element || !REGEXP_TAG_NAME.test(element.tagName)) {

                    throw new Error(&#39;The first argument is required and must be an <img> or <canvas> element.&#39;);

                }

 

                this.element = element;

                this.options = assign({}, DEFAULTS, isPlainObject(options) && options);

                this.cropped = false;

                this.disabled = false;

                this.pointers = {};

                this.ready = false;

                this.reloading = false;

                this.replaced = false;

                this.sized = false;

                this.sizing = false;

                this.init();

            }

 

            _createClass(Cropper, [{

                key: "init",

                value: function init() {

                    var element = this.element;

                    var tagName = element.tagName.toLowerCase();

                    var url;

 

                    if (element[NAMESPACE]) {

                        return;

                    }

 

                    element[NAMESPACE] = this;

 

                    if (tagName === &#39;img&#39;) {

                        this.isImg = true; // e.g.: "img/picture.jpg"

 

                        url = element.getAttribute(&#39;src&#39;) || &#39;&#39;;

                        this.originalUrl = url; // Stop when it&#39;s a blank image

 

                        if (!url) {

                            return;

                        } // e.g.: "http://example.com/img/picture.jpg"

 

 

                        url = element.src;

                    } else if (tagName === &#39;canvas&#39; && window.HTMLCanvasElement) {

                        url = element.toDataURL();

                    }

 

                    this.load(url);

                }

            }, {

                key: "load",

                value: function load(url) {

                    var _this = this;

 

                    if (!url) {

                        return;

                    }

 

                    this.url = url;

                    this.imageData = {};

                    var element = this.element,

                        options = this.options;

 

                    if (!options.rotatable && !options.scalable) {

                        options.checkOrientation = false;

                    } // Only IE10+ supports Typed Arrays

 

 

                    if (!options.checkOrientation || !window.ArrayBuffer) {

                        this.clone();

                        return;

                    } // XMLHttpRequest disallows to open a Data URL in some browsers like IE11 and Safari

 

 

                    if (REGEXP_DATA_URL.test(url)) {

                        if (REGEXP_DATA_URL_JPEG.test(url)) {

                            this.read(dataURLToArrayBuffer(url));

                        } else {

                            this.clone();

                        }

 

                        return;

                    }

 

                    var xhr = new XMLHttpRequest();

                    var clone = this.clone.bind(this);

                    this.reloading = true;

                    this.xhr = xhr;

                    xhr.ontimeout = clone;

                    xhr.onabort = clone;

                    xhr.onerror = clone;

 

                    xhr.onprogress = function () {

                        if (xhr.getResponseHeader(&#39;content-type&#39;) !== MIME_TYPE_JPEG) {

                            xhr.abort();

                        }

                    };

 

                    xhr.onload = function () {

                        _this.read(xhr.response);

                    };

 

                    xhr.onloadend = function () {

                        _this.reloading = false;

                        _this.xhr = null;

                    }; // Bust cache when there is a "crossOrigin" property to avoid browser cache error

 

 

                    if (options.checkCrossOrigin && isCrossOriginURL(url) && element.crossOrigin) {

                        url = addTimestamp(url);

                    }

 

                    xhr.open(&#39;GET&#39;, url);

                    xhr.responseType = &#39;arraybuffer&#39;;

                    xhr.withCredentials = element.crossOrigin === &#39;use-credentials&#39;;

                    xhr.send();

                }

            }, {

                key: "read",

                value: function read(arrayBuffer) {

                    var options = this.options,

                        imageData = this.imageData;

                    var orientation = resetAndGetOrientation(arrayBuffer);

                    var rotate = 0;

                    var scaleX = 1;

                    var scaleY = 1;

 

                    if (orientation > 1) {

                        // Generate a new Data URL with the orientation value set to 1

                        // as some iOS browsers will render image with its orientation

                        this.url = arrayBufferToDataURL(arrayBuffer, MIME_TYPE_JPEG);

 

                        var _parseOrientation = parseOrientation(orientation);

 

                        rotate = _parseOrientation.rotate;

                        scaleX = _parseOrientation.scaleX;

                        scaleY = _parseOrientation.scaleY;

                    }

 

                    if (options.rotatable) {

                        imageData.rotate = rotate;

                    }

 

                    if (options.scalable) {

                        imageData.scaleX = scaleX;

                        imageData.scaleY = scaleY;

                    }

 

                    this.clone();

                }

            }, {

                key: "clone",

                value: function clone() {

                    var element = this.element,

                        url = this.url;

                    var crossOrigin;

                    var crossOriginUrl;

 

                    if (this.options.checkCrossOrigin && isCrossOriginURL(url)) {

                        crossOrigin = element.crossOrigin;

 

                        if (crossOrigin) {

                            crossOriginUrl = url;

                        } else {

                            crossOrigin = &#39;anonymous&#39;; // Bust cache when there is not a "crossOrigin" property

 

                            crossOriginUrl = addTimestamp(url);

                        }

                    }

 

                    this.crossOrigin = crossOrigin;

                    this.crossOriginUrl = crossOriginUrl;

                    var image = document.createElement(&#39;img&#39;);

 

                    if (crossOrigin) {

                        image.crossOrigin = crossOrigin;

                    }

 

                    image.src = crossOriginUrl || url;

                    this.image = image;

                    image.onload = this.start.bind(this);

                    image.onerror = this.stop.bind(this);

                    addClass(image, CLASS_HIDE);

                    element.parentNode.insertBefore(image, element.nextSibling);

                }

            }, {

                key: "start",

                value: function start() {

                    var _this2 = this;

 

                    var image = this.isImg ? this.element : this.image;

                    image.onload = null;

                    image.onerror = null;

                    this.sizing = true;

                    var IS_SAFARI = WINDOW.navigator && /(Macintosh|iPhone|iPod|iPad).*AppleWebKit/i.test(WINDOW.navigator.userAgent);

 

                    var done = function done(naturalWidth, naturalHeight) {

                        assign(_this2.imageData, {

                            naturalWidth: naturalWidth,

                            naturalHeight: naturalHeight,

                            aspectRatio: naturalWidth / naturalHeight

                        });

                        _this2.sizing = false;

                        _this2.sized = true;

 

                        _this2.build();

                    }; // Modern browsers (except Safari)

 

 

                    if (image.naturalWidth && !IS_SAFARI) {

                        done(image.naturalWidth, image.naturalHeight);

                        return;

                    }

 

                    var sizingImage = document.createElement(&#39;img&#39;);

                    var body = document.body || document.documentElement;

                    this.sizingImage = sizingImage;

 

                    sizingImage.onload = function () {

                        done(sizingImage.width, sizingImage.height);

 

                        if (!IS_SAFARI) {

                            body.removeChild(sizingImage);

                        }

                    };

 

                    sizingImage.src = image.src; // iOS Safari will convert the image automatically

                    // with its orientation once append it into DOM (#279)

 

                    if (!IS_SAFARI) {

                        sizingImage.style.cssText = &#39;left:0;&#39; + &#39;max-height:none!important;&#39; + &#39;max-width:none!important;&#39; + &#39;min-height:0!important;&#39; + &#39;min-width:0!important;&#39; + &#39;opacity:0;&#39; + &#39;position:absolute;&#39; + &#39;top:0;&#39; + &#39;z-index:-1;&#39;;

                        body.appendChild(sizingImage);

                    }

                }

            }, {

                key: "stop",

                value: function stop() {

                    var image = this.image;

                    image.onload = null;

                    image.onerror = null;

                    image.parentNode.removeChild(image);

                    this.image = null;

                }

            }, {

                key: "build",

                value: function build() {

                    if (!this.sized || this.ready) {

                        return;

                    }

 

                    var element = this.element,

                        options = this.options,

                        image = this.image; // Create cropper elements

 

                    var container = element.parentNode;

                    var template = document.createElement(&#39;div&#39;);

                    template.innerHTML = TEMPLATE;

                    var cropper = template.querySelector(".".concat(NAMESPACE, "-container"));

                    var canvas = cropper.querySelector(".".concat(NAMESPACE, "-canvas"));

                    var dragBox = cropper.querySelector(".".concat(NAMESPACE, "-drag-box"));

                    var cropBox = cropper.querySelector(".".concat(NAMESPACE, "-crop-box"));

                    var face = cropBox.querySelector(".".concat(NAMESPACE, "-face"));

                    this.container = container;

                    this.cropper = cropper;

                    this.canvas = canvas;

                    this.dragBox = dragBox;

                    this.cropBox = cropBox;

                    this.viewBox = cropper.querySelector(".".concat(NAMESPACE, "-view-box"));

                    this.face = face;

                    canvas.appendChild(image); // Hide the original image

 

                    addClass(element, CLASS_HIDDEN); // Inserts the cropper after to the current image

 

                    container.insertBefore(cropper, element.nextSibling); // Show the image if is hidden

 

                    if (!this.isImg) {

                        removeClass(image, CLASS_HIDE);

                    }

 

                    this.initPreview();

                    this.bind();

                    options.initialAspectRatio = Math.max(0, options.initialAspectRatio) || NaN;

                    options.aspectRatio = Math.max(0, options.aspectRatio) || NaN;

                    options.viewMode = Math.max(0, Math.min(3, Math.round(options.viewMode))) || 0;

                    addClass(cropBox, CLASS_HIDDEN);

 

                    if (!options.guides) {

                        addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-dashed")), CLASS_HIDDEN);

                    }

 

                    if (!options.center) {

                        addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-center")), CLASS_HIDDEN);

                    }

 

                    if (options.background) {

                        addClass(cropper, "".concat(NAMESPACE, "-bg"));

                    }

 

                    if (!options.highlight) {

                        addClass(face, CLASS_INVISIBLE);

                    }

 

                    if (options.cropBoxMovable) {

                        addClass(face, CLASS_MOVE);

                        setData(face, DATA_ACTION, ACTION_ALL);

                    }

 

                    if (!options.cropBoxResizable) {

                        addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-line")), CLASS_HIDDEN);

                        addClass(cropBox.getElementsByClassName("".concat(NAMESPACE, "-point")), CLASS_HIDDEN);

                    }

 

                    this.render();

                    this.ready = true;

                    this.setDragMode(options.dragMode);

 

                    if (options.autoCrop) {

                        this.crop();

                    }

 

                    this.setData(options.data);

 

                    if (isFunction(options.ready)) {

                        addListener(element, EVENT_READY, options.ready, {

                            once: true

                        });

                    }

 

                    dispatchEvent(element, EVENT_READY);

                }

            }, {

                key: "unbuild",

                value: function unbuild() {

                    if (!this.ready) {

                        return;

                    }

 

                    this.ready = false;

                    this.unbind();

                    this.resetPreview();

                    this.cropper.parentNode.removeChild(this.cropper);

                    removeClass(this.element, CLASS_HIDDEN);

                }

            }, {

                key: "uncreate",

                value: function uncreate() {

                    if (this.ready) {

                        this.unbuild();

                        this.ready = false;

                        this.cropped = false;

                    } else if (this.sizing) {

                        this.sizingImage.onload = null;

                        this.sizing = false;

                        this.sized = false;

                    } else if (this.reloading) {

                        this.xhr.onabort = null;

                        this.xhr.abort();

                    } else if (this.image) {

                        this.stop();

                    }

                }

                /**

                 * Get the no conflict cropper class.

                 * @returns {Cropper} The cropper class.

                 */

 

            }], [{

                key: "noConflict",

                value: function noConflict() {

                    window.Cropper = AnotherCropper;

                    return Cropper;

                }

                /**

                 * Change the default options.

                 * @param {Object} options - The new default options.

                 */

 

            }, {

                key: "setDefaults",

                value: function setDefaults(options) {

                    assign(DEFAULTS, isPlainObject(options) && options);

                }

            }]);

 

            return Cropper;

        }();

 

    assign(Cropper.prototype, render, preview, events, handlers, change, methods);

 

    return Cropper;

 

})));

 

cropper-js

Copier après la connexion

cropper-jquery-js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

/*!

 * jQuery Cropper v1.0.0

 * https://github.com/fengyuanchen/jquery-cropper

 *

 * Copyright (c) 2018 Chen Fengyuan

 * Released under the MIT license

 *

 * Date: 2018-04-01T06:20:13.168Z

 */

 

(function (global, factory) {

    typeof exports === &#39;object&#39; && typeof module !== &#39;undefined&#39; ? factory(require(&#39;jquery&#39;), require(&#39;cropperjs&#39;)) :

        typeof define === &#39;function&#39; && define.amd ? define([&#39;jquery&#39;, &#39;cropperjs&#39;], factory) :

            global.layui && layui.define ? layui.define([&#39;jquery&#39;, &#39;cropper&#39;], function (exports) {

                    exports(&#39;jqcropper&#39;, factory(layui.jquery, layui.cropper))

                }) :

                (factory(global.jQuery, global.Cropper));

}(this, (function ($, Cropper) {

    &#39;use strict&#39;;

 

    $ = $ && $.hasOwnProperty(&#39;default&#39;) ? $[&#39;default&#39;] : $;

    Cropper = Cropper && Cropper.hasOwnProperty(&#39;default&#39;) ? Cropper[&#39;default&#39;] : Cropper;

 

    if ($.fn) {

        var AnotherCropper = $.fn.cropper;

        var NAMESPACE = &#39;cropper&#39;;

 

        $.fn.cropper = function jQueryCropper(option) {

            for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

                args[_key - 1] = arguments[_key];

            }

 

            var result = void 0;

 

            this.each(function (i, element) {

                var $element = $(element);

                var isDestroy = option === &#39;destroy&#39;;

                var cropper = $element.data(NAMESPACE);

 

                if (!cropper) {

                    if (isDestroy) {

                        return;

                    }

 

                    var options = $.extend({}, $element.data(), $.isPlainObject(option) && option);

 

                    cropper = new Cropper(element, options);

                    $element.data(NAMESPACE, cropper);

                }

 

                if (typeof option === &#39;string&#39;) {

                    var fn = cropper[option];

 

                    if ($.isFunction(fn)) {

                        result = fn.apply(cropper, args);

 

                        if (result === cropper) {

                            result = undefined;

                        }

 

                        if (isDestroy) {

                            $element.removeData(NAMESPACE);

                        }

                    }

                }

            });

 

            return result !== undefined ? result : this;

        };

 

        $.fn.cropper.Constructor = Cropper;

        $.fn.cropper.setDefaults = Cropper.setDefaults;

        $.fn.cropper.noConflict = function noConflict() {

            $.fn.cropper = AnotherCropper;

            return this;

        };

    }

 

})));

 

cropper-jquery

Copier après la connexion

实现图片裁剪的代码

裁剪HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="{{static_url(&#39;layui/css/layui.css&#39;)}}" media="all">

    <link rel="stylesheet" href="{{static_url(&#39;cropper/cropper.css&#39;)}}">

    <style>

        #choice-btn {

            display: inline-block;

            height: 38px;

            line-height: 38px;

            padding: 0 18px;

            background-color: #009688;

            color: #fff;

            white-space: nowrap;

            text-align: center;

            font-size: 14px;

            border: none;

            border-radius: 2px;

            cursor: pointer;

        }

    </style>

</head>

<body>

<div style="margin: 20px;">

    <div style="margin-bottom:30px;">

        <label for="cropper_imgUpload">

            <span id="choice-btn"><i>&#xe67c;</i>选择图片</span>

        </label>

        <input type="file" id="cropper_imgUpload" name="file" style="display:none" accept="image/*">

    </div>

    <div class="layui-row layui-col-space15">

        <div>

            <div id="readyimg"

                 style="height: 360px;width: 100%;border: 1px dashed black;background-color: rgb(247, 247, 247);">

                <img id="img" src="" alt="">

            </div>

        </div>

        <div>

            <div>预览:</div>

            <div id="img-preview" style="width: 180px;height: 120px;overflow: hidden;border: 1px dashed black;">

            </div>

        </div>

    </div>

    <div class="layui-row layui-hide oper-btn" style="margin-top: 20px;">

        <div>

            <button type="button" class="layui-btn layui-icon layui-icon-left" cropper-event="rotate" data-option="-15"

                    title="Rotate -90 degrees"> 向左旋转

            </button>

            <button type="button" class="layui-btn layui-icon layui-icon-right" cropper-event="rotate" data-option="15"

                    title="Rotate 90 degrees"> 向右旋转

            </button>

            <button type="button" class="layui-btn layui-icon layui-icon-refresh" cropper-event="reset"

                    title="reset-image">重置图片

            </button>

        </div>

        <div class="layui-col-xs2 layui-col-xs-offset1">

            <button type="button" class="layui-btn layui-btn-fluid" id="keep-save" cropper-event="confirmSave">保存修改

            </button>

        </div>

    </div>

</div>

 

<script src="{{static_url(&#39;layui/layui.js&#39;)}}" charset="utf-8"></script>

<script>

    layui.config({

        base: &#39;/static/cropper/&#39;

    }).extend({

        cropper: &#39;cropper&#39;

    }).use([&#39;element&#39;, &#39;layer&#39;, &#39;cropper&#39;, &#39;jquery&#39;, &#39;jqcropper&#39;], function () {

        var element = layui.element;

        var $ = layui.jquery;

        var layer = layui.layer;

        var cropper = layui.cropper;

 

        var imageEle = $("#img")

            , preview = &#39;#img-preview&#39;

            , file = $("input[name=&#39;file&#39;]")

            , uploadImageMaxSize = 2048 //文件上传大小限制

            , options = {

            aspectRatio: 3 / 2,

            viewMode: 1,

            preview: preview,

            dragMode: &#39;none&#39;,

            responsive: false,

            restore: false

            // cropBoxMovable:false,

            // cropBoxResizable:false,

        };

        // 找到上传图片的input标签绑定change事件

        $("#cropper_imgUpload").change(function () {

            $(".oper-btn").removeClass("layui-hide");

            // 1. 创建一个读取文件的对象

            var fileReader = new FileReader();

            fileReader.readAsDataURL(this.files[0]);

            fileReader.onload = function () {

                // 2. 等上一步读完文件之后才 把图片加载到img标签中

                imageEle.attr("src", fileReader.result); //图片链接(base64)

                imageEle.cropper(options);

            };

        });

 

        $(".layui-btn").on(&#39;click&#39;, function () {

            var event = $(this).attr("cropper-event");

            //监听确认保存图像

            if (event === &#39;confirmSave&#39;) {

                imageEle.cropper("getCroppedCanvas").toBlob(function (blob) {

                    var filesize = (blob["size"] / 1024).toFixed(2);

                    if (filesize < uploadImageMaxSize) {

                        var formData = new FormData();

                        formData.append(&#39;file&#39;, blob);

 

                        $.ajax({

                            method: "post",

                            url: &#39;/web/api/upload/upload?option={{option}}&#39;, //用于文件上传的服务器端请求地址

                            data: formData,

                            processData: false,

                            contentType: false,

                            success: function (response) {

                                if (response.code === 0) {

                                    // 代开裁剪页面的回调函数

                                    parent.cropperCallback(response.data, &#39;{{index}}&#39;);

                                    layer.msg("上传成功", {

                                        icon: 1,

                                        time: 2500 // 默认三秒

                                    }, function () {

                                        // 回调关闭弹出层

                                        var index = parent.layer.getFrameIndex(window.name);

                                        parent.layer.close(index);

                                    });

                                    $(".canvanslog").attr("src", response.data[0].fp_show);

                                } else {

                                    layer.alert(response.msg, {icon: 2});

                                }

                            },

                            error: function (response) {

                                layer.alert("网络异常", {icon: 2});

                            }

                        });

                    } else {

                        layer.alert("上传图片大小不超过" + uploadImageMaxSize + "KB", {icon: 2})

                    }

                });

            } else if (event === &#39;rotate&#39;) {

                //监听旋转

                var option = $(this).attr(&#39;data-option&#39;);

                imageEle.cropper(&#39;rotate&#39;, option);

            } else if (event === &#39;reset&#39;) {

                //重设图片

                imageEle.cropper(&#39;reset&#39;);

            }

        });

    });

</script>

</body>

</html>

 

cropper-html

Copier après la connexion

父页面的回调

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

// 图片上传成功回调函数

    function cropperCallback(response, index) {

        if (response) {

            var inputEle = document.getElementById("imgInput");

            if (index === "None") {

                // 添加图片的回调

                var trEle = document.createElement("tr");

                var addImageIndex = totalArray.length;

                trEle.innerHTML = &#39;<td><img src="&#39; + response[0].fp_show + &#39;" alt=""></td><td><span style="color: #5FB878;">添加成功</span></td><td>&#39; +

                    &#39;<button type="button" class="layui-btn layui-btn-sm edit-btn" id="edit_&#39; + addImageIndex + &#39;">修改</button>&#39; +

                    &#39;<button type="button" class="layui-btn layui-btn-sm delete-btn" id="delete_&#39; + addImageIndex + &#39;">删除</button></td>&#39;;

                document.getElementById("imgList").appendChild(trEle);

                totalArray.push(response[0].fp_relative);

            } else {

                // 修改图片的回调

                var thisTrChild = document.getElementById("edit_" + index).parentElement.parentElement.children;

                thisTrChild[0].innerHTML = &#39;<img src="&#39; + response[0].fp_show + &#39;" alt="">&#39;;

                thisTrChild[1].innerHTML = &#39;<span style="color: #5FB878;">修改成功</span>&#39;;

                totalArray[parseInt(index)] = response[0].fp_relative;

            }

            inputEle.value = totalArray.join(",");

        }

    }

Copier après la connexion

更多layui知识请关注layui使用教程栏目。

出处:https://www.cnblogs.com/zhaopanpan/

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal