0

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!

ndisdabest
  • 319
  • 10
  • 19

1 Answers1

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

eithed
  • 3,933
  • 6
  • 40
  • 60
  • Thanks for your reply... what is the secret to getting around the "XMLHttpRequest cannot load _____. Origin ______ is not allowed by Access-Control-Allow-Origin" error? – ndisdabest Feb 07 '13 at 15:01
  • 1
    I think you have encountered same-origin policy problem, which basically means that AJAX requests need to be done to the same domain, using the same protocol and port from which they originate. You can read more about it (and possibly get a solution) here: http://stackoverflow.com/questions/3828982/xmlhttprequest-cannot-load-an-url-with-jquery – eithed Feb 07 '13 at 15:37