JSライブラリを1日1つ紹介する
1日1つJSのライブラリを調べます!
① ライブラリに関するドキュメントを最初から最後まで読む
② 実際に使ってみる or 使い方を調べる
③ ライブラリを3行で説明する
本日は、Cropper.jsのドキュメントを読んで実際に業務で使っているところを調べました。
実際に使ってみる
今回は、codepenを参考にさせていただきました!
https://codepen.io/amalajith/pen/VWjydm
<!DOCTYPE html> <html lang="ja"> <style> img { display: block; /* This rule is very important, please don't ignore this */ max-width: 100%; } </style> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script> </head> <body> <div> <img id="image" src="neko.jpg"> </div> </body> <script> var image = document.getElementById('image'); var cropper = new Cropper(image, { aspectRatio: 16 / 9, crop: function(e) { console.log(e.detail.x); console.log(e.detail.y); console.log(e.detail.width); console.log(e.detail.height); console.log(e.detail.rotate); console.log(e.detail.scaleX); console.log(e.detail.scaleY); } }); function crop() { cropper.getCroppedCanvas().toBlob(function (blob) { var formData = new FormData(); formData.append('croppedImage', blob); // Use `jQuery.ajax` method $.ajax('/path/to/upload', { method: "POST", data: formData, processData: false, contentType: false, success: function () { console.log('Upload success'); }, error: function () { console.log('Upload error'); } }); }); } </script> </html>
こんな感じで、画像のトリミング範囲が選択できるようになりました。
一言でいうと
Cropper.jsを導入すると、
- 画像のトリミング、回転、ズームなどができるようになる
フィードバック
---
以上です!