0
次のコードでは角度付きではなくキャンバスにファイルを描画できますが、Angular SPA用のビューに同じコードを書き込むと動作しないようです。私は非常に角度があります。この組み合わせは許可されていませんか？それとも別のことをやっているのですか？この質問が非常に基本的な場合は謝罪してください。Angularjと通常のJavascript関数が一緒に機能しませんか？
<div class ="container"> <div class="jumbotron">
<p> <h3>Claim your token here</h3> </p>
<p> Click a picture of the QR Code: </p>
<!-- <p>
<input type="text" ng-model="tokenId">
</p> -->
<p>
<input type="file" capture="camera" accept="image/*" id="camsource" name="camsource">
</p>
<p>
<canvas id="qr-canvas" width="300" height="300" style="border:1px solid #d3d3d3;"></canvas>
</p>
<p>
<button type="submit" class="btn btn-default" role="button" onclick="myFunction()">Decode QrCode</button> </p>
<p>
<button type="submit" class="btn btn-default" role="button" ng-click="claimToken()">
{{claimButtonText}}
</button>
</p>
<p>
<button class="btn btn-default" role="button" ng-click="goToProfile()">
Back to Profile
</button>
</p>
<p><h6 id="qr-value"></h6></p>
<p>{{claimTokenStatus}}</p> </div> </div>
<script>
window.onload = function() {
var input = document.getElementById('camsource');
input.addEventListener('change', handleFiles, false); }
function handleFiles(e) {
var canvas = document.getElementById('qr-canvas')
var ctx = canvas.getContext('2d');
var url = URL.createObjectURL(e.target.files[0]);
var img = new Image();
img.src = url;
img.onload = function() {
ctx.drawImage(img, 0, 0, 300, 300);
} } </script>
あなたは 'ng-app/ng-controller'をどこで呼びますか？ – developer033
これはうまくいきますが、この部分をレンダリングする前にウィンドウがすでに読み込まれているため、このコードを 'window.onload'と一緒に部分的に配置することはできません。このスクリプトをメインのインデックスページに配置するか、部分ビューがレンダリングされた後に読み込む角度指示にラップする必要があります。 – Claies
@ developer033、私はindex.htmlでメニューの一番上のバーをロードしています。 index.htmlファイルは '
'を呼び出し、ルーティングはview3.jsを使用して行われます。 _italic_ ** bold ** ''use strict'; angular.module（ 'myApp.view3'、[ 'ngRoute'、 'て、myApp']） の.config（[ '$ routeProvider'、関数（$ routeProvider）{ $ routeProvider.when（ '/ view3'、 { templateUrl： 'view3/view3.html'、 コントローラ： 'View3Ctrl' }）; }]） ' –