Data URI to Object URL with createObjectURL in chrome/ff

2024/2/27 7:39:30

I have base64 string of an image. How can I convert this to Object URL? The purpose is to try and see if my svg-editor will be faster, by injecting Blob URL to the DOM instead of a very large base64 string. This is used for editing the SVG only. On save, Object URLs are reconverted to base64 again.

Image size is typically 0.5 MB or bigger.

What I've tried:

var img = ...; //svg <image>
var bb = new BlobBuilder();
var dataStr = img.getAttributeNS(XLINKNS, 'href'); //data:image/jpeg;base64,xxxxxx
//dataStr = dataStr.replace(/data:.+;base64,/i, ''); //Strip data: prefix - tried both with & without
//dataStr = window.atob(dataStr); //tried both with & withoutbb.append(dataStr);
var blob = bb.getBlob
img.setAttributeNS(XLINKNS, 'xlink:href', window.URL.createObjectURL(blob)); //blob:xxx

What I get instead is a seemingly corrupted jpeg image.



Try this code.

function dataURItoBlob(dataURI) {var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];var binary = atob(dataURI.split(',')[1]);var array = [];for (var i = 0; i < binary.length; i++) {array.push(binary.charCodeAt(i));}return new Blob([new Uint8Array(array)], {type: mime});

and use it like this

var objecturl = URL.createObjectURL(dataURItoBlob('your data url goes here'));

Related Q&A

How to center div?

I have a problem with centering div in HTML (vertical & horizontal). My code looks something like this:<div id="container">SOME HTML</div>#container{width: 366px;height: 274px…

Multithreading with javascript promises

Just learning promises. Javascript is single threaded right? So when it uses fetch api to make http requests it all happens in one thread? How does it manage concurrency with PromisePool then? var p…

jQuery UI Slider - with mousewheel support?

as you may already know Im new to jQuery, so Code-Improvements not belonging to this theme are still very allowed.This is my HTML-Code:<div style="display: inline-block; width: 120px;">…

Do Firebase Cloud Functions callable functions enforce end user authentication?

I would like to know if, by itself, callables functions with Firebase Cloud Functions, for example : exports.myCallableFunction = functions.https.onCall((data, context) => { //... });are safe by th…

javascript 5 random non duplicating integers from 0 - 20

Whats the best way to generate 5 random non duplicating integers from 0 - 20?Im thinking, use Math.random with floor, loop it 5 times, check for duplicates, if duplicate, random again.Whats your way?

JSON Scraping - Convert military time to standard time via Javascript

I am scraping JSON data from a url. The time is military time and I was wondering if there is a way once I retrieve on the client side to convert it to standard time.Here is the JSON:[{SaturdayClose: &…

javascript hoisting: what would be hoisted first — variable or function?

Recently I was confused about javascript hoisting behavior and now I got stuck with that.So, there are two examples.var alpha = alpha;var beta = beta;f(); //betavar f = function f1() {console.log(beta)…

req.cookies returns undefined but cookies are set

I am using cookie-parser in my express app. When the root page is requested I set a random number on the cookie using res.cookie(name, value) and it sets it fine (I checked on my browser console). But …

JavaScript IE appendChild() - Unexpected call to method or property access

I have been having this problem in IE. I have two divs which I use to drag selected elements from one to another. Lets say I have a child element (also a div) in div1 and some child elements in div2. I…

Calling phone sms api by use of phonegap using javascript

I am new in phonegap .I have two text field which contains mobile n. and another text field contains some message as per user input.And one button for sending sms . I am using below code.<script ty…