20

This is my Javascript code

function upload(){ var byteCharacters = atob($scope.image1.compressed.dataURL.replace(/^data:image\(png|jpg);base64,/,'')); var byteNumbers = new Array(byteCharacters.length); for (var i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); var blob = new Blob([ byteArray ], { type : undefined });

This is my HTML

<div class="form-group text-16px" style="margin-top: 20px !important;"> <label>Choose Material Photo : </label> <div> <input id="materialImage" type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.7" resize-type="image/jpg" file-model="file" name="materialImage" onChange="checkFile()" ng-image-compress/> <div id="choose-image-compresser"> <div image="image1" result-image="myCompressedImage"></div> </div> <img ng-src="{{image1.compressed.dataURL}}" /> <span id="image-size-error" style="color:red;" hidden=""><small>Image size is too large</small></span> </div> </div>

I am getting error

Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded

Improve this question
5
  • in my controller var byteCharacters = atob($scope.image1.compressed.dataURL.replace(/^data:image\/(png|jpg);base64,/,'')); var byteNumbers = new Array(byteCharacters.length); Commented Sep 14, 2016 at 12:52
  • my html code is <input id="materialImage" type="file" accept="image/*" image="image1" resize-max-height="800" resize-max-width="800" resize-quality="0.7" resize-type="image/jpg" file-model="file" name="materialImage" onChange="checkFile()" ng-image-compress/> <div id="choose-image-compresser"> <div image="image1" result-image="myCompressedImage"></div> </div> Commented Sep 14, 2016 at 12:54
  • Possible duplicate question, Check here stackoverflow.com/questions/22578530/… Commented Sep 14, 2016 at 12:56
  • please check my code i'm using image compression in my controller Commented Sep 14, 2016 at 13:01
  • 1
    @ARJUN Please check my code and understand my problem. please don't give me a negative marking. Please check my code. i spent 4 days. and i'm not able to find out proper solutions. Commented Sep 14, 2016 at 13:50

2 Answers 2

Reset to default
23

I got my problem. It should be helpful for another user for save the image and compress the image using javascript(AnguarJs).

I am flowing this link to compress the image Github

https://github.com/oukan/angular-image-compress

var imageData = $scope.image1.compressed.dataURL.toString(); var byteCharacters = atob(imageData.replace(/^data:image\/(png|jpeg|jpg);base64,/, '')); var byteNumbers = new Array(byteCharacters.length); for (var i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); var blob = new Blob([ byteArray ], { type : undefined });
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks! this worked. I was getting this error while taking photos using my laptop camera. changing the replace string worked for me.
@JagdishChopde: Welcome >(* _*)< , Glad to help
2

After checking out your code it seems like you have characters which are not probably supported. Check screenshot If that doesn't work make sure the name of the file you are trying to upload is encoded to what your database or settings support.

Here is the code without those characters:

var byteCharacters = atob($scope.image1.compressed.dataURL.replace(/^data:image\/(png|jpg);base64,/,'')); var byteNumbers = new Array(byteCharacters.length);
Improve this answer

4 Comments

var byteCharacters = atob($scope.image1.compressed.dataURL.replace(/^data:image\/(png|jpg);base64,/,'')); var byteNumbers = new Array(byteCharacters.length); for (var i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters .charCodeAt(i); } var byteArray = new Uint8Array(byteNumbers); { type : undefined });
@VedPrakash You seem to have an encoding problem. After I copied your I noticed that part of it is not UTF-8 Encoded. That might be the reason. This part of it to be precise " /^data:image\/‌​(png|jpg);base64,/,'‌​' " I deleted those invisible characters so it should be good. This is the new code: var byteCharacters = atob($scope.image1.compressed.dataURL.replace(/^data:image\/(png|jpg);base64,/,''));
#Earl :- Code is not working. Still i have same problem
var byteCharacters = atob(imageData.replace(/^data:image\/(png|jpg|jpeg);base64,/, '')); ***i added jpeg any my issue is fix.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.