Question

我正在使用AR.JS生成器，并且每次加载页面时我都试图创建一个自定义模式，通常您必须上传自己的中心图像，但是我想以此来使其自动生成。我正在使用一个名为qrserver的api，该API会为您创建一个QR码，并允许您使用它，但是不幸的是，当我使用整个图像视图下方的代码时，它不会显示。通常，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'
}

每次不起作用的AR.JS新模式

0 个答案: