前提・実現したいこと
Monacaを使用してアプリを作成しています。
Cordova Cameraプラグインを使用して、アルバムから取得した画像をCanvasに貼り付け、端末内にFileプラグインで保存したいと考えています。
発生している問題・エラーメッセージ
Canvasのデータをcanvas.toDataURL
で変換しようとすると、以下のようなエラーがでて、画像を「DataURL」に変換できません。
SecurityError: The operation is insecure.
該当のソースコード
Vue
1// Canvas.vue 2<template> 3 <canvas ref="canvas" witdh="300" height="300"></canvas> 4</template> 5 6<script> 7 export default { 8 data: function() { 9 return { 10 cvs: null, 11 ctx: null, 12 picImg: null 13 } 14 }, 15 mounted: function() { 16 this.cvs = this.$refs.canvas 17 this.ctx = this.cvs.getContext('2d') 18 }, 19 methods: { 20 // 写真の取得:親コンポーネントから呼び出し 21 getPic: function() { 22 let self = this 23 let options = { 24 quality: 30, 25 sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 26 destinationType: Camera.DestinationType.FILE_URI, 27 encodingType: Camera.EncodingType.JPEG, 28 correctOrientation: true 29 } 30 // Cameraプラグイン 31 document.addEventListener('deviceready', function() { 32 navigator.camera.getPicture(function(imageData) { 33 self.shwPic(imageData) 34 }, self.cameraFail, options) 35 }) 36 }, 37 shwPic: function(imageData) { 38 let self = this 39 self.picImg = new Image() 40 // self.picImg.crossOrigin = '' 41 self.picImg.src = imageData 42 self.picImg.onload = function() { 43 // CANVASに描画 44 self.ctx.drawImage(self.picImg, 0, 0) 45 let dataURI = '' 46 try { 47 dataURI = self.cvs.toDataURL('image/png') 48 // localStorage.setItem('xxx', self.cvs.toDataURL('image/png')) これもエラーが出ます 49 } 50 catch (e) { 51 alert(e) // ここで上記のエラーが発生 52 } 53 } 54 }, 55 cameraFail: function() { 56 alert('読み込みエラー') 57 } 58 } 59 }
試したこと
CORSの問題かと思い、上記のコードでコメントアウトしているself.picImg.crossOrigin = ''
やself.picImg.crossOrigin = 'Anonymous'
を記載してみましたが、これを入れると、Canvasに画像が表示されなくなってしまいました。
また、「config.xml」には<access origin="*"/>
が記載されていることを確認しました。
補足情報(FW/ツールのバージョンなど)
改版のため、リリース前にデバッグビルドして確認したところ、この問題に気がつきました。
1ヶ月くらい前に、一つ前のバージョンをリリースしたときは、この問題は確認できませんでした。そのあと、ここのコードは変更していません。
デバックビルドし、iPhone 6s(iOS: 13.7)にインストールして確認しています。カスタムデバッガーでは問題なく、DataURLに変換できます。
Cordova カメラプラグイン ver.4.1.0(最新の5.0にすると、自分の環境では動作しなくなる)を使用しています。
Monaca IDEで、WebViewエンジンは「VKWebView」に設定しています。
どうか、アドバイスをよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。