将base64网址转换为图片网址

时间:2016-11-16 17:08:47

标签: javascript html css base64

我想在新窗口中显示图片并将其从base64更改为图片网址

示例:

现在发生的事情

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

结果应该是什么

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

Javascript代码

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);
    }

我想要实现的目标,可以在这里更好地看到:https://dummyimage.com/

我的代码

https://jsfiddle.net/eLk78kL5/

PS:我不知道为什么jsfiddle代码不起作用,因为相同的代码在本地工作...

最后一个问题:是否可以获得正常的图片网址,在本地运行?

0 个答案:

没有答案