Q&A
jqueryプラグイン「Cropper」での画像回転について教えてください。
以下のコードを試しました。
cropする範囲指定ができる画面は表示されたのですが、画像が回転されていません。
▼試したコード▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
<html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- ↓ https://github.com/fengyuanchen/cropper のCropper v4.0.0を読み込み --> <script src="js/cropper.js"></script> <link rel="stylesheet" href="js/cropper.css"> <script> window.onload = function() { $('#image').cropper({ checkOrientation: true, rotatable: true, scalable: true }); /* ↓これで回転するかと思いましたが回転せず。エラーも出力はされていないです */ $('#image').cropper('rotate',45); } </script> <style> /* Limit image width to avoid overflow the container */ img { max-width: 100%; /* This rule is very important, please do not ignore this! */ } </style> </head> <body> <!-- Wrap the image or canvas element with a block element (container) --> <div> <img id="image" src="picture.jpg"> </div> </body> </html> ▲ここまで▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲どのような記述をすれば、画像を指定した値で回転させることができるのでしょうか？
CropperのMethod説明を元に以下の記述をすると、回転させることはできるのですが、初心者なもので、毎回 new Cropper(...) を記述する方法しか思い浮かびません。
new Cropper(image, {
ready() {
this.cropper.rotate(45);
},
});
$hoge = new Cropper(image, {
ready() {
this.cropper.rotate(45);
},
}); と記述して、$hoge.rotate(45)や、$hoge.cropper.rotate(45)と書けば良いのかと思いましたが、上手くいきませんでした。。。
どなたか回転のさせ方をご存知の方がおられれば教えていただけないでしょうか。
回答1件
0
ベストアンサー
手元で試すためにライブラリをすべてCDNで指定したら、回転しました。
ライブラリの指定先が間違っているのではないでしょうか。
html
1<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.css" rel="stylesheet" type="text/css" media="all"/> 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 3<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/1.0.0/cropper.min.js"></script> 4<style> 5 img { max-width: 100%; } 6</style> 7<div> 8 <img id="image" src="https://4.bp.blogspot.com/-M2bIrEvy6zE/WNJ_fjSOMxI/AAAAAAAAAEQ/ZExEoruGGe8MFr6b5Q0Owk3B0ALx9F72ACLcB/s1600/icon.png"> 9</div>
javascript
1window.onload = function() { 2$('#image').cropper({ 3checkOrientation: true, 4rotatable: true, 5scalable: true 6}); 7/* 回転しました */ 8$('#image').cropper('rotate',45); 9}
投稿2018/06/30 00:00
総合スコア337
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/01 22:41