admin管理员组文章数量:1415119
I'm basically trying to select an image via a HTML Input and then receive the image via Javascript and get its Base64/Image Data string.
However, the code I've used only returns half of it/partially/corrupt/invalid representation of the image. I tried converting the base64 string returned by it using an online tool and it just returned me a blank image (meaning: corrupt base64 representation)
Here's my Javascript code:
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var img = new Image;
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function () {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0);
}
var imageData = c.toDataURL('image/png');
alert(imageData);
Here's a JSFiddle. /
As you can see, the base64 string doesn't seem right: as in, the string either seems partially formed or its invalid all together. I can't seem to convert it back to an image.
What am I doing wrong?
I'm basically trying to select an image via a HTML Input and then receive the image via Javascript and get its Base64/Image Data string.
However, the code I've used only returns half of it/partially/corrupt/invalid representation of the image. I tried converting the base64 string returned by it using an online tool and it just returned me a blank image (meaning: corrupt base64 representation)
Here's my Javascript code:
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var img = new Image;
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function () {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0);
}
var imageData = c.toDataURL('image/png');
alert(imageData);
Here's a JSFiddle. http://jsfiddle/t2mcr3Lr/1/
As you can see, the base64 string doesn't seem right: as in, the string either seems partially formed or its invalid all together. I can't seem to convert it back to an image.
What am I doing wrong?
Share Improve this question asked Nov 10, 2015 at 18:46 JayJay 5,0849 gold badges78 silver badges142 bronze badges2 Answers
Reset to default 4I think you might be hitting a minor timing issue. You are creating the image from the chosen file, then you are drawing it to the canvas on the onload function, all good. Issue is that you are trying to get the imageData (i.e. c.toDataURL) immediately after you set up the onload handler, NOT after it has run, so I would say the canvas hasn't finished drawing the image when you try to get it via c.toDataURL();
as per this Fiddle
all I did was move the toDataURL inside of the onload function, so now it runs after the canvas has drawn the image
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var img = new Image;
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function () {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0);
var imageData = c.toDataURL('image/png');
console.log(imageData);
alert(imageData);
}
I also added a console.log, as in chrome at least, if you log the url to the console, you can then just click on it and see if chrome then actually opens the data url as the image in a new tab, easiest way to test it.
Also on what you were getting before, I don't actually think you were getting corrupt/partial/invalid base64 at all, as every time the initial code ran, it returned the same base64. This was actually valid base64 of an all white image, i.e. the blank canvas element before anything was drawn on it.
You simply need to put your toDataURL()
code into your img.onload
event handler, as you're currently trying to get the data URL of the image before it's had a chance to fully load.
// Full code from provided jsFiddle link
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
function handleFiles(e) {
var c = document.createElement('canvas');
var ctx = c.getContext('2d');
var img = new Image;
img.src = URL.createObjectURL(e.target.files[0]);
img.onload = function () {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0);
var imageData = c.toDataURL('image/png');
console.log(imageData);
}
}
Try the above by copying the data URL it spits out into your browser's search bar to load the image.
本文标签: jqueryJavascript Base64 Image Data is corruptinvalidStack Overflow
版权声明:本文标题:jquery - Javascript Base64 Image Data is corruptinvalid? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1745217913a2648257.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论