{"action":"created","issue":{"url":"https://api.github.com/repos/pouchdb/pouchdb/issues/4417","labels_url":"https://api.github.com/repos/pouchdb/pouchdb/issues/4417/labels{/name}","comments_url":"https://api.github.com/repos/pouchdb/pouchdb/issues/4417/comments","events_url":"https://api.github.com/repos/pouchdb/pouchdb/issues/4417/events","html_url":"https://github.com/pouchdb/pouchdb/issues/4417","id":109900463,"number":4417,"title":"rendering from blob versus live stream","user":{"login":"MarioVanDenEijnde","id":12608918,"avatar_url":"https://avatars.githubusercontent.com/u/12608918?v=3","gravatar_id":"","url":"https://api.github.com/users/MarioVanDenEijnde","html_url":"https://github.com/MarioVanDenEijnde","followers_url":"https://api.github.com/users/MarioVanDenEijnde/followers","following_url":"https://api.github.com/users/MarioVanDenEijnde/following{/other_user}","gists_url":"https://api.github.com/users/MarioVanDenEijnde/gists{/gist_id}","starred_url":"https://api.github.com/users/MarioVanDenEijnde/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MarioVanDenEijnde/subscriptions","organizations_url":"https://api.github.com/users/MarioVanDenEijnde/orgs","repos_url":"https://api.github.com/users/MarioVanDenEijnde/repos","events_url":"https://api.github.com/users/MarioVanDenEijnde/events{/privacy}","received_events_url":"https://api.github.com/users/MarioVanDenEijnde/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-10-05T22:36:01Z","updated_at":"2015-10-06T16:28:20Z","closed_at":"2015-10-06T00:27:19Z","body":"Hello PouchDb team,\r\n\r\nTest case iPhone:\r\nWe save an image as blob attachment in local PouchDb.\r\nFrom the local dataBase we render it on the mobile.\r\nWe experience that this takes longer then render from a live stream.\r\n\r\nThe blob is created from the live stream and thus use the same sizes.\r\n\r\nWe use the \"blobUtil.imgSrcToBlob\" to store the image.\r\nAnd we use the following code to read from the local store:\r\n```\r\n.then(function (doc) {\r\n\tconsole.log(\"1\");\r\n\tconsole.log(doc);\r\n\treturn db.getAttachment('TtPicture', 'TtPicture.png');\r\n})\r\n.then(function (blob) {\r\nconsole.log(\"2\");\r\n\tvar url = URL.createObjectURL(blob);\r\n\tvar img = document.getElementById('DidYouKnowPictureUrlImg');\r\n\timg.src = url;\r\n```\r\nCan you advise if we have to live with it? Or should I use a different approach.\r\n\r\nKind regards,\r\nMario"},"comment":{"url":"https://api.github.com/repos/pouchdb/pouchdb/issues/comments/145919515","html_url":"https://github.com/pouchdb/pouchdb/issues/4417#issuecomment-145919515","issue_url":"https://api.github.com/repos/pouchdb/pouchdb/issues/4417","id":145919515,"user":{"login":"MarioVanDenEijnde","id":12608918,"avatar_url":"https://avatars.githubusercontent.com/u/12608918?v=3","gravatar_id":"","url":"https://api.github.com/users/MarioVanDenEijnde","html_url":"https://github.com/MarioVanDenEijnde","followers_url":"https://api.github.com/users/MarioVanDenEijnde/followers","following_url":"https://api.github.com/users/MarioVanDenEijnde/following{/other_user}","gists_url":"https://api.github.com/users/MarioVanDenEijnde/gists{/gist_id}","starred_url":"https://api.github.com/users/MarioVanDenEijnde/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MarioVanDenEijnde/subscriptions","organizations_url":"https://api.github.com/users/MarioVanDenEijnde/orgs","repos_url":"https://api.github.com/users/MarioVanDenEijnde/repos","events_url":"https://api.github.com/users/MarioVanDenEijnde/events{/privacy}","received_events_url":"https://api.github.com/users/MarioVanDenEijnde/received_events","type":"User","site_admin":false},"created_at":"2015-10-06T16:28:20Z","updated_at":"2015-10-06T16:28:20Z","body":"Hello Nick,\r\n\r\n(You probably can tell I am a newbie ;-)\r\nThe solution below is as follows:\r\n1. Using an ajax call I receive the source Image url -> localStorage.recipesPictureUrl\r\n2. From this ajax call I run updateRecipePicture where I check if a doc is already there or not\r\n3.  if doc is there I remove the existing attachment (if any) and run updateRecipePictureAttachment to update the doc with the attachment\r\n4.  if doc is not there I run newRecipePictureAttachment to create doc together with attachment\r\n5. After attachment is saved I call getRecipePicture to show image.\r\n6. And with every page refresh I only call getRecipePicture  in $(document).ready\r\n\r\n\r\n\r\n```\r\n\t\tfunction getRecipePicture(){ \r\n\t\t\tnew PouchDB('RecipeData')\r\n\t\t\t.then(function (db) {\r\n\t\t\t\tdb.get('RecipePicture', {attachments: true})\r\n\t\t\t\t.then(function (doc) {\r\n\t\t\t\t\tconsole.log(doc);\r\n\t\t\t\t\treturn db.getAttachment('RecipePicture', 'RecipePicture.png');\r\n\t\t\t\t})\r\n\t\t\t\t.then(function (blob) {\r\n\t\t\t\t\tlocalStorage.recipeUrl = URL.createObjectURL(blob);\r\n\t\t\t\t\tvar img = document.getElementById('RecipesPictureUrlImg');\r\n\t\t\t\t\timg.src = localStorage.recipeUrl;\r\n\t\t\t\t})\r\n\t\t\t\t.catch(function (err) {\r\n\t\t\t\t\tconsole.log(err);\r\n\t\t\t\t\tloadRecipeImage() //* this function loads the source image url using an ajax call\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t}\r\n\t\t\r\n\t\tfunction updateRecipePicture(){\r\n\t\t\tnew PouchDB('RecipeData')\r\n\t\t\t.then(function (db) {\r\n\t\t\t\t// check if document exists and then remove attachment\r\n\t\t\t\tdb.get('RecipePicture', {attachments: true})\r\n\t\t\t\t.then(function (doc) {\r\n\t\t\t\t\tlocalStorage.revDocRecipe = doc._rev;\r\n\t\t\t\t\treturn db.removeAttachment('RecipePicture', 'RecipePicture.png', localStorage.revDocRecipe)\r\n\t\t\t\t\t.then(function (result) {\r\n\t\t\t\t\t\tupdateRecipePictureAttachment();\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.catch(function (err) {\r\n\t\t\t\t\t  console.log(err);\r\n\t\t\t\t\t});\r\n\t\t\t\t}).catch(function (err) {\r\n\t\t\t\t\tconsole.log(err);\r\n\t\t\t\t\tnewRecipePictureAttachment();\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t}\r\n\t\t\r\n\t\tfunction updateRecipePictureAttachment(){\r\n\t\t\tnew PouchDB('RecipeData')\r\n\t\t\t.then(function (db) {\r\n\t\t\t\tif (typeof localStorage.recipesPictureUrl !== 'undefined' && localStorage.recipesPictureUrl !== null){\r\n\t\t\t\tdb.get('RecipePicture')\r\n\t\t\t\t\t.then(function (doc) {\r\n\t\t\t\t\tconsole.log(doc);\r\n\t\t\t\t\tlocalStorage.revDocRecipe = doc._rev;\r\n\t\t\t\t\treturn blobUtil.imgSrcToBlob('http://my-personaltrainer.nl' + localStorage.recipesPictureUrl+ '?w=' + localStorage.maxWindowSize);\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.then(function (blob) {\r\n\t\t\t\t\t\treturn db.putAttachment('RecipePicture', 'RecipePicture.png', localStorage.revDocRecipe, blob, 'image/png');\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.then(function (result) {\r\n\t\t\t\t\t\tgetRecipePicture();\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.catch(function (err) {\r\n\t\t\t\t\t\tconsole.log(err);\r\n\t\t\t\t\t\tloadRecipeImage();\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t\telse{\r\n\t\t\t\t\tloadRecipeImage();\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t\t\r\n\t\tfunction newRecipePictureAttachment(){\r\n\t\t\tnew PouchDB('RecipeData')\r\n\t\t\t.then(function (db) {\r\n\t\t\t\tif (typeof localStorage.recipesPictureUrl !== 'undefined' && localStorage.recipesPictureUrl !== null){\r\n\t\t\t\t\tdb.put({\r\n\t\t\t\t\t\t_id: 'RecipePicture'\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.then (function (returnBlob){\r\n\t  \t\t\t\t\treturn blobUtil.imgSrcToBlob('http://my-personaltrainer.nl' + localStorage.recipesPictureUrl+ '?w=' + localStorage.maxWindowSize);\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.then(function (blob) {\r\n\t\t\t\t\t\treturn db.putAttachment('RecipePicture', 'RecipePicture.png', localStorage.revDocRecipe, blob, 'image/png');\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.then(function (result) {\r\n\t\t\t\t\t\tgetRecipePicture();\r\n\t\t\t\t\t})\r\n\t\t\t\t\t.catch(function (err) {\r\n\t\t\t\t\t\tconsole.log(err);\r\n\t\t\t\t\t});\r\n\t\t\t\t}\r\n\t\t\t\telse{\r\n\t\t\t\t\tloadRecipeImage();\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}\r\n\t\t\r\n\t// End of RecipePictureUrl information -------------------------------------------------------------\r\n\t\r\n\t\r\n    $(document).ready(function () {\r\n    \r\n        localStorage.maxWindowSize = window.screen.height;\r\n    \tif(localStorage.maxWindowSize < window.screen.width){\r\n    \t\tlocalStorage.maxWindowSize = window.screen.width;\r\n    \t}\t\t\t\r\n    \tgetRecipePicture();\r\n\r\n\t});\r\n\r\n```\r\nKind regards,\r\nMario"}}