把像素图片(png)转换成CSS3盒子阴影(box-shadow)

Image to box-shadow 把PNG图片转成box-shadow后即可添加模糊、缩放或反转效果。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1624
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var Canvas = function(id) {
    this.el = document.getElementById(id);
    this.screen = this.el.getContext("2d");
}

Canvas.prototype = {
    loadImage: function(url) {
        return new Promise(_.bind(function(resolve) {
            var img = new Image(),
                self = this;

img.onload = function() {
                self.el.width = img.width;
                self.el.height = img.height;
                self.screen.drawImage(img, 0, 0);
                return _.debounce(resolve(img), 100);
            };

img.src = url;
            // make sure the load event fires for cached images too
            if (img.complete || img.complete === undefined) {
                img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
                img.src = url;
            }
        }, this));
    },

toBoxShadow: function(blur, zoom, filter) {
        var
            width = this.screen.canvas.clientWidth,
            height = this.screen.canvas.clientHeight,
            imgData = this.screen.getImageData(0, 0, width, height);

var pixelShadow = '';
        var x = 0,
            y = 0,
            color = 0,
            vector = [];

for (var i = 0; i < imgData.data.length; i += 4) {

vector = [imgData.data[i], imgData.data[i + 1], imgData.data[i + 2], imgData.data[i + 3]]

if (typeof filter === 'function') {
                color = filter(vector);
            } else {
                color = vector.join(',');
            }

if ((i / 4) % width) {
                x++;
            } else {
                y++;
                x = 0;
            }

pixelShadow += x * zoom + 'px ' + y * zoom + 'px ' + 1 * blur + 'px ' + 0 + 'px rgba(' + color + '),';
        }
        // removes last comma if exists
        pixelShadow = (/,$/i.test(pixelShadow)) ? pixelShadow.substr(0, pixelShadow.length - 1) : pixelShadow;
        return pixelShadow;
    },

filters: {
        invert: function(vector) {
            return Array(255 - vector[0], 255 - vector[1], 255 - vector[2], vector[0]);
        }
    }

}

var Style = function(selector, body) {
    //this.props = _.extend({}, properties);
    this.el = selector;
    this.reference =
        this.head = this.el + '{ ';
    this.body = body || '';
    this.keyframes = [];
}

Style.prototype = {

addKeyframe: function(name, code) {
        var
            webkit = '@-webkit-keyframes ' + name + code,
            common = '@keyframes ' + name + code;
        this.keyframes.push(webkit + common);
        return this;
    },

addAnimation: function(name, duration, timingf, iteration, delay) {
        var
            create = function(vendor) {
                return vendor + 'animation-name: ' + name + '; ' + vendor + 'animation-duration: ' + duration + 's; ' + vendor + 'animation-timing-function: ' + timingf + '; ' + vendor + 'animation-delay: ' + delay + '; ' + vendor + 'animation-iteration-count: ' + iteration + '; ' + vendor + 'animation-direction: normal;'
            }

this.body += create('-webkit-') + create('');
    },

addPseudo: function(pseudo, code) {
        this.head = this.el + '::' + pseudo + code + this.head;
    },

toString: function() {
        return this.head + this.body + '} ' + this.keyframes.join(' ');
    },

appendToHead: function(headTag) {
        var
            style = document.createElement('style');

style.type = 'text/css';
        style.innerHTML = this.toString();
        headTag.appendChild(style);
    },
    remove: function() {

}
}

//
// Main
//

window.onload = _.debounce(function() {
    var
        canvas = new Canvas('canvas'),
        imgSource = document.getElementById('image').src;

canvas.loadImage(imgSource).then(function(img) {

var
            style, frame,
            mocks = {
                normal: canvas.toBoxShadow(0, 1),
                blur: canvas.toBoxShadow(5, 1),
                invert: canvas.toBoxShadow(0, 1, canvas.filters.invert),
                half: canvas.toBoxShadow(0, .5),
                double: canvas.toBoxShadow(0, 2)
            }

for (var key in mocks) {

style = new Style('.shadowesome.' + key + '::after', 'box-shadow: ' + mocks.normal + ';');
            frame = '{ 0%,100% {  box-shadow: ' + mocks.normal + ' } 50% { box-shadow: ' + mocks[key] + ' } }';
            style.addKeyframe(key, frame);
            style.addAnimation(key, 5, 'linear', 2, 0);
            style.appendToHead(document.getElementsByTagName('head')[0]);
        }

var spinner = document.getElementById("loading-1");
        spinner.parentNode.removeChild(spinner);
    });

var onBtnClick = function(e) {
        var value = e.currentTarget.attributes.getNamedItem('data-attr').value;
        var shadow = document.getElementsByClassName('shadowesome')[0];
        shadow.className = 'shadowesome ' + value;
    }

var btns = document.getElementsByClassName("btn");
    _.each(btns, function(b) {
        b.addEventListener('click', onBtnClick);
    });

}, 300);

编译

CSS

HTML

<section class="sources">
    <p>Load source (static png)</p>
    <img id="image" src="data:image/png;base64,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"
    />
</section>
<section "process">
    <p>Read data-image by canvas2d.</p>
    <canvas id="canvas" width="266" height="263"></canvas>
</section>

<section class="finish">
    <p>Transform to CSS LEVEL 3 Box-Shadow</p>
    <div class="shadowesome half">
        <span id="loading-1">Please wait, generating shadows...</span>
    </div>
</section>

<section class="filters">
    <p>Animations:</p>
    <button class="btn half" data-attr="half">Half</button>
    <button class="btn double" data-attr="double">Double</button>
    <button class="btn blur" data-attr="blur">Blur</button>
    <button class="btn blur" data-attr="invert">Inverse</button>
</section>
<script src='//cdn.jsdelivr.net/es6-promise/1.0.0/promise.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js'></script>

Image to box-shadow 把PNG图片转成box-shadow后即可添加模糊、缩放或反转效果。

编辑器支持Emmet

快捷键

Image to box-shadow 把PNG图片转成box-shadow后即可添加模糊、缩放或反转效果。

使用CSS mask-image和background-image实现带阴影的3D球体

使用gsap motionpath插件和pixi3实现图形聚合粒子特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：