So I was curious about rendering images from the internet using the HttpService. I know a way to create an image from “PixelData” (a large array full off arrays which represent colour values) by instancing a frame for each colour array. I have tried to use the HttpService’s method GetAsync on an image link but if I try to print the return value it prints: ����. The code I used:
local HttpService = game:GetService('HttpService')
print(HttpService:GetAsync('https://pbs.twimg.com/media/ECziZdPUcAA4QnD.jpg:large'))
Of course, attempting to JSONDecode it will error 17:29:26.671 - Can't parse JSON
As a result, I believe the solution lies in using a third-party server to actually return the pixeldata as it seems that there is a way to get this data from an image with HTML. I am wondering if this is the proper solution and how to actually implement it. And also if there are any useful tips to optimise the rendering of an image. My end-goal is to experiment with this and possibly even load a short video if it is possible.
Somebody else has managed this to a great deal of success, in the following Roblox place (it does not appear as if they are active on the platform anymore, and I cannot find any social media links):
First of all, I would not recommend doing this. Bypassing moderation is something that could potentially get you in trouble. There’s a reason they have us upload images to Roblox, and a part of that is so they can moderate the bad images out.
Safety stuff aside, the reason you were returning ���� from GetAsync is because you were trying to get the text of the image file. The image file (when decoded into text) is made up of characters that aren’t renderabe, so they show up as �. I’m sure you know this.
That is why the only real solution is to use a third party system to decode the image files and get the pixel data. Unfortunately, there isn’t a very proper/efficient way to decode+render the image. There isn’t anything in Roblox that is made for this type of thing. This can be seen in the Roblox place you’ve provided as it crashed my Roblox game client twice while trying to render the thumbnail image of the game.
I could always be wrong, however, and there might actually be something better. I still would not recommend you doing this in a real game as - again - you aren’t really supposed to bypass moderation like this. I would especially not do videos as a single image was enough to crash my Roblox client in the example place. Perhaps to combat this, you could possibly compress the image down a little to be less resource heavy, but it wouldn’t fix all of the issues.
Good luck on your experiment, though! If you have a breakthrough, do share with us as this technology could be used for cool things!
Just going to use it as a little learning experiment. Obviously instancing 600 frames or so for an image would be very unoptimised and could lead to players porting inappropiate content into Roblox. If there a way to do it without instancing frames and directly changing the pixels then that would be a lot better. I’ve already loaded videos into Roblox using uploaded spritesheets and it might be possible to do something similar to that. In addition, loading videos could be optimised by only accounting for the pixel differences. If that’s not possible, then I know that rendering images itself is at least an achievable goal.
I don’t believe there’s a way to do it without instancing a large amount of frames. You may be able to do the only account for pixel changes. That would certainly be possible and would help efficiency.
Roblox certainly never intended anyone to do something like this it seems. Or if they have, they want to have people not do this.
local HttpService = game:GetService("HttpService")
local imageLink = "https://pbs.twimg.com/media/ECziZdPUcAA4QnD.jpg:large"
local imageSize = Vector2.new(500, 500) -- adjust this to the size you want your image to be
-- create a new ScreenGui to hold the image
local gui = Instance.new("ScreenGui")
gui.Parent = game:GetService("CoreGui")
-- create a new ImageLabel to display the image
local imageLabel = Instance.new("ImageLabel")
imageLabel.Size = UDim2.new(0, imageSize.X, 0, imageSize.Y)
imageLabel.Position = UDim2.new(0.5, -imageSize.X/2, 0.5, -imageSize.Y/2)
imageLabel.Parent = gui
-- function to load the image from a URL and set it as the ImageLabel's image
local function loadImage()
local success, result = pcall(function()
return HttpService:GetAsync(imageLink)
end)
if success then
local imageData = result
local decodedData = game:GetService("ContentProvider"):PreloadAsync({{Type = "String", Data = imageData}})
imageLabel.Image = "rbxasset://textures/"..decodedData[1].AssetId
else
warn("Failed to load image from URL:", imageLink)
end
end
-- wait for player to be added to the game
game.Players.PlayerAdded:Connect(function(player)
-- wait for player's PlayerGui to exist
repeat wait() until player.PlayerGui
-- set the gui parent to player's PlayerGui instead of CoreGui
gui.Parent = player.PlayerGui
-- load the image
loadImage()
end)
i also tried rendering the image by frame to frame:
local HttpService = game:GetService("HttpService")
local imageLink = "https://pbs.twimg.com/media/ECziZdPUcAA4QnD.jpg:large"
local imageSize = Vector2.new(500, 500) -- adjust this to the size you want your image to be
-- create a new ScreenGui to hold the image
local gui = Instance.new("ScreenGui")
gui.Parent = game:GetService("CoreGui")
-- create a new ImageLabel to display the image
local imageLabel = Instance.new("ImageLabel")
imageLabel.Size = UDim2.new(0, imageSize.X, 0, imageSize.Y)
imageLabel.Position = UDim2.new(0.5, -imageSize.X/2, 0.5, -imageSize.Y/2)
imageLabel.Parent = gui
-- function to load the image from a URL and set it as the ImageLabel's image
local function loadImage()
local success, result = pcall(function()
return HttpService:GetAsync(imageLink)
end)
if success then
local imageData = result
local decodedData = game:GetService("ContentProvider"):PreloadAsync({{Type = "String", Data = imageData}})
imageLabel.Image = "rbxasset://textures/"..decodedData[1].AssetId
else
warn("Failed to load image from URL:", imageLink)
end
end
-- load the image
loadImage()
-- check if the player's PlayerGui object exists before accessing it
local player = game.Players.LocalPlayer
if player and player:IsDescendantOf(game) and player.PlayerGui then
gui.Parent = player.PlayerGui
end
imagelabels cant receive arrays of colours, so it will be impossible to do it but i made this project that livestreams ur screen to a roblox part using frames, it requires vs code.