HTML5 render texture - how to screenshot a portion of the screen and use it as texture

Questions
#1

Hi

We’re trying to make the following effect with Defold

  • the game has a phone camera simulation
  • when the player click the “shutter” button, it’d snap a portion of the screen and use it as a texture on another game object


This is the closest thing to a good solution, but on HTML5 it can only output to PNG

Is there a solution to achieve this without getting too technical with shader stuff?

#2

You can make buffer from png data.
Some code from my project, that can help.

Use png extension. https://github.com/britzl/defold-png

function Matcher:buffer_from_img_data(img_data)
    if (self.buffer) then
        drawpixels.buffer_destroy(self.buffer)
    end
    self.buffer, self.w, self.h = png.decode_rgba(img_data, false)
    self:buffer_changed()
end

screenshot.html5(x, y, self.w, self.h, function(_, base64)
                base64 = string.sub(base64, 23)
                img_data = dec64(base64)
                wait = false
            end)

local dec64_b = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'
local dec64 = function(data)
    data = string.gsub(data, '[^' .. dec64_b .. '=]', '')
    return (data:gsub('.', function(x)
        if (x == '=') then return '' end
        local r, f = '', (dec64_b:find(x) - 1)
        for i = 6, 1, -1 do r = r .. (f % 2 ^ i - f % 2 ^ (i - 1) > 0 and '1' or '0') end
        return r;
    end)        :gsub('%d%d%d?%d?%d?%d?%d?%d?', function(x)
        if (#x ~= 8) then return '' end
        local c = 0
        for i = 1, 8 do c = c + (x:sub(i, i) == '1' and 2 ^ (8 - i) or 0) end
        return string.char(c)
    end))
end
1 Like
#3

Then you can use that buffer as texture for model or sprite

1 Like