1

我正在使用 AR.JS 生成器，并且每次加载页面时都尝试制作自定义模式，通常您必须上传自己的中心图像，但我想通过它自动生成。我正在使用一个名为 qrserver 的 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'
}
4

0 回答 0