├── README.md
├── LICENSE
├── index.html
└── bicubicInterpolation.js
/README.md:
--------------------------------------------------------------------------------
1 | # ie-bicubic-img-interpolation-plugin
2 | ie-bicubic-img-interpolation-plugin depends on jQuery library and canvas.
3 |
4 | IE img interpolation issue is fixed by substituting the low rendering quality image with a canvas of the same size.
5 | The plugin can imitate -ms-interpolation-mode bicubic scaling for IE9+ browsers.
6 |
7 | The algorithm is applied per selector image.
8 | Important: This plugin should not be used for *.png images with no background.
9 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (C) 2016 https://github.com/sukhoi1 V0.1.1
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
15 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
16 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
17 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
18 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
19 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Handled by: img-interpolation-plugin:
15 | 
16 |
17 | IE pixelated high resolution img rendering:
18 |
19 |
20 | Source code and documentation:github.com/Lygin/ie-bicubic-img-interpolation-plugin
21 |
22 |
23 |
24 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/bicubicInterpolation.js:
--------------------------------------------------------------------------------
1 | //
2 | // https://github.com/sukhoi1, 25 Jan 2016
3 | // bicubic-img-interpolation v0.1.1 jQuery plugin
4 |
5 | $.fn.bicubicImgInterpolation = function(settings) {
6 | var self = this;
7 | $(self).each(function() {
8 | if(this.tagName === "IMG") {
9 | var src = $(this).attr('src');
10 | var imgW = this.width;
11 | var imgH = this.height;
12 | $(this).after("");
13 | var can = $(this).next()[0];
14 | var callback = drawHighResolutionImgThumbnail;
15 | drawCanvas(can, imgW*6, imgH*6, src, callback, this, settings.crossOrigin);
16 | }
17 | });
18 |
19 | function drawCanvas(can, imgW, imgH, src, callback, imgEl, crossOrigin) {
20 |
21 | var ctx = can.getContext('2d');
22 | var img = new Image();
23 | if(crossOrigin) {
24 | img.setAttribute('crossOrigin', 'anonymous'); //tainted canvases may not be exported chrome, ie will also throw security error
25 | }
26 |
27 | var w = imgW;
28 | var h = imgH;
29 |
30 | img.onload = function() {
31 |
32 | // Step it down several times
33 | var can2 = document.createElement('canvas');
34 | can2.width = w;
35 | can2.height = h;
36 | var ctx2 = can2.getContext('2d');
37 |
38 | // Draw it at 1/2 size 3 times (step down three times)
39 | ctx2.drawImage(img, 0, 0, w/2, h/2);
40 | ctx2.drawImage(can2, 0, 0, w/2, h/2, 0, 0, w/4, h/4);
41 | ctx2.drawImage(can2, 0, 0, w/4, h/4, 0, 0, w/6, h/6);
42 | ctx.drawImage(can2, 0, 0, w/6, h/6, 0, 0, w/6, h/6);
43 | if(callback) {
44 | callback(can, this.src, imgEl);
45 | }
46 | };
47 |
48 | img.src = src;
49 | };
50 |
51 | function drawHighResolutionImgThumbnail(can, attrSrc, imgEl) {
52 | $(imgEl).attr('src', can.toDataURL("image/png"));
53 | $(imgEl).attr('data-src', attrSrc);
54 | };
55 | };
56 |
--------------------------------------------------------------------------------