canvas panorama

you can change the function draw_grid in canvas.js to insert your pano image:

modified draw_grid:

    function draw_grid() {
        var image = new Image();
        image.src = 'yourpano.jpg';
        image.onload = function () {
            var ctx = canvas_context = canvas.getContext("2d");
            ctx.drawImage(image, 0, 0, canvas_width, canvas_height);
        };
    }

Quote from zhitongjia

Thank you for your reply. What I want to achieve is to draw on the panoramic view. The solution I came up with is a transparent background and synchronized perspective, as hotspots cannot fill the screen, or the layer drawing board can partially meet the requirements

not sure if I understand, but the solution above allows you to draw on your panoramic view. just replace "yourpano.jpg" with yours

Quote from VRME

you can change the function draw_grid in canvas.js to insert your pano image:

JavaScript: canvas.js

modified draw_grid:

    function draw_grid() {
        var image = new Image();
        image.src = 'yourpano.jpg';
        image.onload = function () {
            var ctx = canvas_context = canvas.getContext("2d");
            ctx.drawImage(image, 0, 0, canvas_width, canvas_height);
        };
    }

Hello, I have loaded it according to your method, but I cannot render the image. I saw in the devtool of the browser that the image resources have already been loaded. Why is this

Quote from cbiu

Hello, I have loaded it according to your method, but I cannot render the image. I saw in the devtool of the browser that the image resources have already been loaded. Why is this

This issue has been resolved。
The code 'if (plugin. invideoreadyCB) plugin. onovideoreadyCB()' needs to be placed in the onload and executed after drawing the image。

like this:

function draw_grid() {
        var image = new Image();
        image.src = 'yourpano.jpg';
        image.onload = function () {
            var ctx = canvas_context = canvas.getContext("2d");
            ctx.drawImage(image, 0, 0, canvas_width, canvas_height);
            
            if (plugin. invideoreadyCB) plugin. onovideoreadyCB() 
        };
    }