How to convert image to base64?

I found this code:
getBase64Image function(img) { 
 var canvas = document.createElement("canvas"); 
 canvas.width = img.width; 
 canvas.height = img.height;

 var ctx = canvas.getContext("2d"); 
 ctx.drawImage(img, 0, 0);
 var dataURL = canvas.toDataURL("image/png"); 

 return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
}

But when running error:
VM2785:8 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
 at Error (native)
 at getBase64Image (<anonymous>:8:26)
 at <anonymous>:1:1
 at Object.InjectedScript._evaluateOn (<anonymous>:145:167)
 at Object.InjectedScript._evaluateAndWrap (<anonymous>:137:25)
 at Object.InjectedScript.evaluate (<anonymous>:118:14)getBase64Image @ VM2785:8(anonymous function) @ VM3093:1InjectedScript._evaluateOn @ VM3078:145InjectedScript._evaluateAndWrap @ VM3078:137InjectedScript.evaluate @ VM3078:118</anonymous></anonymous></anonymous></anonymous></anonymous>
July 8th 19 at 16:40

Related questions

More answers about "How to convert image to base64?"
3 answers
July 8th 19 at 16:42
Solution
Turned out to be need to register by adding crossorigin="anonymous", but this attribute must be defined in the img once, but not with js
July 8th 19 at 16:44
Solution
How to get rid of errors "Tainted canvases may not be exported"?
I did so: for (var i = 0; i < document.getElementsByTagName('img').length; i++) {
document.getElementsByTagName('img')[i].setAttribute("by adding crossorigin", "anonymous");
}
But it's still not working. - Nikita20 commented on July 8th 19 at 16:47
July 8th 19 at 16:46
If your task does not require writing JavaScript code, you can use Notepad++

