DataURL of an img with CSS class

I have to apply some styles on <img> thanks to a CSS class.

<img>

Is it possible to get the dataURL of the <img> with the CSS style ?

dataURL

<img>

$(function() { // Original const imgOriginal = document.getElementById('original'); const c1 = document.getElementById('c1'); let ctx = c1.getContext('2d'); ctx.drawImage(imgOriginal, 100, 100); // Filtered const imgFiltered = document.getElementById('filtered'); const c2 = document.getElementById('c2'); ctx = c2.getContext('2d'); ctx.drawImage(imgFiltered, 100, 100); // Same dataURL :( console.log(c1.toDataURL(), c2.toDataURL()); console.log(c1.toDataURL() === c2.toDataURL()); })

.filter::before { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; border: 1px solid red; } .filter { position: relative; -webkit-filter: sepia(.5) hue-rotate(-30deg) saturate(1.4); filter: sepia(.5) hue-rotate(-30deg) saturate(1.4); } canvas { display: block; width: 100px; height: 100px; border: 1px solid red; }

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

Maybe snippet is going to have a bug because of the <canvas> tag, the idea is there anyway.

<canvas>

EDIT :

If anyone has a suggestion with SVG or something else, I'm using fabricJS.

SVG

EDIT 2 (NOT RESOLVE BUT FIND OTHER WAY) :

Thanks to @KavianK. you could replicate CSS style with the canvas context, however to me it's boring because we have to store a different callback for each CSS class to get the dataURL. Working anyway!

CSS

canvas

callback

CSS

dataURL

Thanks to @Emeeus maybe a solution provide from your backend, not solution for me beacause i'm want to do this ONLY on the front-end. wkhtmltopdf

Thanks to @pegasuspect we can filter an image with SVG, I'm following this way and I replace fabricJS by svgjs, this librairie can replace easly a canvas and it's more easier to work with img and I dind't need the DataURL anymore !

SVG

canvas

img

DataURL

Thanks to @Kaiido there is a way to take a snapshot of your HTML rendered with CSS style with html2canvas easy to get dataURL with this case. Unfortunataly some CSS styles are not supported yet like box-shadow or filter that's why it's not a solution for me

snapshot

HTML

CSS

dataURL

CSS

box-shadow

filter

This topic is not resolve but with svgjs I don't need actually work with dataURL.

svgjs

dataURL

I think it can't. since you can manipulate the pixels in the canvas, you can implement how you edit the image.
– kiro
Jun 21 at 15:31

Just to understand, you want to get rid of javascript ? Or you just want the filtering to be done by css classes ? What should be modified in @kavian K. answer in order to be ok for you ?
– Mium
Jun 28 at 9:09

@Mium indeed, I want to know if is it possible to do this without use the canvas's context. I'm trying with SVG at the moment maybe it's a good way : developer.mozilla.org/en-US/docs/Web/SVG/…
– GameTag
Jun 28 at 9:26

canvas's context

SVG

Well unless your images are svg formatted, I don't think you can export the image+css into a dataUrl without going through canvas. Simply because the bitmap (what is displayed in your screen) is a rendered version, and what you can access through javascript is "raw" data, not combined nor rendered. So the best way today is to use canvas api to capture the bitmap (the rendered version). @Kavian K. answer seems a good solution.
– Mium
Jun 28 at 9:42

Possible duplicate of stackoverflow.com/questions/49291239/…
– Kaiido
2 days ago

5 Answers
5

CSS and DOM is a separate world from the bitmaps that are used for images and canvas. The bitmaps themselves are not affected by CSS, only the elements which acts as a looking-glass to the bitmap. So, CSS filters applied to the canvas will not be applied to the image that is produced. You either need to replicate the filters in canvas or rather re apply the same filters to the generated image.

CSS

DOM

CSS

Example:

There is a little known property on the context object, conveniently named filter. This will apply a filter on the context it self. The filter must be set before next draw operation.

<img id="original" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg/170px-Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg" /> <img id="filtered" /> <canvas id="canvas" style="display: none"></canvas>

Hey, I know about filter() function but I wanna to know if there is other way to do this without have to store all effects in a Javascript object. That's why I want kind of snapshot of <img> + CSS => toDataUrl(). Thanks anyway
– GameTag
Jun 21 at 17:22

filter()

<img> + CSS

toDataUrl()

tldr;

You can do it with SVG. http://jsfiddle.net/1hambw93/91/

It is explained here quite nicely. It basically says you can use svg element in src tag of an img.

img

It is explained here quite nicely as well: I could achieve the same filter effect with your code, using an SVG filter.

You can generate filter for svg from this site using Sepium to get the same filter as your css. You would have the following SVG so far:

<svg id="test"> <image xlink:href='https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg/170px-Brad_Pitt_Inglorious_Basterds_Berlin_premiere.jpg' x="0" y="0" height="170px" width="218px" filter='url(#sepium-filter)' /> <filter id="sepium-filter"> <feColorMatrix type="matrix" values="1.3 -0.3 1.1 0 0 0 1.3 0.2 0 0 0 0 0.8 0.2 0 0 0 0 1 0"> </feColorMatrix> </filter> </svg>

Then I used a minimal javascript code to convert to base64 and write the result from the SVG to an object, to display in HTML.

Thanks to this, I never manipulate SVG before, it's ***** powerfull, I replaced fabricJS with svg.js I'll can do what I want without a canvas
– GameTag
yesterday

SVG

fabricJS

svg.js

canvas

Nice solution @pegasuspect
– Emeeus
yesterday

@Emeeus thank you. GameTag yes it is. I didn’t know that either. It is you who gave me the clue but I was not sure if that was even possible! Cheers to all 🍻👍🏼
– pegasuspect
yesterday

As I understand, You need the computed image, so you need the result of the work made by the browser. To accomplish that, you could use wkhtmltopdf specifically
wkhtmltoimage. It uses Qt WebKit rendering engine (just like a browser). You have to install that in the server and run somethig like:

wkhtmltoimage http://mysite/image-Plus-css-PLus-canvas.html myComputedImge.jpg

Where http://mysite/image-Plus-css-PLus-canvas.html is your image in the html with the css, javascript and whatever. All of this of course could be accomplished using ajax.

So, using this way you have a .jpg or .png file (myComputedImge.jpg in this case) that has all what you want computed, like a screenshot. If you want the base64 you could do the same as you do with .toDataURL() and the result is the base64 of the image with the css.

.toDataURL()

If you want to perform this using ajax, you could:

.toDataURL()

I don't want use the backend to do this. I'll precise this on the main post. Thanks anyway to share this !
– GameTag
2 days ago

@GameTag maybe the explanation sounds a bit confusing but all of this could be resolved with a few lines of code.
– Emeeus
2 days ago

There is 1 work around; It might work for your use case using CSS:

img[src^="data:image/png;"] { background-color: #000; filter: sepia(50%); }

This will work for all the images URLs starting with data:image/png

data:image/png

You can't 'get' the data url using css, as css is purely a styling tool. However, you could feasibly get the data-url of the image and then paste the data url into the css. Potential issues with this approach would depend on a) the number of images you have to apply filters to, and b)the fact that data urls tend to be long (this is not really an issue, it's more a nuisance..)

The below snippet shows a simple of including the dataurl in the css (I haven't applied filters etc.)

#brad{ background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD//gBnRmlsZSBzb3VyY2U6IGh0dHA6Ly9jb21tb25zLndpa2ltZWRpYS5vcmcvd2lraS9GaWxlOkJyYWRfUGl0dF9Jbmdsb3Jpb3VzX0Jhc3RlcmRzX0Jlcmxpbl9wcmVtaWVyZS5qcGf/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCADaAKoDAREAAhEBAxEB/8QAHAAAAgIDAQEAAAAAAAAAAAAABgcEBQIDCAEA/8QAQRAAAgECBAMGAwUGBgIBBQAAAQIDBBEABRIhBjFBBxMiUWFxFDKBI0KRobEVYsHR4fAIJDNScvEWgiUXNEOSov/EABoBAAIDAQEAAAAAAAAAAAAAAAIDAAEEBQb/xAAxEQACAgEEAQMDAwIGAwAAAAAAAQIRAwQSITFBEyJRMmGRFHHRgaEFI1Kx4fAzQvH/2gAMAwEAAhEDEQA/AKLhntT4zyuRLZildDcXjqIgw9vDYjG79OmB6jQ0c54wpuIaDLMyhphDW7LKF3sOTLfqL7jGPUY3BUzRhlbtF1LHHmGTMHVWJFuWOf0zWgKq34R4dyat/bTU6VDKSBJa59hjo6d43GpGbJ7Z/Bz9lvGNMuZS+B4oWkPdnppvt7Yy5MNv2mrDq0uJFxxjxUtflwoYCe7bZjf5h5YvFg2u2TVanfHZEX8qRqpVFA2w9nPao8p4e4pJZLC5B/DFpcWUVAwJCZk+YTZVmVPW0zFZYW1CxtfzGLTrkg9cm7TsuzmKGGaeWgqgAC97En6c8PjlBcEy3zrKoOIMrklps1b4+NdSyxv4vywb9/LZKrgXWc8ccWZvkx4czLNpZKKAd3OAoDyAdGa1yPT8cYZtp8mrDCMwSyjJJJM3iMMbMuq4A6YCU+KYyOFKdroduS8P5TJAsecNpZQLDURjHLI0+Do7VIuhwDkeYgLlmaVEMnks5P5HEWb5A9FrlMuc7ybNOHcpirMtlln7tLSxX+dev1HPBwV8jpSbQi+I6TMDJW5lA6oszXZCOtuuOpBycDhZaU20V/DOZXiU2GxNxfrjOwk20NXg/iEUlQtpNjta+AaDi/kYlHWRStIY5Bdlva+BIDk2ZIs0i3OzEc8TaDQYS5z2dZxU1WVZxlkeV5nAdJjqIe5a97Aq67HG6EpxW5CZQhdNUAnGdPPwPVwxRvHPR1F2jt86W5gjEzz9SNvsPHcHRs4b7QO+opYo1uUNtJ2P4Eb4x+lfg0RyIGe0LJ6vjdIo4qLRKvyubbfph2LC0JzZFKqF/F2NcTPXCCL4VrAMW1Hb6WwbxtcClyZcRdm/EeTQmqqxHJAi+IxNcqPO2C9KVWS/kGEojPJc/IOp5HFbS+z7NIgtMyKL2G2JJcEfYM9BhZRcR8NZxLkf7Yhonly0E6po2V9FjYllBLKL9SBgd6uvIWx1urg00WVz1UtIkcUimV9BeQaVFz81zyFr+1sE+Ckr6J+TZm1LxFahrZYKJpGVWZzbRvbVf6fji0yJ0wgo8tnHElQIJRUwOLvISGsfIEc+fPCspo07akNHgXIIDUeCx09cYpyb6Oljxpu2MaPhWhlmUyISx9cKao1RSLZOBsvJSam1wTLuGQ/wwaxWC5pM28RV0GR5LO+a1CLCqG5c2Fh1wyMJLgWpRVuRzDk0NXxtxHX0eXPen1NKBcgKhO18dOM+KODOnJslZl2aZzkRkljgLxjmE8RFsA4lJ12QslniEjtKzLLEbFW2IOFSvoNPiw+4NrpKuuD1EzJDawB6g4F2ug4ysI5abJ+9e9Yl7n7xxRdsu/8AELkFHW8E1edRxhcwo1BV1G7LcAqfT9MHhyuL2mrUYVKLl5RzQ/EOcwLTS5hNUTyIoRTPIX8I5Af30xodpcnOswTjvNKaeYgIrn/btvgU2uhqa6aCTgLjLP8ANsxlgaoU92mvfDIzkxTVjy7As0/a1Nm+ZZpZ5WnaBeoCqbfrgZStlJW+CR24stFwq9TSeBZHCN1BBJxcW2i6Ob1gRorowAHTFhk2l4XqsyglcyQU8IIQ989j58rbWHnbC55EuAo4nPlE/h7Jckyt56QZrLWrO/dulGrOsosCEcMpiJBBOmzHcEFSMIbbGRxpdsm5bw/lNLVtNkOYZjRyEq2iOodO72PhUhTe/UMOnMYGTvsKOOr2MJKqoyiTL+5zSEx1GjSJYRoufPla/mcA275Zo4UaoB5uAKDNqiD9jZgr1QsssMo7oyLp2KlQQGtz2IJt64cpujHLF8BH/wCDNw9l0yUWYKYbAySSgBoiSNRJW40731eQ6YVOW40Y8e1cE7hupqckrIBVHTTkG7qwYWDAHxDYje/44W4mrHNr2sZI4qjinjJU2C6uXNfPC6RpgGVJncUccJnOgSWtc4inXQUsV9AN/iXpYp+zSaov4kYEWPMXH8bY1Y+XZzNV9Jz72HcZZfwdxFUT5pdYahVUSAEhSCdjbzv+WNF0c9OjpWh43yDM43qIquGWLSTbWG6Yi7ss5v4xq6ep4kzKroNPcs2lQp2aw3P64qbTZEqB6pzbP5qRWgV6eAA7qdyMUqKbZQtmWYliTXVV79JTiyrO2OLKoV+QGhcBu/ZFa/kWAOMa4dnanFSi0Jr/ABD5BQZOuWLTKI4549I0i1mB/lb8Mbo5N8OTmajEoSVdCIrUYy3AJsNzihFk7huozWmmlkyaN2Yrpcqt7DETaIdWf4YMsep7PBJOCJHqZS+rY314psuIT9s3D65jluV5TI5jp6qa2ped1Um354LdtjZcI75UKGq4LyHIaoCozuRpNRUxQi5B8tQuQ3ptbCXmfSNa0/k8zOGNoFgoqWSWnRdKQfDCS/8A67FvMnqfbCrbdsOklRX5a/EvcfDUdMwpWsP8vGKNrDqDslxfkbYtuIKT+Ano6GqqI/8A5vN8pnHyrUtEYZU22RmQWJ/ev5jC3JeBqxtovssyJ6ILEarK6imdiCKqVZ7XF1s3hb0sbm2KlkjZPTn5RhJllNk6TNUxVNDBKDG0kFR3scVyL7ldQFwGAYH3wO++UEoJdghxrlVQ1MaunelkLwPHVtEWMJYbayBuFYEEjnuevM8cr4YGSLStAnlWepSiOirI1kiiKTQssuoxoVKsoJA1i1tm8rkg74OS8orHOuGF0ucQfHwSxkTUU5EaSBD9my7OH8iAQ2/Qnywna6NEcqiwwyzMjnNXFl9YhEMH2XfXsO+srKtujaGBPuMBtSNccm50Qu3+jq4ezcwJKZYwQDvyA338htjRhVMxa2nE5RjlMSumlG1dedsajkGBd1PMqfTbEIWeTyDQxmeyR728/wCmKaLRlV55Uy/Y05Cwg7ADc4lEbshdwOqi/scWUdlwVCVFWNxZFU2OMTPQVfApv8RS5nxHxFldDllDUzRU0JdnEZ0gtYc/S2H4ZJKrOfrYuUkoq6FTVcPzx10NFWTLHI1rlRfba/1xoo5/XA8cpy7hfJeFpaTLK2CSpeM+JmBJJ6/0xSUvKDqCdpmHBWaZzwvQ9zlmYwMZX1lGF1uT73GAcZroanB8MMa3Pc9zSrhHEbRSLFHqiSmiuGvz2vz5D15edkZXNcSNeLHCPuiDvEnGMCVgpDTpKsSi8sDAMpO5uCCo336dMJ2tuw3KK7BbM+JJYwlQQTT6Td4lWNwPPULg/Q+9sGkA3HwRqbiCtzCNWynMqipNrJFPKfiAOqJKCRIOulhfEaSfuBUm1wU2c8TLTlTmNFFNrv8A5pI2iDA81ZoyDfpceQ28yUL6Blk2/UeZXX1lVFFNkmaOsjnu44K2RZNTdYxJp3Y22WRSGHym+2KlGK+pBRnJ1sdr7hNw1x21XMaSSZclzmIiL7UlqSbfTokU7oCfDfkDsQuxwp4dvK5Q2OZS9suGb63NaeveeCFZcpzKN9U0UJsykE3K9GHPcWItuDikmqZbaa4AXMa+po571Pd1cWpu+CRaQz28TaLHQ/Im1gwBuLrjUlaMkm4vkwTMIpqPvKCCsMrG8iqpYEgcl089QP4X6bYuvAO5VZY8D5pmVDxDT0eazsommglTURuokJ038wXa/W23QDA5IrbwM0+RqfI2O0SVM7yGTKK+Z0SQKWEcet7m5UW87C+/LnhOJuJv1EoTi00IrNezXPKOjNbSRCpgW/gS+tR7fe+mOgotqziyi0A02vvXEoKuDYgixB9sCAS0oKpoA8VLUujD5ljYg/W2ISy+4U4aepnM+ZK1PEnyrKpXV6m/TC5zrhD8ONT5YxV4eoCoIZLHlZRbC/UZp9CIzuzHOsugyufNM2lUzO1kDG9lHIDCcklGVG2FzjZYZ1nOa8QRTHh3LUAsVWSfYH1GBT55DU3GNLk577R+HeJssaGqzOhWyMWaWBtQ/mMbY5ouknycfJgyK5NcA3TZmZadXgRGmXcpyv7YepGejW/ElTHpVoXjKsDsxHLFOZFwPTKM+mm4L/ak5dtdOsSIuzuzHZARz2BvbkCBzOMmSTcqZ0cUko2hPZyK7N67u5pXqWh+bS2mngPUah87b7kewuALFFqKM8oymwg4foq6mHcUcM1RDIu6RxW0t1Zb31eoPPC5NSHRi4EbMuF6lKiV6Smly6pJuVjVhDJvceE/KfY7W6YH1a4lyF6N8x4IeY0maVcUi1cbyVLCzSlriYcrSD/cNgHtfkDfoUZxRUsUmvuV9DwdnlpBBTzLDIvjUgkG29jbyIuDg3lj5Fx0010fZplGbVyxSV9PI2YKO7NRGNRnjtbx23LDlfmeu4viozjHroksMpJX2bq+LND+zqqdZkrERUaS9+8sLA+9gLnzGBTjykMqapvsLJM3jrKMjM6crUAaRUxv3XeBRsTbkwAG46jArjoKXK5KCbNa2V1VqyXRFGERmBKajfxOb31W222PXyw+NGduS4NdHTPQvHNX1kaVQZTApBZnYEMpA5AXG52G/U4kkmiRtNMaXDNRmHEGbyJHNDDE7DXde/lk+81wDzP3juNlA+XCuImi3PoY2XSPRVUNAYFlSY6VVfl+g6e2NOPLSMuWDTL9eyfhWpr1zHMsrgnrLhrsosPp1wOTLuAWNeQwjyjLYYFiSip1jUWA0DbC0MaVURKnJMjnVknoqdlOxFsNTF7UDb9mXBjOzGhjBJvtfE9vwSn8v8gRwnwvlrcM5Y6J3swiVj5bjHNyW5Ozt40lBfsFlKVgZY1O420L0wIfYM9rBjpeG5qqcghVJIY88MinaYtzSi7OW/2HWVgfMgopIZGLKB0/ljqRi2jhS7ujdlT1TyPBLFDWotwUe1/7vi1bB6GlXhBwvRyR644HDmSMSalWNSVd2I+87am26WAAtjHl+ujdi+hMp+xvho8W5vLLUrKcupLOqNsrMem2wAHTpbAZp7FS7GaaHqtuXSOncuyeny2hCwRxxpYBnC2P/FR0xmSlVs6K23tRply6Ka6d2pHIIOQH7x64U7saklye02QUMMolkiSWT1UWH0wUVXYLqXSJa5bRQ7xU0Sf8VAt7YuiRNL5JQytI60sCyMbs4UA387+eI02U6XZS1fAlA8DRLTKRr1jbdD6HnY74nuRTcJAdxFwJGtBUR0+jUyk6O73bY8j064uE3fIvLiVClzLIo6WeLL0oXqNYVY3ddCtqLFLsTdhZTvbpYY2wmmrOfkhXBUTZbPltXCYYO9p43SUIHMkfQ6Qx3HqD02thqdiHGg17LjTSxF6/LqSSTvzdpi8cyqukNJGw3DAtyItt0vgJobhkr5Oksv0J3MzzGoaMDxyWLMttmv1uOowpS8M05YWuCxqs7iWRFRgS3PfB1ZjquCTV1kfwpLb3GDjEFugKrM9hjmZULah64kntCx43IrzxHNfa1sL9Q0fpWBvB3FH7N4foqSRSn2YBJ6YzT+pmrG1tSZp4q45hyPLpaqEFmtcW5k4kIOTovLkWONiF4t47z3iz/L1Uz/DXusEfX3xvx4owOVm1M8vHSKmTNqiRKejnnkSlTZgpw2/Bmsr1manrNdHO40t4ZDsbeZxXXRB1Slm4VpslVXMlVSxVEnhIJ727WHkoRQLDqxxnySuVm7HH2qPyOzsuyWHI+GYo0UCSVjI5HUnl+GMU3unydLFDbCkHE9TH3RUGyLZVuNyfO/8AfPDJTTVFQxu7MYEsLsV1HmbYCMfLGSkSZUj20hD57HDJxS6FxlLyae4Vm3kAXnbAbV8jPUaXRuXu412LC3n1wSUUrQt7pM+1pY6LH0xTrwVtfkG89iDxMGk0gbIQOpO1/Tp9ThHk1VcRV8VR0ks+W3jcOpELW2YIptz9L39rkdRjRjfFGDNHkEnpKh6iGkjneMeASjV/pBxyUcib77+WHQlRnlC+D6ghqKSWSmRQKukisrBtmYMNSm/QncfTBtgJcjOyDNnHDkywObKokQH7obf9b/XGZ2pG6CuDIEGczU/2tVJdTuN9zjbHo58uy7o+KBVwWicsbWtfBWgYwtkeWRGJJsGJ3OM+Tk3YlRpsnrjPSNgFV0kMFa0fhVQAAPLF1bsyJ1wL/tNq42y9IYTe5u1t8Pwx5sz6qXsoi9idC1XxHUt3KyRrCVN/U4PPKkhehXvbIXHnCFXlmZVEoiKo7lh0B64bjlvjYnUYnjm/gpsmyqB4JXrEeSo5QwqD4m6D64Yl5YhcukOPJ5/iuLIZZZw5ESRLHp5sBZrDyG369cYJrydKC6s6By2PRQRxBdPhAG/pjM+zoRVG5aNQqG4DA3+W9z63xWyg/UfSJcdwg8K3HkMMiLnyzE3LbqLdMWyL9z3ZwQTGLdSAbYlF9dGp4mYizLpHPSf4cjgGglKj1pAg2Bv64BvaEot9lJm8uqORmDFVUsunY3wK5dly4Qi+NM70Zg8qAFA2prW8TldAv5C+5ty041Y4HOyPyV9JmMVTnFEzyC9RJAPIDZdQP1NvU+2GNNK0KUvcXSaayGpzCW8YCHuyeo0sQT6i4P8A1gkDJ2wk4Zq//i8xgC6X0AqTuQSAxAPux2wjJKnZv00XNOIuuI8/kjmalux7vYk9MaI5HQrJplH9yRwpmrJWDS5Ib5t9r4PdZnUdoxrmanDjfa+2M87ZvxxSVkP9phdiDcbcsBtDsBc0Sr4izOnhy2ImqqHEUKja5Pn5DqT0w2EOaRz5ypWxv8OdguWwR97n+ZVFdUEA2hAjRT6XuT9cb4YUu2Yp5ZTMKTg2i4Wq8xqcshRabXpDD5ieW/1xi1EWrfhHR0+xpKK5KvPaGLOoI4K6G8LnSW8sZY5JR5RrlCLVSAqr7O4+EM9o8ypjJPQM4DE3Oi/n/PDnmlONMXg0sYT3I1cE0M1f2wV1KUYwx1LOhUbNfxm1/pe3TBPjGmZXzmkvFnTNLTgERsUWRCoMesagTyFr3uennhcMbfND5ZYrybRLDOhandJEQ2ZoyGVT6kbD64kuSJ135MVRGGqyspFwwF7j3wKDcjwqhI+Ukbctxi3RabNJMRcJ3iAk7rcYEJSo3ixBAIFtsF2BfJCqqcvJdb2UdfPCpRNEJquSHVUcc1K8Tkluh64SuA3yzmzttyWoySSSoeP7Cbe6KQurz9D+R3xtwPc6ZzdXFwTYucgzWeNRNIwZqcgR3O4tv9eeNbjyc+E3VsOMuz1ZMsqi3yLRJrXfnZgT/wD3+WF1zSHRlfI0+B8uHw2YyTvocLEGDch9kCtv/Uj8MZZe+XB19O/RVsS3FVbHWZtVPHtG7kKw6jGhKjPKe+2zXQT6WHw7aSvlviuuRT5HDwzmfeUUQkW9wMLbZujTjyEXwsZ3+Fbf0xW1lXD5JXYtwxS0UKZtmTWzCVbRo9gIlPQep6nHSw4lHl9nCy5N3C6HMGi0bG9+uH8iBccS160FZmdHNGJYpz30djyvYMPoRce+MGoe1uL6Z09MtyTXgoaIR1BaJwDHINS36HHN6dHR5aN2V18H2uX5k6d2Lrqk5BepPpir8MOn2ctcTcRpnfG9dXZWslPlx7yOCNWKtJFuPERY3a9yOl7dMdHY4Y68nHWVZc7l45KTNMw0U1KtJB8NMuvvZlursxsNIsbaQBsbaiWa5I0gMgkJy5JvtUj7IOIswydJ6ehnlEFSUMkYmlRZCt9OpUcBrE3Gq+4HqMMEqck+GdBdmPafPX09MtfUvQ1feilqmopu6hkfQDHKY+Qd7SBiNiVWwHTDqd0PdF0dbRyWWOySTa+Vf/f2NHbL2yZhldTXcNZVXVE1ZC1pa6TSe4Y/ciCgXOkgFnvbfSAbHDMMXOFzd2Z8+WOKdQikxPZl2jcWZxFD8VnEymGNIe8itEdKg21FbXY33Y3Y2F+Qw70ofBm/UZO0zblnaVxtRFDFxBWGNTYCciRDyNjqHlgJYofAcNRmvv8AI3+De3CvnkiizujhqoHDOXooykka2JNoyT3gX0YNpHInCJYr4izdHI0rkuPlfwOahr6bNKSGrpJklp50EiMhuGUjYj0xja5pnRi1XAN9qOTRZxwPm0TpreKmeWMdbqL/AMMHi9slQGZbsbTOLIJu6QqblQxsPO4tjrNHmUw14WmWtc0w8KVDLT7/ALw0i31OEyVGvE9wx+N81DZgcnoJWjeJFWbS1rqAAA1uZIA54GOJwX3N08scrr4F5mESqAXXTp2I8sVzZXFWQ6LX35WAFmJ5DywVWL3c2Nvh7jnhPIEy6jrJmNc7KkrspIiv1Y8lA/rh0MUYq32Zc2qk+InQKZflDIrfFQbi/wA4w6l8Gb1J/JyTHx1XPl6h62Z22VAVAX05Yu7KuuR2ZAnEBySnb9uTrJIgbSQGA9LkXwO9onkCKrP8zXPKv9pTtPLTHu3YCwI58sJzQ3o2abJsIzcXSTnRTMUAOxxzpY2joxyp9FxR5xOtPVVMSwTVK00wjWojEiFjGwGpWBBG/IjExtKSLytygxQZLlFKtMs8QLTinDKHG5vYHbz3I+mN2To5+njUgTz6kkgqDLJJG3eMxCK+ooL2F+gvY7c9t8HjaqhOoi9zkysVirBlYqwNwQdwfPBmYcf+HL9pT8R170EcTAlJZTqaJrqHtpdflGplvsb2t54y6me1pHT0GLepSfX5Kj/EHl1ZQcehswnmqamopUneaTTZmLNfTpA2998MwTc4+7sTrcShNOPTQtVkdUdFbwuLMOhsbjDjHdG6kYsrgysgQFkHQubD2HviUXG+kTsqNV3nfyRyz04RtehhqUAbH0sbYTPZdeTdg9Ze7uJ0j2BVSR8K5gstXNK9LVs/wsFNqaCKQBl1MzKqqxDkc7b3xizRjJ726/p2dLFOcP8AKq/69X/RsveIs8znPoZqThmgVKEq0dVU10upWQixAEdtrX3Vid+eAi4p9GrJinGFyav4/wDv/BzbxlllQlTFMPhEiZjHoo6VYEUrysBcnlzNzjdiklZwdTGTapJfsqCHskV8v4ioaqCgFYq16qqyKSlwCVHvvqHlYHCdTlcY2uzo/wCF6NZcm2Tpc8/HDOguLOD8i4jlnrKGFKfOUJ1TqNLNbYhrcx74OE5J+4VHFGSuPYiuOsinWKV6UAywsUlQdSManjtWjI8ji9rKbKKWTL4hIwImYbBsMxYq5ZmzZvCC5+xur4o4cXMcqkvnRGp4pHAR/wB2/Q+Rw2UE1ZmcnfHIrJeIeJstlehkzLMYJKYmFoi5+zK7Ffpa2EbfsT2vybYaylqKDKKKL/XFRGGP1xdqg2dY5JkWZmmp5Q5ECoPCQdxbAWHVi4EPxfE+fU4UkCQC/wBBfDJBYwW4oyqpyepheONjDKbEgcjjLkima8bfgu+HDOAO9RmTrtzHXGGXDN2NWqYHZ5p4eqZqZPBUWsgGwC6iQ31vt638sbZyUopx8mXDDbKSl4Fzm4Jqu9K2Di+G43xRk1MalfyZZLlkub1ppaeamil7qSRfiJhGHKKW0AnmzWso6kgYKUlFWxOOEsklGKtnWPYPwqnD3Czzsv2lbpIkIsXHMtY7gE7DrYb88c3LPfJs9Bgw+jBQX9f3Kb/EhwhLnlPBmlGjvUUnh0xC7PHtcDzO1xhkMuyX2Azaf1saXlc/yjmSuy6ooquWmnjZJYnMcisLFGBsVPrfa3ntjYsifZx5ad9x5RoCyIr2BCkWJIsOf9ME2mCoTSfBY5RWtTfZyF+7fYAAfpjPlhu5R0dJm9NKE/PR0D2EZDLmWXZ5mFbIRSS1UNMEGwkMKEm56gGW3lf2xjzJJJG7BP8AzJyr4/t/zf4G9mjwUWS1OlVEaxHwrYfh64VCm6G5JNJtnO2S8N5jn7Z0IY2lp8v0yMPMu3hX10lNRt5Y1ZJ7OF5MOlxxyS9zHZwDlka8LU8fwcMLx1ETakULqYNpvb2vvjHFyndnYmo4J1Dqn/sQc8qXM8smWyMkjMxDqfU46lW6PO+o4cxEfxDFnkObSpTljDI/eTSS8tunrh8JVwZ83ue5FPxJxpCaru6en1yRqUY32B674e8ldGTstuAe0Ti+fOKXL8inhjq5lMA71NSFOd2B8rXB59MBLLSt+BmODyTUY9jQfsUyirdqjMK6snrZj3k8twNch3ZvqbnHPetm39J1F/heNKt39iF/9JsjiqKeekp2WaORXTxHmDfHRaSVnM2JnQuW8QU8VJFHWQPCyoFOkagLegxnc0WoS6FlX0ENNmubV1PCsYrKlpkU28ANtvyv9cDKdvgOEdqoiQZS1WveVLJIoPLC22xylRcQZBTzU2ugjQEbMMLyY76HY81dgvxF2f5ZxU00OZLJBWwQhIZ4NnQFiSGvsy8vCRtzBFzgYyljQ9wjlfP9gAzvsBzVEiNBmyVaSE6xLTrEUG1jfUb4b66irSBWj9R7ZT4/YIOE+yzLeEIHzLiKsgCRC7lbt15M1uV7bKOXnjPkySyPno24tPiwrbijbfl9jebiPKYaWKSQxiLSpUxyDQyW20+hxHS4aLjGT6ZWvneR8Rd5DLVRwxundaWk0Fj6X36nAOrthqLiq7E3xT2RTVGZV75BMnexsHWE/LMrDYn971/HDoZOPsJngTe5On/Z/uvn7i0z3gzifLbpWZDUrvswQlfe+Gxy475df0M08GdqoxT/AGaLLgvsyzvPpYZpHp6CFmu00sglkP8AxiXe4/eIHrip54dLkrFos6e6ap/Ld/hfydQcM5RT8P5BR5XR60pqVCqBjdiSSSzHqxJJPqcYZtybbOnCEYLbFcEPjCVjksqJYs/JSNmtvb62xeGNsVqXUaMOzNEpsqcxx3nqZO9mbVbvFA0qfQED9cTLJ76BxY0sdhFxFmEeSZDXV/hCxK0i2IGuU3CAeQBN/phuFbp9fcDPk2w576X/AH7iO4E4hWqSSgllLTQEqHP3h/PGx8Ozlwdqgd7TOI9c65ZGxiZzoLrsdzbDo/JmyP8A9SqznhbJouG45Ie7FSV8LA73/jgVNtiuFwUvZflOYPx1lJoW0MH1u/QR2N/5YvNxB2O0tvLHadaCkltvVtf/AJf0xztrPRbo/At6LtgyfUxiV3IPh8OOpOMp9Hm1kUSXFx+uZVaxQEd64uqnlhLwSSGLIn0TDPW5tE6vOAVNiqbYTJ7XTHem+y/yKmqzT9yIWJOwOKUrK2pGikqM04b4kSGvC/BVWyG/I4bFgSXlBHOFGcySqLCSnDafI6iMJzrjg2aN8uzLWxYKDuRucZTpJqjGvosufL3GZlXWQadLMQN+nPnhsIryKnld+0XXFOTUlZAlJkA7iaPYnV4WB5i/3WHO4F/PfBNLwVHJf1FJlPZBw/OUNRW1DVzeNpCxJVfNQf1OD3yfFi4wxxluUefkb3DXC9PktCII6uaqe1zLM3iP92wvZQ55W+y2YtDCUDkKOgwFtIJJS5K9niQnuVVWPMqANXrthW4co/JipFtz9LcsCwmCPHFQ1PNEqkBVgea17anBAA/O/wD1h2F0zJqeUC2Qcf0fDVWcvzSGQyTASxCFNR8btZL+9/QDBzwOUtyAhqowhsknZR9oXFNPxI0UM01RR0MJLJTRsf8AUOxZ7czbb0F/PG/T4Iwhx5OVqtVLLkvwig4bTIaOoeaGulVwbsL3t+WGyw7hMM212SeIOz2XjOV8yyGvhLR+Eo55nbqOWChi8AZJbnYPV+RZtlpiyvN40FQF8BVtQfpscLlj9J2yYsTyPgL+y7IZuG88FZmT6i66UH+3GXPmUltR1NLpJYpOUh2DMYiL254zWbeTiyizJoJSrN3TAkB7bD3GOsnR5stKTPcyy7M4K6VNUSH50vbTiSbaLi6dhXJxzmtFnEE+WSRyRVQHhbYXOETgn7pGqOaTqMQsTtQ4kykq8tHGy87rywiKh4HThkXZbV/G7cXvlEroUdZh3iX3tyNsHQpyVDXik8axMSXEV1bzFxf9RheR2jRpeJNmiqrYKKGSerkCgDlqAvYX5nbGfam7NuTI4qkBOccQ0U2ey0j5hAGop40dNV3Be2prdbAjfzODcHRnjJy5IP8A5XlEFRDSQzLDGSneSgoUvfddJINuh68zt1Lax0MTabZ5T8QUSzoabMA81m1AEeK+/ia/law6m3TfFU0VTQVZVnLKkTrXQPCWWPWHsrFmIJ9Nhf2I88C0yPJT5CBM01xoJHjfWQDpP3rb2Pl/3gJKh2PKpEaaa0g1Mee1uowmjUpWiVTykDxE/Xni2TsGeNkqq/LqmKkiUtdCHI1CwNyPyH44diaTtmfUR3KkJfPaCWk7RqiGe8slHDAhlPIHuQ7D8WONSdwX3OZkWzI78fwRJKzK6J5KjMqksxa4iP6DrjdHiKTOfkdybNi1mSV9LK2USpHUsLsjDc/TBp2L+5TZRnVXl81Qcuq56Zm+dFawJHI28/XEi6fBBy8Dtl3EXC0GYZ+BPmiEkzNsQQeY+lscvVZJvI02d/Q44+kp+Skg4gjzOvqoEFlhkKL5nASx0Gs29touBVygW7wj6nFbGFvZzRVQu7POQqxsdmOwJ9MdI84TMozWahsraJqcc423tglKiBvRzZdm1HTtBEI543BC26f3fA5I7lwPwTUZche65fOirNNGCVtoJxzNkk6O5vxyXINZnC+U5zRT0DMqq4IHTnhsJPpmPU4ormI8sjzjv46SWcqCPs2Y8rN/W2Kk74F43tZH49p463K5dbhDACVX/c21gfqBha4NM+aK7hTgOkoaaOWaCOSqaMtM0ou1zY2Dew/A4tTk2PVYkmi/razI4E+FzKkVfAT3Zp9QtzPIW+uG39jRDVR8NFYaDIszp3TK8qh1Pb7R6cKfO9yBuBf8MDfwg8mpg1ywTzXgErFLNf4SJD9iI2OxuCBtsAduW22A9SRjlGEuUSOGMxqIpVopQFh1Hxcijg6R7DSwPuoxT5QiKUZh68ut11nYb3GENcnRTpGiWsWItpb1JP64m0tzpHsNX8Q4gTSWO536YOqQpu2J3tlqDl3EueLCVarrKiJVRT4tHdjUxH0A+uN2njwmcfWT9zS+RPU80UmYlq8F4zcH08saWYF9zW7mjry9MxGhrqb728sXZQU5jSz0K01VMNMdRHqVuXS/8cWpphShKKTfkZvC4aHs/Yx3DiMtjnzd56O1jtaW12V3BGX97HLVavEdz741ShumY4ZFGF+S+NJqJJZ7nfn/AFwfpoX68jnuGSNnPxRkZACAFPXFmI10wvPGu5uQCBiFh/2XcPft7Na+l+PNJ8PF3ibBr7+uAyZPTVmnS6f15OKdFLWVPwtfLHW0rioV2RZQTY2NrjDE4tcCZqUXUglp1qMwq6CKQHTsQTjHKlJnTtuCTHFlFKWoZYreFV02whtpg8US8+t8FC1SxsQpJG5YjmLHa5vg1F9jFO1+xjS508rLShlilYkyvrOlD94X8l2F+pv9BlDaFCe58lTW5PnL5oDSMZECakuLBk22PobAj2BxFPaqGehudljkeV5savva2SV6ncFpeVxuTt0N8C5Nhejt7LPMqsw5VUQyorzxRhEGsWNzbf1G5Ht5nEjG2Bkmo8IFKSU1mYRtayW1GQeHvSNv/YXT6YOSaQEWmy9qJnjUXfU17EnCUuTXv9pTVteVbwt4b8zvv/HDY4/LFSyt+1BTwXRsUNTPcPKLgHoo/r+mFSdvgdFUhc8Y5dTjtuzIZrF3SVUMckTuLCQNGtiDyI2/IjpjoJOOKJy4qM9RK/uLDjbhKWgzadqIa4GbULeuDjNSRnz6aUJPb0Dz5eaFVlzAEf7Y7HxfXBmdxcexz5NBR8ccFR0gUJUQp9m1twRtjE5vFks7GyOowJIveFqGWLLpMtlS0iJ3bKehwuf17huP/wAez4NPDFDJSZVVxstnWRlv9dsdOPyceXHBdpTroW6729MXyUcxyUcMi66eYW6q2xGBoRZb08kGX5VIsSoJn+Z3sTf0xdVyXYyeyXh2soMsr83rIXhecBY1kFm0+t/PHP1WVNqCOz/hmBq5y4s84m4cp62SGV9yv+3oTzOLxZXFDtTpYzlwRcijFLnFPSjxlGG+Kbv3CJx2+1Dd4VTv6muT7otbApWxMuDfJQy5nO1FDFrnJLQr5uoJHPYDYk+2N0IWqM8pVyAsDyZTQxK47nvI3mYIgZnVbtezG5VVbVbncjVvYFThYcclMLqPiN6ZlSeQvswYkg7rudx6bfQ9LYzSgzfizRXZYwcTpPXRLToWVrXXlsUYi2+9ymnb+uDjj5Ay5bToHM+rzmIi1f8A3LwmKSVHBCzqqvDKwG4R7Nv/ALlJ22w5Q6Msslt0V2SVyvHVPHEdHfkKAOTaVVrXGx1K23T8MDKF8BYp0YZtmiUwPetrlPyxg/rgVjUezRvb4R9wxls2Y1Qqq29hum2wHp/PCMk74NOHGktzGXksT1E9PSUyrqcqp08vYemFqLfCGuSgnJ+CZ268HT5zFw7NTQJJTUj6KqQH7RUAuhUdQCGvbkDflfHUnaxceDh4JqeTbJ0m7/qK7P8AKDT1HdmMNAQNLc745u7yddrmjLLP2YsApc3yyGeA7XZA364FTadph7ItVJBJl/DOQ0Sip4cjSjZjqKp8v4dMVPK5dlwxRh9Koyq0g+Oedj3coFrA8/pjViS27mYc8pb9sSqywIlDNc3PenV+ONmKW5GDLHY6L1aWEqD5jDRVCBqOD8vmRJ6fvIWYXIBxhedxdM3/AKSMlaCbgbhzLcsq1qqqP4qZT4TJ4tPqPLCc2eUlS4NOn0ePG9z5Yxs+zFpMmleNNCgbaR6YyQdypnSb2xtC0rMyWgo2Mz6p3+VeuNsYIxZM1KyJwzBO2ZrM/ikbf2wcl4MO5t2x0cPQNRUxcC7vuxxeOIGRhL2en4nimdyADT0zuB5FiFB/M/jjZBV2ZZi44p4Ym+KeSgHey0s8gMe5fZwe7BvtcqgJ2OlVX3U5VNxY6WN1uQuOIKXNIqipjKyloWCK+jRbxXb0OzAaufIdMSkCnJF9lcs1Tl1FUmZ1kpisrxhSZGWPUpVdvmLSLdT0a/Q4tQ+CnKTLanoO9rc4mmiqAggSkk7oAo7oCI2S3JLFlI9NjyxdUCgfr88NLFXUyS97UiouWFmN+RIcCzBvx2GFNmnGqJ3B2QzZpIK7MwTFfwxnqfL+eMmXJ4RtxYr5YyqanZzHBDEWZ7Ikca7nyAA/sYUk2zZSirfQ1+D+HFyWAT1YV69x8o3EQ8h6+Z+g9ehhwbeX2cTV6v1nsh9P+5ZcUwVM3D9b8AjPXRxmaBV2LSL4lUHpe2n641QdS56MLE1xFSLnWR0udZFEaihniWoaCMeJVYag6LztY7rzBvb0x59Nfuj+DpaXV17Mj/Z/z/IvpapWj0pYpzB8xjDtOlvss8kr9J7stbywuaGwl8n2dzSJmELPcRNsD54OLe2gHFKdkeWqkp81FIqXiqRqVh5426Sdqjna6FStFmKyRQFKtcbHbG6jnCQ4R4iercUldIRMuy364w5sa7Rt02dv2yC9Znp2uDbyxkkjoRkMXszqkzzNIsslAfWrMwPQAc/0xeHC5ZEgs+dY8W4D+P8AgTMMv7R5qOioauspJ1WeBooyyxg7MpNrCx8z1GOhlx7XwjkRybrthjknAUsUsdRPMsDJYmMb2H7x5DBLC32A8qSpBolBAjeGWR0tyHhH8/0w1YkuRUsrYScANAa3NoaaNEFOsKOVG5ZtTG56mwX8cGwbfkGe0yBsiz+DMUT/ACWZsIJWG3d1AWyk/wDNBp90HnjJqodTR0dLNSj6b8ANxnGMwo4Zb37u+oDyP9cZVIZOFCseszDLKqRstnmpySwl02sbte1v754dHI10IcFZHmzHN66ojeauneZUWNWB0EgX6j3Nzz5eQwTmy4wXgN+EuEkZ1rs1VWL2dYuV/U25D05nmcZMmS+EbcWLyNjh/h+tzTT8JCFhQ6e9fwxp7W5+w/LA48Usj9o3Lmx4F73z8eRk8P5DQ5Jd4r1FYws1Q43t5KPuj0/EnHSxadQX3OPqNXPPw+F8F0GN9rX88OoymwXtdum+KIJvhNYsnhq6SG6xQ1lUYgt/AhqJGUC3QA2+hHQ4bl4mwV9KBvj3hn4mObOMkXXMAWq6ZF+e3OVAOv8AuX6jqMYs+BSW6Pfk3abU7fZN8eBbR1bxMG5A73vtjnNHTU2XeYZ7TSZRCk7qJAwCHzxIQb4GTyJKwg4VWKtqqFnUNJE9t/IjDdM3HMkBqY78TYfyUFO0jHuk3JPLHdpHC5F1k3YJldHWLW5rnLTTj/8AHR02kXP7zt/AYzPHfZSnTtIOIuzrhOMhpaOpqTfZZ6t7D00rb+zhf6bHdsc9Zlqk6/oW2X5blGTNpybLaOkmA0vJGoDKD0Lbsfa+GxhDH9KoVPLOf1OzTWZuiOEHeyF25Kb3I5+g99zgrFkZjJVBDMdNjqEanwA+d+p9TviWXwaaqranjdpBdwDZetvPEIWPYaJJsmzuvmJL1WZsASLbRxop+mq/54hAx4syOk4iyKryuvVjBVR92TH86nmrL5MrAEeoxGlJOLGQk4PcjnrN6XNOHZHyzPtDyWIhq03hqVB6Ho3mh3HqNzzMuGWJ0+jrQyxyq4gJUwNNKbKBGNrq2oA3xUWinjZa8OZDLW10UNPSyz1DbpCi3Zv7v7eeBk2+EHGCit0jorhfgCOBI5s70ysALUqG6L/zYfMfQbe+HY9L5yGbNr69uH8/wHqxqqKiKqoosqqLADyAxtVLhHMbcnbPWUDpgkyjFdjtiMh5VzCCkmlc2CKWv9MXCNySI3SErl9QdM0rhRqkLsbc7m4H0BH4nEyS3SbKiuCzoJGV0+YMCLb3bba5ty/pgUWDfFHZ5Dnkr1OUVcOXTvfvIZIy0Dv53XdCetgRfe2EZMCnyuGasWqcFtlyhFdpHDPEnC1ZR/tyk+Gpi/2cqSa4pyOiuNr9dJs3pgcWJx7Jlzb+mGfZfxEtTndHSyMFkJ2ueYGKeD/MUo/Jqx6tSxuMh1SVK941z1OOntZz9xJauOprX8i5t+WM9gUapswZIwFezb8vu+l+hPn64lkoqc0zFoadlAJcIdESkNc29N/wB/PFWRGvJxFFSCYnXCUBBeykDy/vf25YnZGbp8xA1LArLax1NYXv6c/xxZCg4nqTDkVbLPKVUxlpXZrHRY3t7YpEGj2OZc2XdmvDsMo+3mpRVyjyeYmVh9NdvYDFsuxV9qXaHxDxXX1HD/Z03cUMTiOfMQ+g1L3P2aOflj2N2G5CnkvzVL2ceSJWFPBEvwWQLT1kRV5W1ywxsJFD2Fztsw9fbzGLeSkFVl/X5bw3UUEnx1HHVtILhoIAJFPSzACx5fxwMo45rmg4ZckHcWX/AGf5fkEGSpNw/EwDjRNJMtqjUOayX3BF76dhvcbHC4wUOiZs08j93/AT92PXBWIMWFjgrLMffEKPQnXEshRcZVnwmUyqPmeyexY2H8T9MNx8JyBkKanZe7Ux3BkLSbkH71gPwAwoIn0yAOd9YU2dm5XP674hC2idVKIwIUpvfYBRzPOyj8TzxfRCbpo8zymahzSCmrKORB38FTFrjcXup0HkbWII9CMQgmeNexeqy6qTN+zudxNA2v8AZc8up1/dgkb59vuP4vJjyxOVyiWB542kjJSpr4oZ12kikOlkbqrA7gg7EHDvUmXtQ6zUmEgoAzfKova1/f8APCizX3jQIryA96blT+pJ/u+KRCthjllqe8lZDvqYjcgbeQ5+/X2xCGZZYVMMCsik3bUbhTbp/fliEN1PGbEm2s/Nz29z1xCFRn1JPnUsOVUUkMUlU/cl5QWCobM2w5ggabebeuCgrYLGf2y51/472e1i0jdzLVFKGEjbQrbNbysgP5YtOvcyxC8P5LJU1tC09JVQRPIsYLROiOhsSvkQQBtvgJdBpUOalUa77W9P4fj+frdlF9lhPX09BTGWqfRb13xaKAsdpNRlnFEFXRxvUUBZY6mMC7zR2+75ut7i/qNgbg1zwVXgfdFVQ11JDVUsqywSqHR15MDyOAaoA28ziyz7TiWUfEhVJPIYnZBZ9ouYO1ZDRRspeK9RJ/zKkIv53/8AYfRzaUaJXIGwxSQ2TUbqBGpuLBRuzk+97YWX5LCIkKndLdVu8YKj6u3TlsPfFFE1Y0VAwETA3N2AAe2/M8kGxPnyxZdG1alUZZHZ2AN21cybXuR5m4Y+QKjFkLiCpFyHY6blZdvqAPXfETKNjUlK7FnbLizG5MscRe/7xO9/O+LtkoXccuqRtQ0Imx6rYdP5n0xQR48xMEjhReQ2JJtYHcKPS2IQxjqGdLry5gXsPK354oo9X925sCb257nlfELJCaYo1APygnyxCi77LKQVuZ5jmbRFdBSkQnrY6mO/LYoMOx8JsphTxnQ/tGsy1dEb/CMZ1Di41kWU29ASfe2CguC7+AbzilnavohVSl9JeRQTfppt9dQ/kbgEcztFxR7V1EeWZc9XO1gBcBzv5jfz3H6i9/HmC+wsc9zSoq2+Jr5JWikfRT0yAs0jH5UVBzJ9Pr1OCS+SV8BBw/2d51VU75hm00dFMV1RZcguyjykcfKx2Fh1O9hthsYN8k3JDR7PIq7JKc0ObTA96+pYuYgJ+7q639NgeXXFyxtxvySdPoO+WECz3FENFTIqqdbBUUanPkOf8Cfpg4on3EfmVd+0a2orCftJ5C4AN7cwL+w2974KT5IuCAJmBN2spI58nO5APp1wJbLGknSQMzs25AYkczyB353I8Kjba5xCUWGoEEHU9rXsNRLDlfzPkvK/PliEojmpAkZdK91pJJdu82vz8iL9dtR/dXF0UasqzWKvCy0sryQmcyCTQNMgtzBsLrzAPI+2+KLLaExTxJK+nXIoY+Eczv54soDKkmKAwggFh4hzDKOh62v+NhtiII2yxAp4iSzSWFzYC2wHpyxRDZGqooIChb6ue17XIF8WUYy1C6dtRtYXHM/y3xRZFzWqVcvma+m6kAkX2HkP76YsoY/ZVGaXh2maosnfXqZCdt3u36Ww/b7KKsIUp/i5GrJEJjl3RTceG1l9vM++LuvaSrB3il+7zOmhWklaIQ6iYigUFmI31MN7Lz5WPvhWZ9INABxPmS5jmscEi1UFNELrDPTyIzna5tbfnzHUm++rCUgl8hZ2fcKfsqQZxmwV88mUiMW2oojyRPJiPmbn0Gw30xxrti5S8IYh0xU6IbAs2587D/rF8t2UaKimWdDyDDkw/T2wSdBFnldU00Zim2qIhZh5jocZ8kdrtdFUTXZURmY+FRc4Wk26KBTj7MvgeGKohtM9TaBfQtz/AAUHDo8c/Bb+BP6ri4Oq3y2HTl/Y/HphZDOMKWKsTax8QNvf8f64hDZHKsQLFmVN1Hd3Fuh9ieXl+AxCGNVn5gdIRl89RUsp7qJV0I224LGyoguLkm5FwAdxiFclTNST5w8UnENRDUUZDuuWU9xTKwtYyXsZW2B8VlFrBQAMTsuqCOm1WRUQLH3RFk5AgcsQhe0FzQ05F7GNfvemIUCjgKe8LrdmAN7i29uXO9vLkMWEetMq92IYwrtdtVrn3uf+WKIQJJNbqGIHhuWO5G/9cWQzJu6mS1geot5kWHpiiEDNImrqyioIondqqdIiRe41EbEjkLEnFpclHQFDQwRwiOEDuVI0qRyA2AxolJxIixjBUlVAI5Wwt8kF9X1Qrc7r6iEkxd53MdrkEL4QfqQffyO4wmXdBpcEWJGbRGHJ76VVUX8IBI/Hn58rb+LTi14BDxKEvKkmo6WJbV0I57Y0b0AiU9OrSWW50bEk8ybbf354FTaCPvh3S2kG2L3p9l0e9y5dJI7LOh8P7w6g++KbXT6IyW8gmVdiEHiYHzHTC1HaVQtO06veTMKSjQgrDGZZBzsz8rj0UH/9vTFy6K7YEqqvIvd3QgfJfY+3t/fngCzNGEWoMO7vYm1uX93t+XO+IRGuNbyEjYGwA5WH8f79zCdHkmpEYrpHjsA7aTtyPLkbf9W3y/qZfC/L/g2fpV8v8HrPplTu1hAjJLKoNwDzA236n29r4F6lpdL8staRN1b/AAv5M4yC6fao4LMCnly9Mb4wtJnPnOpOPw2WVJMyUkKinjNkUfd8sF6aB3v4IGYEimexOypb0uBfC0OIFQx7yLc/6LdfRMUyjOZVSMMgCm17gW8sQhrjYs92JJsNz7YhZt4dUPx7kBYBryTE333ET2P0weP6kU+h7U2wNsOmRHteSKOpYEhlhcg9QdJwtEYruGftFgV/ErNEpB3BBcAg+hAAxmXYRaZX9pV5P3ni1ywatW+q6wE387l3Pux8zgy3wMGHxQu53fvCuo87Wvb8cHH6gX0bJSQosSPbBohvgJK7knASRDa3zDAos9qP9I4kewRJ8aM3/lWfeI+FotO/L7O+34D8BgpglMwAeNQAAZACPMXbb8h+AwITNx+0o07zx3eMHVvzsTiIhpowPELbWBt7jfFokujdFXVZeMmqnuALHvD/ALSf4Y5ksuRN+5/k6kcONpe1dfBFp66r71F+Kn0krt3ht54p5sn+p/ktYMf+lfgyqa+sENI4qqjWzIWbvDc7HnvjsQinFNrwjiTk1OST8v8A3NkNZU9yn+Zm+UffOL2x+Ct8vk//2Q==); background-repeat:no-repeat; height:240px; width:auto; }

To get the data url I downloaded the image and then used a small javascript function to retrieve the information from the uploaded information. The function could be tweaked to use online sources but this one was saved so... ("here's one i made earlier!")..

Function for future reference: (should link fail)

function encodeImageFileAsURL(cb) { return function(){ var file = this.files[0]; var reader = new FileReader(); reader.onloadend = function () { cb(reader.result); } reader.readAsDataURL(file); } } $('#inputFileToLoad').change(encodeImageFileAsURL(function(base64Img){ $('.output') .find('textarea') .val(base64Img) .end() .find('a') .attr('href', base64Img) .text(base64Img) .end() .find('img') .attr('src', base64Img); }));

body{ padding: 20px; }

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/> <h2>Input</h2> <form class="input-group" id="img2b64"> <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" /> </form> <hr> <h2>Output</h2>

you show me how to display an image with DataURL but it's not answer to my question. Is it possible to get DataURL of <img class="filter"> with her CSS style. Thanks anyway !
– GameTag
Jun 25 at 7:05

DataURL

<img class="filter">

CSS

Apply the filter, download the image and get the data URL using the function. If it's different from the original, well then it's possible!
– Rachel Gallen
Jun 25 at 9:15

I edit my post, maybe solution with SVG, I don't understand why I should download image, can you detail ? Thanks !
– GameTag
Jun 26 at 19:00

SVG

I can see your comment in my inbox but not on this post, so maybe you deleted it? The reason I said to download the image was so you could use the fiddle provided to upload 5he image and test whether the data URL s were the same. If they are same, then the filters don't affect the data URL, if they are different, well then it's possible to get the data URL of an image with filters applied, and you can manipulate the function and apply it to your code.
– Rachel Gallen
Jun 26 at 19:08

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Search This Blog

Mgiyuk