1

So, ideally, I would like a user to add a gif to my site and subsequently a thumbnail image for it as well.

Currently, I'm using gifffer() to create a canvas for roughly the first frame of the gif. However, when I try to save this canvas as an image, I get the tainted warning. So now I'm trying to figure out the best way to automatically create a thumbnail from a gif?

Thoughts?

Hello, is it me you're searching for?

Daltron
  • 1,729
  • 3
  • 20
  • 37
  • How does user "add a gif"? Why is error occurring if user is uploading image? – guest271314 Jun 05 '17 at 00:16
  • I would like users to be able to grab gifs from a URL ideally... – Daltron Jun 05 '17 at 00:17
  • What do you mean by "grab gifs"? – guest271314 Jun 05 '17 at 00:18
  • For example, the gif url I have been testing with is: `http://bestanimations.com/Animals/Mammals/Cats/catgif/funny-cat-gif-3.gif` – Daltron Jun 05 '17 at 00:19
  • Ideally, a user can go to my site and save this gif URL in their profile database. This is all good. But, when I want to show them a thumbnail for the gif, I need a thumbnail... preferably a separate image that was created when they first input the URL – Daltron Jun 05 '17 at 00:21
  • How is error at `canvas` related to Question? Not certain what issue is? Is the resource served with `CORS` headers? – guest271314 Jun 05 '17 at 00:24
  • Well, I get the canvas image fine. But when I try to do something with the canvas like `getDataURL` I get the tainted warning. Now, I know because I'm on localhost, it could be causing an issue, but I was hoping to try a few alternatives before loading onto a server and then testing... but maybe I'm outta luck... – Daltron Jun 05 '17 at 00:26
  • At which browser are you trying? – guest271314 Jun 05 '17 at 00:28
  • Chrome Version 58.0.3029.110 (64-bit) – Daltron Jun 05 '17 at 00:29
  • You can launch chrome with `--allow-file-access-from-files` flag to allow local filesystem access from `file:` protocol, to try process locally; see [JS: how can I base64 encode a local file without XMLHttpRequest?](https://stackoverflow.com/questions/38887005/js-how-can-i-base64-encode-a-local-file-without-xmlhttprequest/) – guest271314 Jun 05 '17 at 00:30
  • Okay, so I loaded chrome from terminal with this: `/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files` and then went to localhost and added the gif which produced the canvas. Then I used this jquery to get the data: `$('#showcase_defaultPostID canvas')[0].toDataURL("image/jpg")` and I got this response in the console: `Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at :1:47` – Daltron Jun 05 '17 at 00:39
  • Did you close all open instances of chrome, or also set a different `--user-data-dir` directory before launching at `terminal`? If chrome is launched from `terminal` while an existing instance is running, chrome will use the open instance settings and configuration directory negating, negating the new flags set. `/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files --user-data-dir="/Applications/Google\ Chrome.app/Contents/MacOS/temp-chrome"` – guest271314 Jun 05 '17 at 00:47
  • Hey, nah, not working. Chrome was definitely new as all my extensions were gone as well as passwords. Still getting the same error... – Daltron Jun 05 '17 at 01:39
  • You are still trying to load an image file with a cross domain request? If you load file from local filesystem there should not be an error. For cross domain requests you can try using `YQL` to request resource – guest271314 Jun 05 '17 at 01:41
  • Yeah, but that is what I want to do, is use a URL instead of downloading to my own server. Essentially, I just want a thumbnail of a gif if the user enters a gif as the URL. I don't mind using a different strategy if you can think of something or a different NPM? – Daltron Jun 05 '17 at 01:43
  • See [Directly download img tag](https://stackoverflow.com/questions/44170063/directly-download-img-tag/44170392#44170392) – guest271314 Jun 05 '17 at 01:46
  • Okay, that last response is looking close but now I'm getting undefined back... my code looks like this: `let query = \`https://query.yahooapis.com/v1/public/yql?q=select * from data.uri where url="${gifURL}"&format=json&callback=\`; fetch(query).then(response => response.json()).then(({query: {results: {gifURL}}}) => { console.log(gifURL)}).catch(err => console.log(err));` My request URL look like this: `https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.uri%20where%20url=%22https://media1.giphy.com/avatars/nikdudukovic/ylDRTR05sy6M.gif%22&format=json&callback=` – Daltron Jun 05 '17 at 02:07
  • `({query: {results: {gifURL}}})` should be `({query: {results: {url}}})` we are using object destructuring to get the `url` property of `query.results` object of response. Alternatively, `.then(function(data){console.log(data.query.results.url)})`. Though did not so at link, `const url` should probably be a different identifier to avoid confusion – guest271314 Jun 05 '17 at 02:09
  • Hmm, I am getting `undefined`... I now have: `fetch(query).then(response => response.json()).then(({query: {results:{url}}}) => { console.log(url); }).catch(err => console.log(err));` – Daltron Jun 05 '17 at 02:16
  • When I check in the browser, I am getting a query response but no URL: `{ "query": { "count": 1, "created": "2017-06-05T02:17:50Z", "lang": "en-US", "results": { "error": "337783 > 25600" } } }` – Daltron Jun 05 '17 at 02:18
  • Try another image resource location – guest271314 Jun 05 '17 at 02:20
  • Not sure if the generated `data URI` of `.gif` `Content-Length` is too large for browser to handle – guest271314 Jun 05 '17 at 02:26
  • yeah, I'm consistently getting `TypeError: Cannot read property 'url' of null` – Daltron Jun 05 '17 at 02:27
  • I like where you are going with this, as I was thinking of using an api to make the change... – Daltron Jun 05 '17 at 02:28

0 Answers0