I am working with fabric.js inside of backbone.js, and trying to figure out how to load a Base64 image using fabric's command:
fabric.Image.fromURL( 'url', function(img)....
It works fine when I plug in a static url, like:
fabric.Image.fromURL('http://www.domain.com/image.jpg', function(img) {
img.set({ left: ui.offset.left, top: ui.offset.top});
canvas.add(img);
});
but I cannot get a Base64 image to load successfully. How I am I supposed to solve this problem?
All of the above answers are correct. But without an example, the answers aren't obvious.
fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgo....', function(img) {
img.set({ left: ui.offset.left, top: ui.offset.top});
canvas.add(img);
});
Try: data:image/jpeg;base64,"+url. If this doesn't work then maybe your base64 is broken or you might need to tweak the base64 to unit8 conversion technique provided here and add the image data to the image object placed inside the canvas.
Data URI
Make sure your data url is according to the following format:
data:[< mediatype >][;base64],< data >
MDN
<data> above should be a valid base64 string.
If you want to test whether it's fabric that's not rendering the url or url isn't correct, try to open the whole data url in browser, browser will render the image if it's a correct data url.
fabric should just work fine for a base64 data url as it works for http image address.
Related
I'm trying to send data to the url I'm opening in Webview, the data is another url string with parameters but it seems the way Webview uses post is just as a string of parameters like in a url, so this wont work for me. Here's how it looks.
<WebView source={{uri: 'https://mypage.com/index.php', method:'POST, body: 'PARAM1=1stparam&PARAM2=http://example.app?cat=mau&dog=pug''}}
/>
Am I missing something or is there another way of passing this data?
I am trying to save the editable state of fabric js canvas in a database, I tried to do so by converting it into json and saving it in database to an attribute of data type BLOB. When more than one image is added to the canvas, the length of the json exceeds the limit of BLOB as the json uses image data URI. So, is there a way to change this data URI to the specific image path? Or are there any alternatives to this problem?
As mentioned in the comments, you can use fromUrl to load and image:
var URL = 'http://somedomain.com';
fabric.Image.fromURL(URL, function (oImg) {
canvas.add(oImg);
canvas.renderAll();
}
I want to load a JSON file and draw a table with angular.
It works when i use this line :
$http.get("datatest3.txt")
But once I use the url instead "http://www.floatrates.com/daily/eur.json", while the content is the exact same JSON data,
it does not work.
Does someone know why ?
There is an image I want to display that depends on the response of a POST request.
<img ng-src="executePost()">
This is the controller.
$scope.executePost = function() {
$http.post('/post', {'data':'reallylongstuffthatcantbedonewithget'}).then(function(result){
console.log(result);
}, function(data, status){});
}
The response (i.e. console.log(result)) is a image/png type. How can I replace the image with the one returned via the POST request? Do I have to send the image back base64 encoded or is there another way?
I think I would perform a get on the image url if the post returns success.
The base64 solution seems a way of achieving your goal, but I'd think a post isn't meant to retrieve data.
My server returns a base64-encoded image and I want to send it to the client on some event foo. The way I currently have it is as such:
index.html
...
<img src="{{data}}"></img>
...
controller.js
...
$scope.foo = function (result) {
$scope.data = result;
}
....
When, foo happens, result is a base64 encoded image and the img element starts rendering, as expected. The problem is that when the page loads initially, a request to /{{data}} will fire to get the image and 404. How can I avoid having this rogue request fire when the page initially renders? What is the proper way of doing this, if not how I'm doing it?
To prevent the browser attempting to fetch the literal url /{{data}}, use the ng-src directive instead of src in your image tag.