はじめに

CropperjsのVueラッパーコンポーネントである、vue-cropperjsのsetDataメソッドが一部の環境で動かなず、苦戦したので記事にしました。

起こった現象

setDataメソッドがPCでは問題なく動作するが、スマホだと動作したりしなかったりと不安定な挙動をしました。

解決策

CropperjsのsetDataメソッドの説明で「Note: This method only available when the value of the viewMode option is greater than or equal to 1.」
つまり「viewModeオプションが1以上だと使用できる」と書かれています。

viewModeオプションはデフォルトだと0に設定されているため、この設定を2にしたら無事スマホでも安定して動作しました。

viewModeオプションの内容や、setDataに関しては、公式ライブラリのREADMEを確認してください。
私は確認を怠ったため苦戦してしまいました...

まとめ

PCでは問題なく動作していた機能をスマホで試したら全然動かなかったのでとても焦り、問題個所を探し出すのも大変になってしまいました。

今後は公式ドキュメントをちゃんと読んでから実装するよう心掛けたいと思います。

この記事は以下の情報を参考にして執筆しました。