Question

Basically, what I’m trying to do is the following:

1. A user enters an ID for an asset on our system
2. The ID is submitted as part of an API call that returns JSON with a field called “videoStillURL”, which contains the URL for a thumbnail image.
3. Resize this thumbnail image from its existing size to something smaller so that, if someone right clicks and saves to their hard drive, it will be the resized version and not the original.

I’m not sure if all this is possible… I can do bits and pieces of it, but haven’t been able to put it all together and thought I’d see if anyone had any insight.

Below is the format of the JSON I am returning. I’m having the hardest time figuring out how to load the image URL for the videoStillURL item, mainly because the URL has extra slashes in it.

{"name":"Test Item","videoStillURL":"http:\/\/brightcove.vo.llnwd.net\/d21\/unsecured\/media\/1547387903001\/1547387903001_2146991932001_vs-5112b14ee4b0a4075c1c8334-1592194027001.jpg?pubId=1547387903001","thumbnailURL":"http:\/\/brightcove.vo.llnwd.net\/d21\/unsecured\/media\/1547387903001\/1547387903001_2146991933001_th-5112b14ee4b0a4075c1c8334-1592194027001.jpg?pubId=1547387903001"}

Any help is greatly appreciated!

Answer 1

Extra slashes shouldn’t be an issue as they will be escaped.

Let say you’re doing something like this mockup:

$(document).ready(function()
{
    ...
    ajaxSuccessCallHere(data)
    {
        var image = $("<img/>");
        $(image).attr('src', data.thumbnailURL)
        $(document.body).append(image);
    }
    ...
});

What I find impossible to do, in what you’re trying to achieve, is making it save videoStillURL when right clicking on the image alone. How I’d do it is wrap an <a href='[videoStillURL]'> tag around the image – so right clicking, and picking “Save the source” would actually save the original image and not the thumbnail