0

I want to display image in new window and change it's url from base64 to image url

Example:

what happens now

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAYAAAByNR6YAAAYTUlEQVR4Xu3dbVKbSRaEUVjB7H8/s6FZARPQiBayPiyTJu3U6V/dNpSqzq2OeOKVjJ//99//vDz5hwABAgQIECBAICbwLLBilhYiQIAAAQIECLwJCCwXgQABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtAgAABAgQIEAgLCKwwqOUIECBAgAABAgLLHSBAgAABAgQIhAUEVhjUcgQIECBAgAABgeUOECBAgAABAgTCAgIrDGo5AgQIECBAgIDAcgcIECBAgAABAmEBgRUGtRwBAgQIECBAQGC5AwQIECBAgACBsIDACoNajgABAgQIECAgsNwBAgQIECBAgEBYQGCFQS1HgAABAgQIEBBY7gABAgQIECBAICwgsMKgliNAgAABAgQICCx3gAABAgQIECAQFhBYYVDLESBAgAABAgQEljtA4OEEXp6enp7vOPXL09Pbt9zzPXcs70sJECAwKCCwBofqSARuC7wW0+s/r9F0/O/H33kIq8OvfSWwLr3G7Z1+/Ste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

what should the result be

http://example.com/600x400/000/fff

Javascript code

for (var i=0; i<options.amount; i++) {

        drawImage(ctx, options);
        var $_newImageContainer = $('<div />');
        var $_newImage = $('<img />');
        var imgData = $_canvas[0].toDataURL('data:image/png;base64,iVBORw0K...');       
        $_newImage.attr('src', imgData).appendTo('#output');
        images.push(imgData);

        var nov_canvas = imgData;
        var nov_popup = window.open(imgData);
    }

What i want to achieve, can better be seen here: https://dummyimage.com/

my code

https://jsfiddle.net/eLk78kL5/

PS: i've no idea why jsfiddle code doesn't work, as same code works locally...

Last question: Is it even possible to get normal image url, running it locally?

aiden87
  • 929
  • 8
  • 25
  • 52
  • You have a data uri representing an image and you want to show it? And what is with this example.com url? And `.toDataURL('data:image/png;base64,iVBORw0K...')` makes no sense – Andreas Nov 16 '16 at 17:19
  • If your wanting to produce a URL in the format `http://example.com/600x400/000/fff` this is something you need to do server side. You can't make a data url into a normal url from the client side javascript. – Keith Nov 16 '16 at 17:21
  • If you want just local urls use `createObjectUrl` http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript – Vinay Nov 16 '16 at 17:23
  • It doesn't work on JSfiddle because you can't access their stuff. locally, you can. – yaakov Nov 16 '16 at 18:16
  • @Andreas yes i want to show it. and "example.com" is just and example how URL should look like – aiden87 Nov 16 '16 at 19:43
  • @Keith so i can only do this by uploading it to a server? – aiden87 Nov 16 '16 at 19:43
  • @Keith i have it on my server now, but the result is still the same – aiden87 Nov 17 '16 at 07:11
  • So what code / route configuration have you setup to retrieve the image from the url.? – Keith Nov 17 '16 at 09:40
  • @Keith the code above is everything i've done so far. i'm stuck on this problem and dunno how to solve it – aiden87 Nov 17 '16 at 09:42
  • What backend Server are you using?. Is it PHP / Node / plain Apache etc. If your just starting out I would suggest you have a look at Node.js, this is pretty handy as it's Javascript based. To be honest it's not a trivial thing that I could explain here,. If you do go Node.js, I would suggest watching say some uTube vids on say Express, it's a framework for node for creating dynamic website etc. eg. https://www.google.co.uk/search?q=node.js+express&rlz=1C1CHBF_en-GBGB691GB691&oq=node.js+express&aqs=chrome..69i57j0l5.3152j0j9&sourceid=chrome&ie=UTF-8#q=node.js+express&safe=strict&tbm=vid – Keith Nov 17 '16 at 10:27
  • it's server for dnn, but i've created subfolder just to test this...and i've done some node.js before but i dont really like it @Keith – aiden87 Nov 17 '16 at 10:28

0 Answers0