- drag the image into the program:
046e6441c1194b45a7b4650438f8ae55.png
- Edit --> Select All or (Ctrl+A)
- then: Plugins -- > -- MIME Tools> Base64 Encode
bc82f841fb7c427f8c1d4c1981b681b7.png
- as a result of the image code looks like this:
9a80ee1a0a8548a48d73d07c4e917f1d.png
- add 
<img src="data:image/jpg;base64,code Here pictures">
to the previous code.
the result:
<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEbqohbwyidaomdaskcwsndhiqdq4rdgslebyqermufruvda8xgbyugbiufrt/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUfbqufbqufbqufbqufbqufbqufbqufbqufbqufbqufbqufbqufbqufbqufbt/wAARCAA8ADwDASIAAhEBAxEB/8QAGwAAAgMBAQEAAAAAAAAAAAAABgcEBqgcawn/xAA1EAACAQMEAAUBBwMDBQAAAAABAgMEbreabhihbxmxqveicbqyqmgbkrukcqkwssmzkthw/8QAGgEAAwADAQAAAAAAAAAAAAAAAgQFAamgaf/EACIRAAICAgICAgMAAAAAAAAAAAECAAMriqqxehmfusjb4f/aAAwDAQACEQMRAD8A+lsVXDnHMHAzr2FwpwSC4BGlpFfmAHInkpca7/3AjH8R5605MMKMRlf1GAMoznJwCNSg6ka560tk3cvrsxk49djuqm3ikfhjzg/I6OsyZ5iMAunzjXhJWQRycGkCt+ug0bx80kGQKMeq6qZdwFpT+In5Os3AjGklTsajNLHn1H86EZLvKtArgsm4gfxvtnekin8fx/jWbg4kaKugX8igf41IW5QKQeK5+caSN28Qbklvl8mkqIKgMoQpGshxnsnDEentqysm/wA3SlUCppTVLjzI5G4MvpksPy+vpjWsso7jAVj1HF/WYzjODjQv4oeLdg8KthXfdu4SwtVsiEkvlx+Y7FmVEVR8szKv76DW3y5h5xGGT1yVfKpg4pjugo+u8d6DPGHcAvuwaugrJIVoKl1+9GBxK4SNlkI4/B4hc+n1aBrEVSYddNljhcdzCni3/qL+JPiDdqxLVXT7X2+ZW+70dqf7vMsefp5zL9ZbHrxYDPto++zJ9v2o2JI1Ff6y/wC5KSokBmW5Va1DU4JILRs/1n8pxyI9eh6kBuXgfbt61s9Xt682p7cjf3mdta9o0iz2wycraa8um98agln9nyvtyehb11tvs8kc1+71SM7EDv6c8uJGSOv0PXell59LEKRiXbpileqkeet7kug6uudbs1dplhls1mstwylndxsozsp8gg/vrt7y5YkCPGs+eDW7Kyy+D+0Ke4U83mw2qAAsCWdOP/T6APZTj66JH8VqRHZHjZXU4ZSQCD++NPAqejOZZXU4IgLU7gjpGMMtZAH45CTVcr569urgf20j3a8vce1ma0utvo/kQMW5sj5UMolIAjbskZwMjGTnSyuJvFFb4b/X1JubyQI0klNJFKTGcFSYu3A4kHtB0QB1gawo7ltckepzjt1nlajsqrpe0kcq8woeac5+pD6fmHyNSruQU2dyqlAVciaxn8bdtWCrqdugos0or4rl530jojidg5ot6fgqvbpjjrbs3du0vprntiry/wByyceQOCoIzkniT/B+dZytm1YKitg++3mnp69YxKtPTU00k0Z5Y44cRqz+vQY94BPemdtLw0uW3LjT3a8XQ08eQ0cApue8ikhhmak8b6z9t6jr10ktwuvgqmo1rztyjsdz+xGfeqSmgeaKltqyiqCiSSApl++ww6ONUdfsja20Wkr4aFIagZkHF24owH4iucha98a8rnbdvnvrncimiqvu/QCkn65xk/zqp3ha7lurblTBZER6hsLBFPKIzIo7OOxxwoyb336ykfqluaj1vkvwuosyt2pfr2vswi30lmgxzunlbvyxkqmwfpscr647+PnXVbvO62uvqYBTJVfXzMk607MSQCeww6/yM6z7cKy8Wy7UNJuO15mWSOaVbg2PMAwppl2ta74nhumy0vje+19xQQVt6uVdBVspVYqCnfy0QM3EHyiAT795py7xgcn7cgcne5gz12oz5o9xupuk6220sqjipmdiytxzmzuovydn0w/AOWMjAwRjV54eS3TxGudLZuBuE1PGfJqa1q5p0dxsxyghkvklqdkhl6hvskqqsytesevi3lryqfgohh8ixped36gf11px7kscjsblrvhgbndcab9kqe5ya/Uuc/OB8aCqhbmHluDfyrK/xQ6/v7jp2htmx7OAkpYs14VuUkyjkCxLNxPscwp646zqbc6eo9oa2bkv/bOej8qR+vWD7Y0PX2tmhqYVV2KykIwYk9Ee3x+2o1muE8jOWfkRxI/8Af8An/nVkBUXwUakvJY+ZO4T0FqSkf7tXw8qYgYDr9Ufx18aFPGijg2oltflcszwfjcpehb6wh5ijuh6nyppa9cfhpi+Ur2BahstL53DkSThePp/98aFdxcZLJcQ6LIpp3BRhkEFDkY/bSi8ZBaHXRjx59npat9iXVxs9FuG0mC5ucvttlz4zhmnqi6ll7j1h1d51lbxl8hbtbn11enmpqq5wzipgktjlf9kbpup/WtT7Zmkj2ttwiQsTtuOoPIA8meNWOfkAnrvhuuhj/qxGW6Qd/PZ03yKFOCZI415JI+p/9k=">
and if you take dynamically ? ie it is necessary to encrypt the image from db - eat you have an example ? - Nikita20 commented on July 8th 19 at 16:49
Yes, you can. Rarely do it when we need an approach https://habrahabr.ru/post/46466/ - Sasha.Gorczany commented on July 8th 19 at 16:52
I need to get a captcha VC, had to replace the function you used to create the image and add the attribute by adding crossorigin="anonymous". Now it works, captcha razvalivaetsya! - Precious commented on July 8th 19 at 16:55

Find more questions by tags JavaScript