Generate thumbnails


(Armaggedon) #1

Hi all,
I'm curious about how did you guys do to generate a thumbnail for every new uploaded model. I noticed that it takes a few minutes for the thumbnail to appear, so I suppose it's some kind of automatized task running on the background. I would like to have that functionality for a private gallery I'm developing on my web server :smile:


(Mauricesvay) #2

Hi @armaggedon,

we have a dedicated web app that was developed in-house to generates thumbnails on a GPU-enabled server. I don't know what are your needs, but if you are looking for something to take screenshot of webpages (without 3D), you might be interested by PhantomJS.

(Armaggedon) #3

Hi @mauricesvay , and thanks for your answer smile

Just for the sake of sharing, if somebody else is interested, I finally went with an easier-but-not-so-professional approach: I used some JavaScript to convert the canvas into an image and uploaded it using a simple php script through an AJAX call, all of it after a few seconds of timeout so I let the canvas render properly. It's not a clean solution, but it works and doesn't require much. Here's the code if any of you are looking for a similar solution and end up here through Google:

function dataURItoBlob(dataURI) {
  // convert base64/URLEncoded data component to raw binary data held in a string
  var byteString;
  if (dataURI.split(',')[0].indexOf('base64') >= 0)
      byteString = atob(dataURI.split(',')[1]);
      byteString = unescape(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

  // write the bytes of the string to a typed array
  var ia = new Uint8Array(byteString.length);
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);

  return new Blob([ia], {type:mimeString});

setTimeout(function() {
  var dataURL = canvas.toDataURL('image/jpeg', 0.5);
  var blob = dataURItoBlob(dataURL);

  var fd = new FormData(document.forms[0]);
  fd.append("file", blob);
  fd.append("name", "filename");
    url: "upload.php",
    type: "POST",
    data: fd,
    enctype: 'multipart/form-data',
    processData: false,  // tell jQuery not to process the data
    contentType: false   // tell jQuery not to set contentType
  }).done(function( data ) {
    console.log("PHP Output:");
    console.log( data );
}, (5 * 1000));

upload.php is just a simple script for uploading files received from a POST request, there are plenty of examples online smile

(Mauricesvay) #4

Hi @armaggedon,

if you need to take screenshots from the viewer, also check out our Viewer API:

(Armaggedon) #5

Hi @mauricesvay,

Thanks, but that's not what I was looking for. I'm not using your API but JSC3D, so my question was more related to a generic way to automatically create a snapshot of a canvas rather than from your viewer. My gallery is a small, personal project, so I didn't need anything sophisticated. Thank you anyway smile

(Mauricesvay) #6

Alright! Let us know if features are missing on Sketchfab. I'm curious to know why you chose JSC3D smile

(Armaggedon) #7

Mainly because I can't use a model hosted on my server instead of on yours. Nothing personal, I just want everything locally hosted smile

(Gilles38) #8

Hi all,
so Maurice, is there anything new on thumbnails since March 2015 ?
I am not a developer myself and I would really like to have a simple solution such as a 'Thumbnail' option next to 'Autostart' in embedded iFrames or in the API
Has anyone tried the kindly-provided JavaScript solution from armaggedon for a private gallery ?
Or PhantomJs appraoch ?
I was simply planning on snapshots as suggested in the discussion but it'd like something more friendly.

(Mauricesvay) #9

Hi @gilles38,

what are your needs exactly? If you are looking for a way to generate high resolution renders of sketchfab models, you can use .

(Gilles38) #10

Thanks Maurice. I did know this screenshot link.
I am simply looking for a way to show a thumbnail gallery on my website just the way it is on my Sketchfab account withtout having to use screenshots.

(Mauricesvay) #11

@gilles38 if you want to display a gallery with thumbnails on the side, you probably need the Data API that lets you pull the list of your models, with all the information including thumbnails.

If you are looking for something ready to use, you might be interested in the self-hosted portfolio.

(Gilles38) #12

Hi Maurice,

Thank you for your reply.
Both API and the self-hosted portfolio are close to what I am looking for, although I would rather go for the Data API if possible because it is supported by Sketchfab.
I am concerned by the Search of the API
I am not a developer (but will work with a developer for my website soon) so my two questions below might be basic questions. Also I don't know if this is important but I will upgrade to a business account (I have a Pro account so far) when necessary to display 'clean' models.
1) Will the Search be performed on my models only (this is what I want of course) even if these are private models. Right now, performing a search from my Sketchfab account, does not find my own private models, this is why I am asking.
2) For some reasons, I would like the Search on my website to be quite flexible (for instance, if the user is making a typo, typing 'squirel' instead of 'squirrel'). Is this possible with the Search API to introduce that kind of rules?
Thank you again

(Mauricesvay) #13
  • At the moment, the search api only searches public models. Searching private models is on the roadmap
  • the current search should already allow some typo tolerance, but we still need to improve this.

(Gilles38) #14

Hi @mauricesvay,

Just to summarize about thumbnails and API, am I right with this statements ?:
- the API allows to retrieve a gallery of thumbnails from a collection of models
- your self-hosted portfolio allows to display thumbnails of my entire list of models present on my Sketchfab account
- there is no way with the API or somethingelse to display thumbnails of specific models
Thank you

(Mauricesvay) #15

The Data API can return the thumbnails for a specific model:

(Gilles38) #16

in the Thumbnails section, I understand that it is for Collections.
Am I missing something here?
Thank you

(Mauricesvay) #17

You are probably looking for the GET /v3/models/{uid} endpoint.
This endpoint will return the model info, including thumbnails for the given model uid.

(Gilles38) #18

Humm maybe, I have to talk to the developer because I am not a developer myself.
Thank you

(Gilles38) #19

Hi @mauricesvay,

We are trying to retrieve thumbnail of individual models using the URL such as

One question: I have changed the model thumbnail (background and orientation) but the image returned by the URL above hasn't been updated after 20min.
Am I missing something here or does it simply take time to update the thumbnail?
Thank you

(Pierre-Antoine) #20

Hi @gilles38,

When you take a new thumbnails, this will create a new URL that you can get using the GET /v3/models/{uid} endpoint.
(the URL is changed completely too avoid caching issues that can occur when url are "recycled").

Hope that helps,