javascript - AR.JS 毎回新しいパターンが機能しない

Question

私は AR.JS ジェネレーターを使用しており、ページが読み込まれるたびにカスタム パターンを作成しようとしています。通常は独自のセンター イメージをアップロードする必要がありますが、これを使用して自動生成するようにしたいと考えています。QRコードを作成して使用できるqrserverというAPIを使用していますが、残念ながら下のコードを使用すると画像ビュー全体が表示されません。通常、src は、ファイル ディレクトリにある「example.png」というファイルを取り込みます。

これを行うための解決策または他の方法はありますか??

THREEx.ArPatternFile.buildFullMarker =  function(innerImageURL, pattRatio, onComplete){
    var whiteMargin = 0.1
    var blackMargin = (1 - 2 * whiteMargin) * ((1-pattRatio)/2)
    // var blackMargin = 0.2

    var innerMargin = whiteMargin + blackMargin

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d')
    canvas.width = canvas.height = 512

    context.fillStyle = 'white';
    context.fillRect(0,0,canvas.width, canvas.height)

    // copy image on canvas
    context.fillStyle = 'black';
    context.fillRect(
        whiteMargin * canvas.width,
        whiteMargin * canvas.height,
        canvas.width * (1-2*whiteMargin),
        canvas.height * (1-2*whiteMargin)
    );

    // clear the area for innerImage (in case of transparent image)
    context.fillStyle = 'white';
    context.fillRect(
        innerMargin * canvas.width,
        innerMargin * canvas.height,
        canvas.width * (1-2*innerMargin),
        canvas.height * (1-2*innerMargin)
    );


    // display innerImage in the middle
    var innerImage = document.createElement('img')
    innerImage.addEventListener('load', function(){
        // draw innerImage
        context.drawImage(innerImage,
            innerMargin * canvas.width,
            innerMargin * canvas.height,
            canvas.width * (1-2*innerMargin),
            canvas.height * (1-2*innerMargin)
        );

        var imageUrl = canvas.toDataURL()
        onComplete(imageUrl)
    })
    innerImage.src = 'https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=test'
}