I am trying to set the src of an img tag in order to display an image. The following works on android/mac/windows, but not on iOS:
let b64Bmp = pageModel.image;
this.$currentPageImage.src = `data:image/bmp;base64,${b64Bmp}`;
b64Bmp is a b64 encoded bitmap image. I also tried the same using a blob:
const blobUrl = URL.createObjectURL(resultBlob);
this.$currentPageImage.src = blobUrl;
None of these solutions work on iOS specifically. Also, when trying to create a new Image object like so:
const image = new Image();
image.src = ...
The image.onerror throws an error without any information.
What do I have to change to make this work on iOS?
Found the solution. Apparently, iOS does not display BMP files with a color depth of less than 24 bits (see https://developer.apple.com/forums/thread/715255). It works now, when sending a BMP with color depth of 24 bits
Related
I generate array of pixels in client side JavaScript code and convert it to a blob. Then I pass URL of the blob as image.src and revoke it at image.onload callback. I don't keep any references to the data, generated by the previous steps, so this data may be freed by GC.
There are many images generated this way, and it works fine. But sometimes user may want to save the generated image by clicking on a Save button near the image. I don't want to generate image again, because generation is slow, and the image is already generated and is visible on screen. So I want to get my pixels back from the image. I tried to create canvas again, draw image on it and then call toBlob, but browser treats this image as cross origin and throws an exception: "Failed to execute 'toBlob' on 'HTMLCanvasElement': tainted canvases may not be exported". Similar errors I get with canvas.toDataUrl and canvasContext.getImageData.
Is there a workaround for this problem?
I also tried to create canvases instead of images, but when I create the second canvas, the content of the first one clears.
Added
This error occurs only in the Chrome and other WebKit browsers. Firefox and MS Edge work fine. And when I commented out line of code that revoked blob url, this error disappeared - I can draw the image on the canvas and get its pixel data without CORS issues. But it is pointless to do so, because I already have blob that is not deleted.
But my page may generate many images - it depends on its user and is unlimited. Size of images is also unlimited - it may be useful to generate even 4096x4096 images. So I want to reduce memory consumption of my page as much as possible. And all these images should be downloadable. Generation of most images uses previously generated images, so to regenerate last image in a chain, I must to regenerate all images.
So I need a workaround only for Chrome browser.
Added 2
I tried to reproduce this problem in JS Fiddle, but couldn't. However locally my code doesn't work - I developed my app locally and I haven't tried running it on server. Create test.html file on your computer and open it in browser (locally, without server):
<html>
<body>
<pre id="log"></pre>
</body>
<script>
var log = document.getElementById("log");
var canvas = document.createElement("canvas");
canvas.width = canvas.height = 256;
var ctx = canvas.getContext("2d");
canvas.toBlob(function(blob) {
var img = new Image();
var blobUrl = URL.createObjectURL(blob);
img.src = blobUrl;
img.onload = function()
{
URL.revokeObjectURL(blobUrl);
ctx.drawImage(img, 0, 0);
try { canvas.toBlob(function(blob) { log.textContent += 'success\n'; }); }
catch(e) {log.textContent += e.message + '\n';}
};
});
</script>
</html>
It will print Failed to execute 'toBlob' on 'HTMLCanvasElement': Tainted canvases may not be exported..
So, I think, my workaround is to detect that page is run on combination of WebKit browser and file:/// protocol. And I can to defer revoking blob URL until page unload only for this combination.
That indeed sounds like a bug in chrome's implementation, you may want to report it.
What seems to happen is that chrome only checks if the image has been loaded through a clean origin when it is drawn for the first time on the canvas.
Since at this time, you already did revoke the blobURI, it can't map this URI to a clean origin (file:// protocol is quite strict on chrome).
But there seems to be a simple workaround:
By drawing this image on a [the reviver]* canvas before revoking the blobURI, chrome will mark the image as clean, and will remember it.
*[edit] Actually it seems it needs to be the same canvas...
So you can simply create your export canvas before-hand, and draw each images on it (to save memory you can even set it to 1x1px when you don't use it for the export) before you do revoke the image's src:
// somewhere accessible to the export logic
var reviver = document.createElement('canvas').getContext('2d');
// in your canvas to img logic
canvas.toBlob(function(blob){
var img = new Image();
img.onload = function(){
reviver.canvas.width = reviver.canvas.height = 1; // save memory
reviver.drawImage(this, 0,0); // mark our image as origin clean
URL.revokeObjectURL(this.src);
}
img.src = URL.createObjectURL(blob);
probablySaveInAnArray(img);
};
// and when you want to save your images to disk
function reviveBlob(img){
reviver.canvas.width = img.width;
reviver.canvas.height = img.height;
reviver.drawImage(img,0,0);
reviver.canvas.toBlob(...
}
But note that this method will create a new Blob, not retrieve the previous one, which has probably been Collected by the GarbageCollector at this time. But it is unfortunately your only way since you did revoke the blobURI...
I'm trying to base64 encode a local file. It's next to my .js file so there's no uploading going on. Solutions like this (using XMLHttpRequest) get a cross-site scripting error.
I'm trying something like this (which doesn't work but it might help explain my problem):
var file = 'file.jpg'
var reader = new FileReader();
reader.onload = function(e) {
var res = e.target.result;
console.log(res);
};
var f = reader.readAsDataURL(file);
Anyone have any experience doing this locally?
Solutions like this (using XMLHttpRequest) get a cross-site
scripting error.
If using chrome or chromium browser, you could launch with --allow-file-access-from-files flag set to allow request of resource from local filesystem using XMLHttpRequest() or canvas.toDataURL().
You can use <img> element, <canvas> element .toDataURL() to create data URL of local image file without using XMLHttpRequest()
var file = "file.jpg";
var img = new Image;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
img.onload = function() {
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
ctx.drawImage(this, 0, 0);
var res = canvas.toDataURL("image/jpeg", 1); // set image `type` to `image/jpeg`
console.log(res);
}
img.src = file;
You could alternatively use XMLHttpRequest() as described at Convert local image to base64 string in Javascript.
See also How to print all the txt files inside a folder using java script .
For a details of difference of returned data URI from either approach see canvas2d toDataURL() different output on different browser
As described by #Kaiido at comment below
it will first decode it, at this stage it's still your file, then it
will paint it to the canvas (now it's just raw pixels) and finally it
will reencode it (it has nothing to do with your original file
anymore) check the dataURI strings... They're compeltely different and
even if you do the canvas operation from two different browsers,
you'll have different outputs, while FileReader will always give you
the same output, since it encode the file directly, it doesn't decode
it.
I'm using html2canvas to save a snapshot from the webcam as an image.
However, it save only in png, I'm trying to save it as a gif, but can not find out how to do this
So far this is my function:
renderCanvasImage: function(){
setTimeout(function () {
// Add image with Quote to Canvas (hidden).
html2canvas($('.snap'), {
onrendered: function (canvas) {
document.body.appendChild(canvas).id = 'hidden';
var canvas = document.getElementById('hidden');
var image = new Image();
//Create a new Image with url
image.src = canvas.toDataURL("image/.png");
// Look at URI only and assign to localStorage
imageURI = image.src;
localStorage.setItem('image', imageURI);
//****TODO better removal*/
$('#cameraContainer, .wrapperInfo').hide();
$('#result a, #result img').fadeOut(100).remove();
$(image).appendTo('#result');
$('#result').fadeIn(200);
//Send Data to DB
tibo.setData();
//PopUp Message
tibo.popupMsg();
}
});
}, 1000);
},
I tried to replace the following:
image.src = canvas.toDataURL("image/.png");
By jpg of gif, but it doesn't change anything.... any tips to make this work will be amazing !!
Thanks a lot !!
You said in the comments above that you've got it working, however I still feel the need to tell you that the supported mime types of toDataUrl depend on the browser.
You can test it here https://jsfiddle.net/v91y0zqr/
Here's a visual example with even more mime types: http://kangax.github.io/jstests/toDataUrl_mime_type_test/
All browsers I've tested (Firefox, Chrome, Opera, IE) did support image/png and image/jpeg
Additionally, Chrome could export image/webp
Additionally, Firefox could export image/bmp
Results may differ for you.
So while in theory canvas.toDataURL("image/gif"); should create a GIF image, the browser may still decide to create a PNG (it's the default fallback).
You can read more about toDataUrl here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
I’ve got a flowery pattern (http://pages.bangor.ac.uk/~abp4d9/) where user moves sliders (for inner circles and petals) and flowers change. I’ve got 3 ‘Save as’ buttons. 1st one (SVG) works great. The other 2 work only half-way. The saved file comes up in the appropriate format but then it doesn’t open, saying that there was an error. All 3 JS functions are almost identical – I basically copied them from the working 1st function. I’m not sure what to correct – probably ‘new Blob’ format, but I’m not sure what to put instead.
So, to sum up:
• How to get a working ‘Save as SVG’ button to do the same with PDF and PNG?
Here is my JS for half-working PDF button:
function downloadPdf(){
var svg = document.getElementsByTagName("svg")[0];
var svg_xml = (new XMLSerializer).serializeToString(svg);
var blob = new Blob([svg_xml]);
var url = window.URL || window.webkitURL;
var blobURL = url.createObjectURL(blob);
var a = document.createElement('a');
a.download = "Pattern.pdf";
a.href = blobURL;
document.body.appendChild(a);
a.click();
}
you have to create the PNG resp. PDF first. for PNG you can use canvas to draw the image and then retrieve the canvas content as PNG (or you can use a library). for PDF you have to use a library.
Is there any way to get a callback on background-image is loaded with a base 64 DataURL. I can cache this with image src attribute, but with data url ? How ?
Should work the way it usually does:
var image = new Image();
image.src = "data:image/ png;base64,iVBORw0KGgoAAAANSUh.......";
image.onload = function() {
//image was loaded
};
Caching by the browser is of course disabled for Base64 strings, that's why it's normally only used for small images, like icons and stuff.
You can convert images to Base64 online here : http://base64img.com/#encode
Note that some browsers can have limitations on size for Base64.
Seems that style.BackgroundImage property do not set the value asynchronously. So my problem is solved.