I want to store image locally and use it to anywhere in tizen application.
I tried by using canvas but canvas data uri not showing exact image which have in URL.
The snippet of code who I am using.
var img = new Image();
img.src = imageURL;
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var data = context.getImageData(x, y, img.width, img.height).data;
localStorage.setItem('image', data);
Your code does not work because you want save an array to localStorage. Instead of context.getImageData() you have to use canvas.toDataURL() and then convert dataURL to Base64 string image. After this you can save it to the localStorage.
Your image must be online and in the same domain like your script. It is because of Cross-origin resource sharing (CORS). But if you convert your image like me in dataURL before and then you should not have any problem.
And to localStorage you have today (in 2018) an access only in online mode. Please read:
localStorage access from local file
Full example
See this working example on codepen.io (link to example) because on StackOverflow the snippets are sandboxed and because of this we can not have an access to the localStorage.
var canvas = document.createElement('canvas');
var image = new Image();
var ctx = canvas.getContext('2d');
image.onload = function()
{
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
var dataURL = canvas.toDataURL('image/png');
var Base64StringImage = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
localStorage.setItem('image', Base64StringImage);
//read from localStorage:
document.querySelector('img').src = 'data:image/png;base64,' + localStorage.getItem('image');
};
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADnElEQVRYhaWXz2/cRBTHP/Y4zka0ShPQJluJLkl/0EsSl24OCAgRFQoH1Ir/oNmeEJdScYUDXOitSBxASFmQ4MSJay6EtojLgvIDCUKhaQIipCI/SlKy690Zc2jWa3ttT4Tn9p3v6H3fe/Pm2c/wPM/jYC25n1Nnl5L9emuLDbnIgBj18ba6S5857ONPHz5P3MqbIzh2meNi3N+Ls28Fye8bH/lE69C8O8NUzw1/f8GtMJl7L1Y0STjNvhUkz1iXsI0j/Nj4wj+0rqqhLPwpqx1ZSRPW2beC5LP2WxiGAeAfistCEKcJR8Xj7Ft1dgGwjSM+2c1RAFxvD6AjC0G8o+4xV3unQzgvRnC6yujsW627aHnUzdGQx780v0rNgnsg4AtHMvKEOJtq32rdRfBQNF3BqJNw2lWk2beih1xvr0M8GHUU62pAZ9/4q7ngpb3zb+vvs6XusKmWQwaPGUMURIkm+6n8T80vYx0qmOdx7DJmNKoFtxLCf6ufeTX3CRe6r/O4+TTHjCEmu9/lUs9n7KgVLR9dg+Y5Xsl9yFTPBwyIMSzdO99Wv7Imb1O0JthWK7js8pT1EhtykXVVBdDyAAPmGI59hYJ4JuSQBenvHGC+McMDtcoPjY/9vU25fCg+b44e1Egp9iosSH/nAMprhJ6b6+0hqfs4jd9RK8zV3u4QLojzOPZ0+xWkZWHMvsyw9TJg+FW8rqrM1t7U8tE+MWiew7GvMCicdgaCUUdxr1FkSFxgQy6yKZeR1FlXVY6LcfLmCHXvn1T+vloCkmvAqOw953+OC2aJTbXse10wS/SaT/JA/R4qKHjUePJilKb3byp/Xy6l18Dlx27HEtvqLgtuBUmjI41wcM+eq+VzRi+ztav+/gnxAmvyVtuBJOF7cg7w6DNPcTE3wx/yO+YbM0jPxbGnKYpJZmvXqLGTyo/bb4QEna5yvANR4fZ+tj7QL06Hoo5iK0k4uLL0gbiog9jqM4djf7Hajn2dqQ/ERR3E2hqAbH1AlwVtDWTtA9EsRLGxJX/z0mrgrPVapj4Q/AXfknfoF6dD2NDNBUmrlTGFZE3e9PdPiIkQDvaZ/zUXJAm3MnYxVwkJOl3TIayzr50LkoRb69FdtqOOYp197Vxw0prS9gnHLrO2f8vngzjzXKDrEwD95imKYoJV+U0HzjwXJAlHMzJml1ndv9mBdfYPPRfoWna/eZKieDEWZ5oLDvOtaC3Hnk7ESfb/A1K3qRpcj5DtAAAAAElFTkSuQmCC';
<img src="#">
Related
const arrUrl = [
'https://avatars.mds.yandex.net/getzen_doc/1714479/pub_5e4b9183baec8f365f1ff215_5e4b91c9bb4a6d368b8d9d4c/scale_1200',
'https://avatars.mds.yandex.net/getzen_doc/1714479/pub_5e4b9183baec8f365f1ff215_5e4b91c9bb4a6d368b8d9d4c/scale_1200',
'https://avatars.mds.yandex.net/getzen_doc/1714479/pub_5e4b9183baec8f365f1ff215_5e4b91c9bb4a6d368b8d9d4c/scale_1200',
'https://avatars.mds.yandex.net/getzen_doc/1714479/pub_5e4b9183baec8f365f1ff215_5e4b91c9bb4a6d368b8d9d4c/scale_1200'
];
there is an array of different links to photos, how to make them all in base64, I have a script that makes base64 photos, but I can't combine them
var img = new Image();
img.crossOrigin = 'Anonymous';
// The magic begins after the image is successfully loaded
img.onload = function () {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
ctx.drawImage(img, 0, 0);
// Unfortunately, we cannot keep the original image type, so all images will be converted to PNG
// For this reason, we cannot get the original Base64 string
var uri = canvas.toDataURL('image/png'),
b64 = uri.replace(/^data:image.+;base64,/, '');
console.log(b64); //-> "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWP4z8DwHwAFAAH/q842iQAAAABJRU5ErkJggg=="
};
// If you are loading images from a remote server, be sure to configure “Access-Control-Allow-Origin”
// For example, the following image can be loaded from anywhere.
var url = '//static.base64.guru/uploads/images/1x1.gif';
img.src = url;
or
https://gist.github.com/CawaKharkov/1c477d44fcfdf67aea3f/revisions#diff-7b3e9484330c338cea137079906c2390c4961003e07e3a9d13bed49d9d63805eR17
function getImageBase64Data(_id)
{
var c = document.createElement('CANVAS');
var ctx = c.getContext("2d");
var img = document.getElementById(_id);
ctx.drawImage(img, 0, 0);
var dataURL = c.toDataURL();
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
I'm using HTML5 canvas to obtain base64-encoded image data. However, the resulting base64 encoded string is different and smaller than encoding the original image file with external software.
I suspect what is drawn on the canvas is the the resized/compressed image data rendered on the page, not the original source data. Is this the case, and how could I obtain the original bytes of the image? It is essential, that original bytes aren't manipulated in any way.
To make it shown without compress, change the height/width for canvas itself:
var img = new Image(); // var img = document.getElementById(_id);
img.onload = function() {
var c = document.createElement('canvas');
c.width = img.width;
c.height = img.height;
// ... other stuff
};
I am trying to draw an image in the canvas. The image that I'm using is got as base64 string from the server. For testing purpose, I have saved the image to the disk both at the client and the server while debugging. The image is saved fine. While drawing in the canvas, the image is not rendered in Chrome and Firefox. But it works fine in IE 11.Is there any way to make the images draw in all the browsers.
var base64String = "data:image/png;base64,SUkqANZ1AQAAEbQhURQh0dUQ6mh0dHQ62ao6GIEQkpodHSEOqKiHXodDqaoh1NOqKaOjo6HU0dUQ6mqIdeh16dSUJQqJCmh0hUR0OvQ6HU0OqIdenXodTQ69DqidTVEdOpodIXIdDr1RDokXIdeh0OuQ6HXodDr0Oh16HQ6oh16HQ6mh1NDqioi6XS0OqKidcnXp16HTr0OqIdHQ69Dodch1PHX469D1EOvQ6HU0OqIdch0hUQ2h0dF0DVEOqI6HS2tgiHQ65Do6Qh1NDqiQqIdHU0OhiOhCHU0dOqL0OpqiHXodDpe0XR0OvQ6QqIdHVE69DqaHXpOADuamqIujo6IR1t1RHVEhHR0dBqiOi6OkI6BobS8IQgRF1RHSEDR0dA0hNypCEOqIhAilqtlCS1uEDSEDQmhpURCmh0XR1sYqI6Bo6og0NI6QkJCLoGhpSLpCGJCEJCQjoQh0dIVEdBEDRmACU.." //only few of the string is shared
function drwImage(base64String) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload=function(){
context.drawImage(img, 0, 0, 1, 1);
}
img.src = base64String;
}
Thanks for your help in advance.
Seems something related to the serialized image, as you can see in the snippet below, it works on Chrome, I used an online encoder.
As you can read here the datauri is almost supported at all.
var base64String = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QAqRXhpZgAASUkqAAgAAAABADEBAgAHAAAAGgAAAAAAAABHb29nbGUAAP/bAIQAAwICCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICggICAgKCQoICAsNCggNCAgKCAEDBAQGBQYKBgYKDg4KDhANEBAQDw0NDg4NDQ0NDQ8NDQ0NDQ0NDQ0NDQ0NDQ0PDQ0NDQ0NDQ0NDQ0ODQ0NDQ0N/8AAEQgAjACMAwERAAIRAQMRAf/EAB4AAAEEAwEBAQAAAAAAAAAAAAABAggJBQYHBAMK/8QASBAAAgECBAMEBgQKBwkBAAAAAQIDBBEABRIhBggTBwkiMRRBUVSU0xgjMkIVFhkkUlVWYYHSF1NicZGj1CUzNENylbG0wXX/xAAcAQEAAQUBAQAAAAAAAAAAAAAAAwEEBQYHAgj/xAA+EQACAQIDBAMMCQUBAQAAAAAAAQIDBAURIQYSMVETQWEHFRYXIlNxgZGSsdEUMjNUYqGiweEjQlJy8EMk/9oADAMBAAIRAxEAPwC1IHAC4AMAGADABgAwAYAMAGADABgAwAYAMAGADABgBMAF8ALgAwAYAMAah2k9rmWZPAanNK6moYR5PUSqhc/oxp9uV/7Eas37sARkzTvaeDI3CJV1s416TJFl9QEC2J6n1qxOUBsuyFrkWUi5AHbuxjmw4e4gFspzSnqZbEmmYtBVgA2LGlqFinKA/fCFPLxG4uB1sHAHyqqtUVndgqKCzMxCqqjcszGwAA3JJAAwBGLjzvMODMvkaJ82FVIrFWWhgnqlBW4J60cfo7C4tdZTe4IuLkAfPsx7zHg/NJUhTMvQ5nAKpmML0ik/oekPelD3IAUzjUT4dW9gJRU1SrqrowZWAZWUhlZSLgqwuCCNwR54A+mAAYAXABgAwAmAFwAYAMAcl5oeYSl4ZyepzSpszIOlSQE2NVWSK3RgUjcBiC0jAHREkjfdwBQZx72jZ7xdmglqXmr62ZnEMEe0UEZOrpU8ZIjggjFty3kLu7m7GGvcUrem6tWW7FcWyjeSzZ0vKe73zmSAyST0UE1rpTvI7sf3PJGjIhv6hr/v9Q55W7oOFU63Rx3muuSWn8kLrRONcZdn2aZDWRCdZaSpiYT088T7ExsCJaedDYlWAOxDLtcLcX3qwxG2xCn0ttJSj8PSuokjJS1RdH3dHOj+NGWvTVzWzjLI4xWOQqLVwsWWOsQLZQx0aahVVVSQhgFWVFF+eyA3eCd4LV55VVOU5VUNBkcLvC7wsyvmZFleSZtj6LqDCOFSFkXxvq1KqAcN7K+TfOM0SOfQlHSyKHSeqYqXQ+TRwqGlIPmC4jUqQQSCt9Oxba7DcMk6c5b01/atfa+ohlVUT5drPKFnGURvUOkdVSpu89KxfQvlqliZVkRfawV1UebDe0uEbV4dib3aM8p/4y09nMRqqR37u4ufSfI6uHJszmaXJqqSOKFpGB/Bk0jm0qEi/osjOOtGW0x7SrptKJNtay0JkXaK198UA7ABgAwAgwA2SQAXOwHmTsB/HAEaO1zvG+EsnMkcmZpWVEZZDTZcpq5Na3DIZEtToQwKkPMtjsfZgCM+f99zlyt+a5FWyrf7VRVQU7WsLeGNKkA3uLa/UN9yABivy4kP7OS/9yT/AEeAIs89HPmeMky2GOgfL4qF6mR1ap9I60k6wojG0cSr0lRwLqx+saxFyDVcQb/3dvBES0VbmDRjry1JpY5SLssMMcUjhCfJXkl8RH2umo+6McF7pmJVITpWcJeTlvPLrbbWTLG4l1HRuM+b/L6LNxlMkUzEPFDNUrp6cM02kqpRiGZU1rrdT4bkAPpONesdg693h301TSk1vJdiIlSbjvGz8zHZzDmWT1scqjqQQy1NPIfOOaFC4sfMB1UowHmrHbyxiNj8UrYfiUKafkyluyXp0KU5brK5ewHtuqOH69q6m1FpKKto3UELqSrpnjU6rEr0p+jPdSrHpWDLe+PrJoyh7uVvgVMxz2ggkQPCshnmRgGV46dGlKMpBDLI6qhBFiG3xrO0l+7DDa1eOkksl6XoR1HlHMsY7ce22lyKkSpnjeVpJBDBBHZTI4BY+IjSiIguSf7IAJO3zTs9gFfHriSU8ktZSfHX4mOhF1Gz29j3azTZ3QrWU6sql3gmikALRzIql4za6OumRWDC4ZW8lN1WHHcGr4Ddqk5Zv60ZLTQpKO68it7mq7PYstzyrp4ECQP06iFB5Ik6B2RR91Vl1qi7WULta2Pp7ZvEJX+HUrif1msn6usyNN5xL6eUHiqeu4XyGqqX6k82WUplc7F2WMJrb+0wUMx9ZJONjJTr4wAuADAGs9onaNRZTRT5hmNRHS0dMmuaaQ7AXsqqBdpJJGISOJAzyOyqqsWAIFJ3Ov3jeYcRyT0FA8lDkdyiwr4KiuVTtJWODqEbEalpUIQAjX1WAIA4b2X8rGc5sqy09MIqdvs1NUxghbYEdO6mSQMDs8UbpsRqBBA1vFNpMPw3SvUW9/itX7Or15EUqiid9yfu320/nGaqG2ssFKWUe27STKT6h9hbb+d8c6ue6bbxllRoNrm5ZfkQO47D3fk3Yf1tL8Inz8WfjPj93fvIp9IfIcnduwXF81mIuLgUiA29dj1jv/A4p4z11W794r075EoOy7s2p8oooaGm1mOLUS8hu8juxZ5GsAAWY/ZUAAWA2GOSY9jNXF7p3NZZN6JdSRazlvM0fiblQyirzP8ACsqzdcukrxLIBTyyx6NEjoVL38A1Ksio+5Km5vtVntzeWtirJKLSTSk+OT6l/JJ0jS3UdeqoVdWRhdXVlYe1WBBH8QT5Y59SuZ0qqrR+smn6yFaEQ837uSkaR2hzKeKIsSkTU6SlFO4TqdVC2nyBKg2Avc3x2+l3UMoJVKGb62mXX0g6T2BcpFLkVQ9WKqaqqGiaFSyLFGiOVL2RWcsx0qLs1gL2AJxrO0e288Wt/osae5BvPjm3l8DzOtvLI3/te7HKLO6UUtYJAqOJYpIXCSxSaSmpSVZCCrEFXR1PsBCkaxs/tFcYLVc6STUuKfIghNweh7ey/supMnpFoqJGWIO0jM51SSSvpDSSNYAsQqLsFAVVAAAFrbHMbrYxX+kV+PBJPhErKW/qQ054OwqvOYS5tBDJUUk0UXUMYaVqd4YxG2tFW6REIGD+JQS2ortjvewuPWc7GNlOSVSGmT03s+tPrLyjNZZMwfKZz/ZzwtJHCJGr8o13ly2dyQimwZqOYgtSuALhFvCxvqjudQ6q0i6Lyexftioc+y6nzPLpepTVCnY7SQyKbSQTJc6JYmBVluR5MCyspNAb0MALgCkHvXuZs5vnf4JpqjqZbk56ZVCelLmRBFVKbMVlNMPzRGZR0mFUF2lZnA4Vy3x8Nwu1VntQWZGAp6I09RNC1hcy1BjidXW5ssOq2xLhgQBq+P8AfSdLosMUU3xk2k16M/j7CKe89ETMTnY4aAAFcwAFgBR1gAA8gAIAAP3D/wCY4RV2AxqrJzqbrk+vfRZdBN8R302uG/fn+DrPkYg8XmMcoe8ivQTE+m5w178/wdZ8jFPF3jHKHvIdBMU87fDfvz/B1nyMV8XWL/4w99FehkA52+Gvfn+DrPkYeLrF/wDGHvop0Mg+m1w178/wdZ8jFPF3jHKPvIr0UxDzt8N+/v8AB1nyMevF3jHKHvIp0M+QfTb4a9+f4Os+Rh4u8X4ZR95DoZ8gHO3w178/wdZ8nBdzvF1wUffQ6GZuXZ/zA5Nmj9KiropJjciB1kgma176I50jaSwBY9PVZdzb14PEdkcTsIOrWp+TzT3vbkRypyidExpr7EeBLYrCpKOqYIjc3XKclRHJmmVxKk8avJV0sShRUqLu08SqP+IFyWQD65Rt4h9Z33YzbJy3bG+nxeUJP4Nv/kXVGo+DOcd3ZzcScM5zHBPJ/sfM5IoK1GeyU8jNoir11EKhhLWmP34NV9Rjj092lnxZfF9yYoB+APyzZ5UM80rMSzNLIzMxJLMzklmJuSSTckn/AMnAHo4ZyI1NRDTiSKJppFiWSdmSJWY2XqOquUUsQNWkgXubC5CpW6OEpy1SXVrojy3kSF/J959/WZd8RL/p8c4l3QsKhNpuea/B/JD08TSe1rlazDJaZamtmotLyCKOOKd3mkYgk6EMKghANTksLC3mSAdhwbaW0xeco2qm0uLccl7cz3GopcDjmNrJTufZzyf5pmtHFXUc1A0EuoAPPKsiOjFHSRegdLKw9RIIKsCQwJ0vFdrbHC6/0e531Lj9XNNdmpE6ijxMlxTyP5xR009XUS5esNPE80hFRJfSguQoNOAWOyqtxqYgYt7DbfDr+tG3o77nLh5Px1KKrFvQj2V3xvefMlOt9kHLPX55DLPQy0doZOnLHNM8cqkjUraRCwKOL6WDG5VhsVIxrWM7R2uEtO73spcMo5/uRyqKPE3t+7+z0AkyZcAASSamWwA8yfzfyAxrtLugYTVmoQ3828l5HW/WeOniRuqYtLFbhrEgMtyGsbArcAkN5i4BsfIY6S5aarT8/WT56G68c9k+aZNJE1XTy0xOiSCYHwFrB16c0Zssqeei6yIVOwtjF2uIWt9vQpTjLLRr9muR5UkyafJtzOSZmGy3MJOpWxIZKedgFNTAtgySWtqqIr6tQW8kd2PiR2bhO3mykLVd8LWOUX9dLgnzXZ8CyrU8tUSmvjhrWRbgDiWEpRaaYKtebrs7TLs8qkiTpwVASriX1ATgmUL6gqziQBfuCw3AGPsbZXE3iGGU6rflJbr9K+aMnSlnEux7v/tc/DPCeUVDMWmp4Bl9SWYu7TUNqfqMzElmmjSOck/1uNrJSRWAPzB8HIDmlKCAQcwgBBFwQalLgj1g+WLevJxozkuqLf5HmXA33ms7IfwRm88cceijqS1TSaRZBG58cI9Q6EhKBbmydM/eGMHs5i0MTs41M/LWcZdjXzPFOW8ib3KX24rm+Wqszj02iVYqoEqC6AWiqdrDTIq+MgAK6v5C2ODbbbOTs75VaMf6dR6dkutFlVhuvQhRzXdtRzjM3MbE0dLqp6Vb+FlVj1Z7e2ZxcE/cWMerHctlsEjhVjCnl/UflT9PL1F1ShurUz/HHKfNScO0ub3k9JNpa2nZbdKmnIEDBdOpXi2aYN6pDfT0je0tNqqNzitTDlwWilnxkuK+RVVE5ZGwchvbGtHWyZZUSMsOYOno9yOmlaPAoN7EGpTTECDu6RLbxXXE7fYFK/tFXoLOpT1fNx616uJ5rQzWZ0bvDe01oqelymNwPSb1VUARq6UTBYEIsTpklDPfbenAF7sBq/c1wpJVL+a/DD0/3f8AdpHQh1keOy/lsqczyjMsyi1E01lpYQPFUPGUkqgPCTZISQgXd5SBcAMD0/EtobaxvqNnPjU4vqjy/MnlUUXkJyq9s4yXM0klY+h1IWnqh6lVj9VPYn/kOdTb/wC7aQC5IGPG1OCxxeylTS8paxf4l1esrUgpImDzr9sQy/KvRoJAKnMgYkKt4lpdN5pRY3AdSsSsP6wkHw7cX2DwCVa9dxcRyjSb9c/44lpRhmyJvJx2RnNM3ikdSaXLylVMbXVnRw1PAb7HqupYj9COT+PXtrsYjhlhJ5/1JpxXrWr9Rc1JKKLFu03gaLM6CqoZhqSoiZV8rpKN4ZVJ2DxyBHBO1xY3BIx8zYBitXD76nWg+MlvavVPjmWMJNPMq35euIjS55lUov8A8bBE1vWk7dCQeY81kI9n9/lj6yxygrjD69OXDck/WlmZGaziW3EY+J5cckYpLQS2I0VIUd5HlCAZVUb9QmqgP70XoyL/ABDM1rfpHH0V3Mq8pW9ek+CcX7Uy8t+slT3JOau2S5xCTdI8zjkQb7NLSxh7b236SeQHr8/V2svCx/AH5g+Cx/tWk/8A0IP/AGUxbXX2M/8AWXwZ5lwZZlzQ9iozrLZIkA9Mpy09GxHnIo8UJO3hnS6bmytoax0DHzDsjjc8Mv3GefRTeUlyeej9Rj6c8mVk8JccVeWyTNTSyQSSwTUsttj05BpkUg7qw8wfNGFxYjH1DcWtG6ilVjmk016V1l+0pI61yedi5zbM0mlS9FQMk85YHTJIDeCAG4uWca2G40IQftjGq7XY1HC7GTh9pJNL5+ojqS3UWXZjlqTRyRSoJIpUaOSNhdXRxZkI9YINsfKNvc17evG4i3vp73/MxybTzKp+YHsilyLM5KcaxCT16KYXBaEtdLOP+bA31bbg6lDbB1x9gYHi1PFrKNbLVrKS5PrWXJmTpy346mucR8SVueZiJZSZ62rkhhVVFlZrJDEiruEXYXA2vqPrOMnToULChu01u045v92e0lFaFq3ZR2dx5Vl9LQRWIgjAd7f7yZvFNIf+uQsR7BYerHyJtBitTEb+dws+Pk9kVwMXOW9LMrx5xOx05VmskkUeijri1RT6b6UY268PsBSQl1UbBJEA8sfSuyWM988PhKb8uOkvSuDMhSlvR1OUcS8Z1Ve1OJ3eZ4KeGjgFrsIohpjQAbsxJ3PmxPrxttGhRt83TSSbcn2t8SRJItA5bex0ZLlcVOwHpMtqisYb3ncDwA/oQppiFtjpLWu5J+UdssZnil9Ldz6OHkx0/P1mOqSzkO5ie2SHJstqJTKi1ckTx0UNx1HncaFkCXDdOEt1XbYWTTe7KDXZLAK2I3tOUoPootNt6LJdR5pwbZXjywcFNXZ7lsaqSkNQlVKR92KlYTMxNxYFlRL+1123tj6S2iu42uHVpvi4uKXNyWSRkZt7uhae+eQixMgAN9JIKh7GxEZIAkN7bJq9Vr3Bx8qS2axLKMnRl5XDTmW/0Sssk4S14acT1QVKtex3HmCGVhcX3VgCNtxcb3xi77C7nD57lzTcHl19aIalCdGW7UTT7SDPeP8AEQaoyykVt4oZ6iRNtus6Rxk+sE9GT+8Y773NLZwsqtaS+tJZepfyie3WjZM7uV+Gni4ezGpZGUVObMI3PlJHBTQLdR7FleRSfWQR93HYS7LDNWAPy9cZZFUUFfU006tBVUlVLFItyrxTQyspsRYgqy3Vh+4g7jDJNag9/wDTFm/61zL46q+bi0732qf2UM/9Y/I87q5Gq1NUzsXdizMSzMxJZmY3ZmJuSSSSSdycXq0WSC0MxkXHldSqUpq2rpkZtTJT1E0Ks1gNTLG6gtYAajc2AHqGIKtClW+1hGX+yT+JVpGSHbDm/wCtcy+Oqfm4g732j/8AKHuR+RTdjy/IxOf8Z1dXp9Kq6mp0X0ekTyzaNVtWnqM2nVpW9rX0j2YuKVGnR0pRjFcopL4FUkuB4MszWSB1lhkkilQ6kkido5ENiLq6EMpsTuCPPEjSkt2XAqbL/TFm/wCtcy+Oqfm4su99r10oe5H5HndjyMZn3HVbVKq1VZVVKqSyrUVEsyqxFiyiR2Ckja4sbYuaVvSo/ZxjH/VJfAqkkYWnnZWDKxVlIZWUkFWBuCCNwQRcEeRxK0no+BU23+mLN/1rmXx1T83Fm7C1evRQ9yPyPO7HkfThrhrMs7qxHEKmvqXsGkkZ5Sq+ppp5CRHGu/idgBba5sMebi5tcPoupUcYQXoXsXMo2olhfL3yuRZLSzGR1lzGqi6c0y36cSHfoQg2OjUAXkIDSEA2QBVHz3jW26vLymoR/wDnhJPJ8Zfif7FrGvlUi+pMlJlmYJOiyAbg/ZYDVFIBZl/ssoNri11a48Li/wBK2F7RvKEa9FxcWll7Pidys6tG6oxqRyaS9hqfEuZRiWWZnVIoIyksjHSoKEu5ZjtphHhv91jKPVvwjuh3VO/vKVjbLfqx4tfi6jmu09zCvXjCnlotSp3mF7Rfw1nVTUwK7xu0dPSJYs7xxgRx6UF2vM5LhAL/AFgFr3x1bAcN722NO260te1v/sjAU1lHIv25T+yb8CcOZRlrIsc1PRxGqVTcemTDr1fisNX5xJJvbytjOkh1nAFVfe18m07zHinLYOrH0QucxRKOpF0QFjzHQq6pI+n9XUtuYhHFIQUMzxAQq5cOYtMqf0etpYaugkclrwRPUU7HzkiZhd0J3eFjv5qVNw+sY9hFW/pZ21aVOquGT0fZL5kU4OS0LCeEZsnzCITUS5dUx2uTDHTuU8jaRQuqNt91cAg7HHzliU8ew+bjcVKqXPN5Mx8nJPUzn4m0fulL8PD/ACY194/iXn6nvM870g/E2j9zpvh4fl4p3/xH7xU95jekH4nUfudL8PD/ACYr4QYl95qe1jN8w/E6j90pfh4f5MU8IMS+81Paxm+Yn4m0fulL8PD/ACYeEGJfeantYzfMPxNo/dKX4eH+TDwgxL7zU9rGb5geDaP3Ol+Hh/kw8IMR+81Paxm+Yh4No/dKT4eH+TFe/wDiP3mp7WN7tMpBSKgIRVQG19KhfLy8gPLGMrXtausqs5P0thvMfbFlnmUMdn3FMdDDLUS1ENLCVAlnmfQqAeTpfwmW11VbEsSvn0wp63sfjt7bU52lvCc95Pdy4RfPMz9hilazjOENVLh2FevNJzWnNfzHLzJDlqbOWBSSsZWNmcElhBsGWNvExJZ99Kr13Z3ZpWMpXd2964lq31RT6l29pZKLlJznq2SD7rTkckr6mn4mzNNNBSS68tgZQfTqqMsoqGDX009JKAyWF5Z0BDBYWEm+smLiANsUAmAG1FOGBVgGVgQysAVYEWIIOxBGxB8xgCsnnU7p9alpcz4WSKGZvFLkto4KeQ7amy9yUip2+8aaTTEbsUeGyxvUFYmc5BmmSVeiohrMsrYiSBIktLOtiVutwhdCQfEpZGHrYYiq04VY7lSKa5PX4nlxT4nRKPna4kRQvpyPb7z0lIzfxPRF/wCONOrbGYRVlvujk+xtfuR9FE+/04+JPfIfgqT5OIPAXBvNfql8yvRRD6cfEnvkPwVJ8nDwFwbzX6pFOhiH04+JPfIfgqT5OHgLg3mv1SHQxD6cfEnvkPwVJ8nDwFwbzX6pDoYh9OPiT3yH4Kk+Th4C4N5r9Uh0MRRzycSe+Q/BUnycPAXBvNfqkOhiH05eJPfIfgqT5OHgLg3mv1SKdDET6cnEnvkPwVJ8nDwGwfzX6pFehifGs52+JHVk9ORNQtqSkpFYf9LdHYnyuN/7sS0tisHpyUlRT9MpfMdFE5zW57muc1EcTyV2Z1MjEQw3nq5WYjdYYV1kbD7MaDYeW2NttrOhax3aFOMV+FJfAkUUuBYDygd0jVVDpXcUh6SnV1aPKY2jaoqQPFermjdxTQnZWhS87gsC1MVGq7zPRbRk+UxU8UcEEccMMKLFFFEoSOONAFRI0UBVRVAAUAAAYoD3YAYRgB+AEwBrvGvZ3l+ZRCDMaGkr4Q2oRVlNDUxhvLUqTI6qw9TAAj24Aj3nHKD2exVcNFNleTRVtVranpHn6U8wFi3Rp/SFZgNQ2RLAbDy2Az/5Pngv9n6L/Gf52AIn95Z2FcKcOcOl6HI6SHMMwqYqOkmQSloALz1Ew1TWBEURiXZiGmU2IDEARY7sHlfp+I87mkzCBajLMtpzJUwvcJNPUh4qWFtJDW2mn2I3gA3DWwBaue754M/Z+i/z/nYAPyfPBn7P0X+M/wA7AHNOYruyeHa3KKuLKMtp8uzJUMtHURNN4powSIJQzuDFOLxnwkqWVxcpbAFNXY/n1Ll2b0kma0K1dFDUiPMaKdGDGEkxTroOl0nhBZ0F1IkRVOxYEC87hnkc4FrKeCrpsjy+anqYo54JkM5SSKVA8bqet5MrA4AyZ7vngz9n6H/P+dgDqfZ32N5TlCNHleXUVAr21+i00ULSW2BkdFDyHYbuzHAG42wA4HABgBpGAH4AMANbAFHPea9gGeUnEmY51LBPLl9XLDNTZhArNHCqQxxpBM6X9GkhMelS+kOAHUkkhQGctPepZ9kxip8yJzrL1suiofTXRJsLw1hDNJpFyEqRLq2USReYA1PvDOb2Hi3M6OSiWZMuoaQJBHOipL6RUaZKx2VWcDdYoNmIIp9Q2e5Asz7rTsKbJ+F4KiYEVWcOMykU/cgdAlGlrC16cCY3F9U7C5sLATDwA04AwHGPHtDl8Rmr6ymoolBYyVU8UCADzN5GUG1x5X8x7cAUW945xHw1XZ62YcO1YqGq1ZszWOGWOnFWmkCeCSREWT0hCTL0wV6iF9TGVtIEou6D5syxPCtdISbSVGTMxvYKGlqqEHzAVQ9VED5D0gXFo1wBagMAJgAIwA5cABwA3AD8AIRgBNWAPPXUKSo0ciLJG6lXR1Do6sLMrKwKspGxBBBGAIK8y/dL5LmokqMmK5LXG7dNFLZbK3sanG9NfyDUxCLe/RfywBAvgju4M+j4lyzJ81opI6SpqdU9bAWlo5KOnXrVXTqY7dN3iUxIsohk6kieHfAF8FLSqiqiKFRQFVVFgqqAqqAPIAAAfuwB9r4A5TzU55mVLw7nFRlCu2YxUUr0vTUPKrC2uSJCj9SWOLXIiaWLMqgC5GAKB8t7OuJOIqsulJm2bVTOUeZ46icq12JWSeX6uEKQ20joqnbbAEney3udOJazQ2Yz0WUxNYsrv6bUrf1dGnPRJHrBql88ATZ7Au6lyHJKqnr5KrMK6upZY54JWm9EiiljbUrLFTaXIuAGSWeRHGpWUqxGAJrgWwAYAMALfAADgBCMAPwAhOAE1YACMAJgAwAoOAFIwA3ADUjA8ha5vt7fb/HAD8AF8AGnACYAMAAwApwAA4AdgBrYATACkYACMAFsAFsAGADTgBCMAGADAC2wAmADAAMAOwAAYAXACEYAXADWwAmAFbAC2wAWwAuAG2wAHAAcADYATABgAwA62ADAH//Z" //only few of the string is shared
drwImage(base64String);
function drwImage(b) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
console.log('load')
context.drawImage(img, 0, 0, 1, 1);
document.body.appendChild(img);
}
img.onerror = function() {
console.log('error')
}
img.src = b;
}
I am trying to generate a PDF from HTML using jspdf plugin. I am stuck with loading Images into PDF. There is a function addImage() in plugin which takes base64 encoding of an image, but converting an image to base64 is not working.
I have used below two ways
//Create canvas, draw image in context and get the data url
imgToDataURL = function (img, outputFormat){
var canvas = document.createElement('canvas');
canvas.width = 20;
canvas.height = 20;
var c = canvas.getContext('2d');
c.height = img.height;
c.width=img.width;
c.drawImage(img, 0, 0);
c.save();
var dataurl = canvas.toDataURL(outputFormat);
return dataurl;
}
var img = new Image();
img.crossOrigin = 'Anonymous';
img.src = "image path"
img.height= 60;
img.width=60;
var dataURL = this.imgToDataURL(img,"image/jpeg");
renderer.pdf.addImage(dataURL, 'png',x+padding,y + this.internal.getLineHeight(),imageWidth,imageHeight);
This is printing wrong dataURL I am getting a white image. If I hard code the base64 code i.e return a hardcoded dataURL then addImage works fine. So the issue is with canvas.toDataURL which is giving me wrong output
this is the 2nd way
convertImgToBase64URL = function (url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS'),
ctx = canvas.getContext('2d'), dataURL;
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
canvas = null;
};
img.src = url;
}
this.convertImgToBase64URL("Image Path",function(base64){
renderer.pdf.addImage(base64, 'PNG', 20, 20,48,48);
})
I have run this inside a javascript and the onload function is not even running I am not sure what is my mistake is.
Please suggest me what mistake I am doing in either way
In the first you missed assigning an onload function to your image. For that reason, the moment you try to create the dataURL, the image might not be loaded yet, ergo, the blank image. You could try changing the last few lines to this:
...
img.width=60;
img.onload = function () {
var dataURL = this.imgToDataURL(img,"image/jpeg");
renderer.pdf.addImage(dataURL, 'png',x+padding,y + this.internal.getLineHeight(),imageWidth,imageHeight);
}
img.src = "image path";
As for the second one, there seems to be a problem with the convertImgToBase64URL() which accepts 3 parameters, but you are passing 2. In you example, outputFormat parameter is undefined.
I am creating an app that allows the user to take the photo. The photo taken is drawn onto a canvas and tagged with the current date and other user specific information once the editing of the image is done on the canvas, I am able to get the image as DataUri but the app requires the image to be saved to the phones local file-system and get back the path of the saved location on the device file-system. The following is the code for the getting the dataURI:
var canvas = $('#myCanvas')[0];
var context = canvas.getContext('2d');
var imageObj = new Image();
var scale = 0.2;
var imgWidth, imgHeight;
imageObj.src = "data:image/jpeg;base64," + imageData;
imageObj.onload = function() {
var mpImg = new MegaPixImage(imageObj);
if (z.globals.deviceType == "iPhone") {
imgWidth = imageObj.width,
imgHeight = imageObj.height;
mpImg.render(document.getElementById('canvas'), { width: imgWidth * scale, height: imgHeight * scale });
} else {
canvas.width = 670;
canvas.height = 500;
context.drawImage(imageObj, 0, 0, 670, 500);
}
var dateTaken = new Date();
context.fillStyle = "#FFFFFF";
context.fillText(toString(dateTaken), 0, 30);
largeImg.src = canvas.toDataURL();
Is there a way using Phonegap to save the dataURI to device file system and get the filepath back.
I tried the canvas2ImagePlugin.js but it saves the image to gallery but does not return the file path.
Any suggestion would be appreciated.
Indeed, canvas2ImagePlugin returns the URI of the saved file.
It's the argument passed to the success callback refered as "msg" in the doc.
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
console.log("Imaged saved to URI : "+msg);
},
function(err){
console.log(err);
},
document.getElementById('myCanvas')
);
It returns something like this :
Imaged saved to URI :/storage/sdcard1/Pictures/c2i_1862014144659.png