使用SVG来像JPEG一样压缩PNG透明图片

Transparent PNG with JPEG Compression，一款实用的在线工具。

h5, 图像压缩, tool

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();
console.time = console.time || function() {};
console.timeEnd = console.timeEnd || function() {};

(function() {

"use strict";

function each(obj, fn) {
        var length = obj.length,
            likeArray = (length === 0 || (length > 0 && (length - 1) in obj)),
            i = 0;

if (likeArray) {
            for (; i < length; i++) {
                if (fn.call(obj[i], i, obj[i]) === false) {
                    break;
                }
            }
        } else {
            for (i in obj) {
                if (fn.call(obj[i], i, obj[i]) === false) {
                    break;
                }
            }
        }
    }

function convertImage(img) {
        "use strict";

var window = window || {};
        window.CP = {
            shouldStopExecution: function() {
                return false;
            },
            exitedLoop: function() {}
        };

console.log(img.options);

var data = img.imageData,
            mask = img.mask || img.options.mask,
            dataURL = img.options.matte.dataURL || img.dataURL || img.options.dataURL,
            width = img.naturalWidth || img.width,
            height = img.naturalHeight || img.height,
            output = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ' + width + ' ' + height + '" width="' + width + '" height="' + height + '">\n\n';

// Only output a mask if there is one.
        if (mask) {
            output += '<defs><mask id="a"><image width="' + width + '" height="' + height + '" xlink:href="' + mask.dataURL + '"/></mask></defs>\n';
        }

output += '<image width="' + width + '" height="' + height + '"' + (mask ? ' mask="url(#a)"' : '') + ' xlink:href="' + dataURL + '"/></svg>';

// Send message back to the main script
        return output; //;//output;

};

function imageDataToAlpha(img, levels) {
        var data = img.data,
            len = data.length,
            alpha = false,
            i = 0,
            gray;

// Limit colors to certain amount of levels
        levels = (levels < 1 && levels > 0 ? levels * 10 : levels) || false;

for (; i < len; i += 4) {
            if (!alpha && data[i + 3] < 255) {
                alpha = true;
            }
            gray = (!levels ? data[i + 3] : Math.round(data[i + 3] / 256 * levels) * (256 / levels));
            data[i] = data[i + 1] = data[i + 2] = gray; //data[i+3];
            data[i + 3] = 255;
        }

return (alpha ? img : false);
    }

function alphaMask(svggyImage) {

var img = svggyImage.imageData,
            canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d"),
            width = img.naturalWidth || img.width,
            height = img.naturalHeight || img.height,
            maskTypeInputChecked = document.querySelector('input[name="mask-type"]:checked'),
            maskType = (maskTypeInputChecked ? maskTypeInputChecked.value : 'png'),
            maskQualityInput = document.querySelector('input[name="mask-quality"]'),
            maskQuality = (maskQualityInput ? maskQualityInput.value : 0.3);

canvas.width = width;
        canvas.height = height;

img = imageDataToAlpha(img, (maskType === 'png' && maskQuality < 1 ? maskQuality * 10 : null));

if (!img) {
            return false;
        }

ctx.putImageData(img, 0, 0);

return {
            imageData: img,
            dataURL: canvas.toDataURL('image/' + maskType, parseFloat(maskQuality)),
            quality: maskQuality,
            type: maskType
        };
    }

function addMatte(svggyImage, quality) {

var img = svggyImage.imageData,
            canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d"),
            w = img.naturalWidth || img.width,
            h = img.naturalHeight || img.height,
            color = document.querySelector('input[name="matte"]').value || "#000";

quality = quality || 0.6;

canvas.width = w;
        canvas.height = h;

ctx.fillStyle = color;
        ctx.fillRect(0, 0, w, h);
        ctx.drawImage(svggyImage.canvas, 0, 0);

return {
            imageData: ctx.getImageData(0, 0, w, h),
            dataURL: canvas.toDataURL('image/jpeg', parseFloat(quality))
        };
    }

// Test Image Conversion
    var test = document.getElementById('test');
    var testImage = document.getElementById('testImage');
    test.onclick = function() {
        new SvggyImage(testImage, convert);
    }

function convert() {

var imageQualityInput = document.querySelector('input[name="image-quality"]'),
            imageQuality = (imageQualityInput ? imageQualityInput.value : 0.6);

this.options = {
            dataURL: this.canvas.toDataURL('image/jpeg', parseFloat(imageQuality)),
            matte: addMatte(this, imageQuality),
            mask: alphaMask(this)
        }

this.process(convertImage, false, showOutput);
    };

function loadFiles(e) {
        var files = (e.target.files || e.dataTransfer.files || uploader.files),
            len = files.length,
            i = 0;

each(files, function(i, file) {
            var reader = new FileReader();

new SvggyImage(file, convert);
        });

}

// File Uploader
    var uploader = document.getElementById('upload');
    uploader.onchange = loadFiles;

// Drag & Drop
    var fileDrag = document.getElementById('filedrag');

function FileDragReset(e) {
        e.preventDefault();
        fileDrag.className = '';
    }

function FileDragDrop(e) {
        e = e || window.event;
        FileDragReset(e);
        loadFiles(e);
    }

fileDrag.addEventListener("dragleave", FileDragReset);
    document.addEventListener("dragenter", function() {
        fileDrag.className = 'dragenter';
    });
    document.addEventListener('dragover', function(e) {
        e.preventDefault(); /* Essential! */
    });
    document.addEventListener("drop", FileDragDrop);

}());

////////////////////////////////////////

// OUTPUT
(function() {

// File Output
    var outputDiv = document.getElementById('output');

if (!outputDiv) {
        outputDiv = document.createElement('div');
        outputDiv.setAttribute('id', 'output');
        document.body.appendChild('output');
    }

// Clear Output
    var clear = document.getElementById('clear');
    clear.onclick = function() {
        output.innerHTML = "";
    };

function fileSize(str) {
        var bytes = (typeof str === typeof "" ? encodeURI(str).split(/%..|./).length - 1 : str);
        if (bytes === 0) return 0;
        var sizes = ['bytes', 'kb', 'mb', 'gb', 'tb'],
            i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024))),
            size = bytes / Math.pow(1024, i);
        return (Math.round(size * 100) / 100) + ' ' + sizes[i];
    };

function downloadLink(url, fileName, linkContent) {
        var link = document.createElement('a');
        link.setAttribute('href', url);
        link.setAttribute('target', '_blank');

if (fileName) {
            link.setAttribute('download', fileName);
        }

if (!linkContent) {
            linkContent = document.createElement('img');
            linkContent.src = url;
            linkContent.setAttribute('alt', fileName);
        }

if (linkContent.nodeName) {
            link.appendChild(linkContent);
        } else {
            link.innerHTML = linkContent;
        }

return link;
    }

function showOutput(output) {

var fileName = this.fileName || 'jpng',
            blob = new Blob([output], {
                type: 'image/svg+xml'
            }), //output,
            blobUrl = URL.createObjectURL(blob),
            figure = document.createElement('figure'),
            figCaption = document.createElement('figcaption');

figure.className = 'output';
        figure.appendChild(downloadLink(blobUrl, fileName + '.svg'));

figCaption.className = 'output__details';

figCaption.innerHTML = '<em class="output__size">Output size: ' + fileSize(output.size ? output.size : output) + '</em>';
        figCaption.appendChild(downloadLink(blobUrl, fileName + '.svg', '<span class="download">Download SVG</span>'));

var showRaw = document.createElement('button'),
            raw = document.createElement('div'),
            rawVisible = false;

showRaw.className = 'output__show-raw';
        showRaw.innerText = "Show SVG Output";

showRaw.addEventListener('click', function() {
            rawVisible = !rawVisible;
            showRaw.innerText = (rawVisible ? 'Hide SVG Output' : 'Show SVG Output');

raw.innerHTML = (rawVisible ? '<pre contentEditable="true" class="output__raw">' +
                output.replace(/</g, '&lt;').replace(/>/g, '&gt;') +
                '</pre>' : '');
        });

figCaption.appendChild(showRaw);

figCaption.appendChild(downloadLink(this.options.mask.dataURL, fileName + '_mask.' + this.options.mask.type, '<span class="download">Download Mask</span>'));
        figCaption.appendChild(downloadLink(this.options.matte.dataURL, fileName + '_image.jpg', '<span class="download">Download Matted Image</span>'));

var removeOutput = document.createElement('button');
        removeOutput.className = 'output__remove';
        removeOutput.innerText = "Remove";

removeOutput.addEventListener('click', function() {
            figure.remove();
        });
        figCaption.appendChild(removeOutput);
        figCaption.appendChild(raw);

figure.appendChild(figCaption);
        outputDiv.insertBefore(figure, outputDiv.childNodes[0]);
    }

window.showOutput = showOutput;
}());

////////////////////////////////////////

// CONVERT FILE

function SvggyImage(file, onready) {
        this.onready = onready;
        if (file instanceof File) {
            var name = file.name;

this.file = file;
            this.fileName = name.slice(0, name.lastIndexOf('.')) || name + "";

var reader = new FileReader();
            reader.onload = this.onloadFile.bind(this);
            reader.readAsDataURL(file);
        } else if (file instanceof Node) {
            this.convertImage(file);
        }
        console.log('SvvgyImage', this);
        return this;
    }

var fn = SvggyImage.prototype = {};

fn.onloadFile = function(src) {
        var img = new Image();
        img.onload = this.convertImage.bind(this, img);
        img.src = (src.target ? src.target.result : src);
    }

fn.convertImage = function(img) {
        img = (img.type ? this : img); // use `this` if `img` is event
        if (!img || img === window) {
            return false;
        }

this.img = img;

this.canvas = document.createElement("canvas");
        this.width = this.canvas.width = img.naturalWidth || img.width;
        this.height = this.canvas.height = img.naturalHeight || img.height;

var ctx = this.canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

this.imageData = ctx.getImageData(0, 0, this.width, this.height);

if (this.onready) {
            this.onready.call(this);
            this.onready = false;
        }
    }

fn.getSafeData = function(options) {
        return {
            imageData: this.imageData,
            fileName: this.fileName,
            width: this.width,
            height: this.height,
            options: options
        };
    };

fn.process = function(process, options, callback) {

options = options || this.options;

var safeData = this.getSafeData(options);

var processEnd = function(processed) {
            this.processed = processed;
            if (callback) {
                callback.call(this, processed);
            }
            console.timeEnd('conversion');
        }.bind(this);

if (!Modernizr.webworkers || !Modernizr.blobworkers) {
            console.log('No workers or blog support. Larger images may timeout.');
            processEnd(process(safeData));
        } else {
            var imageWorker = cw(process);
            imageWorker.data(safeData).then(processEnd, function(e) {
                console.error(e);
                console.timeEnd('conversion');
            });
        }
    }

window.SvggyImage = SvggyImage;

}());

(function() {
    /*

function each(obj,fn) {
        var length = obj.length,
            likeArray = ( length === 0 || ( length > 0 && (length - 1) in obj ) ),
            i = 0;

function componentToHex(c) {
        var hex = parseInt(c).toString(16);
        return hex.length == 1 ? "0" + hex : hex;
      }

// Optimized for horizontal lines
      function makePathData(x,y,w) { return ('M'+x+' '+y+'h'+w+''); }
      function makePath(color,data) { return '<path stroke="'+color+'" d="'+data+'" />\n'; }

function alphasToPaths(colors){

var output = "";

// Loop through each color to build paths
        each(colors,function(color,values){
          var orig = color;
          color = 'rgba(0,0,0,'+(255-color)+')';

if ( color === false ) { return; }

var paths = [];
          var curPath;
          var w = 1;

// Loops through each color's pixels to optimize paths
          each(values,function(){

if ( curPath && this[1] === curPath[1] && this[0] === (curPath[0] + w) ) {
              w++;
            } else {
              if ( curPath ) {
                paths.push(makePathData(curPath[0],curPath[1],w));
                w = 1;
              }
              curPath = this;
            }

});

paths.push(makePathData(curPath[0],curPath[1],w)); // Finish last path
          output += makePath(color,paths.join(''));
        });

return output;
      }

var getAlphas = function(img) {
        var alphas = {},
            data = img.data,
            len = data.length,
            w = img.width,
            h = img.height,
            x = 0,
            y = 0,
            i = 0,
            alpha;

for (; i < len; i+= 4) {
          if ( data[i] < 255 ) {
            alpha = data[i];// - (data[i] + data[i+1] + data[i+2])/3;
            //alpha = alpha.toFixed(2);

x = (i / 4) % w;
            y = Math.floor((i / 4) / w);

alphas[alpha] = alphas[alpha] || [];
            alphas[alpha].push([x,y]);
          }                      
        }

return alphas;
      }

function makeMask(paths,imgData){

var mask = imgData.mask,
            img = imgData.imageData;

//return '<defs><mask id="a"><image width="'+img.width+'" height="'+img.height+'" xlink:href="'+mask.dataURL+'"/></mask></defs>';

return '<defs><mask id="a"><rect width="100%" height="100%" fill="white" />' + paths + '</mask></defs>';
      }/**/

}());

编译

CSS

body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f0f0f0;
    padding: 1em;
    padding-bottom: 2em;
    margin: auto;
    font-size: 14px;
    line-height: 1.4;
}
.container {
    margin: 1em auto;
    max-width: 40em;
}
.container:first-child {
    margin-top: 0;
}
.logo {
    margin-top: 30px;
    margin-bottom: 30px;
}
.logo__heading {
    margin: 0;
    padding: 0;
    position: relative;
}
.logo__heading:before,
.logo__heading:after {
    content: '';
    display: block;
    width: 30%;
    padding-bottom: 30%;
    height: 0;
    border-radius: 50% 50% 0 50%;
    background: #FFF;
    box-shadow: 0 0 40px #FFFCDA;
    opacity: 0.95;
    position: absolute;
    bottom: 20%;
    left: -1%;
    top: 0;
    margin: auto;
    z-index: -2;
    -webkit-animation: spotlight 3s ease-in-out 0s infinite alternate;
    animation: spotlight 3s ease-in-out 0s infinite alternate;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
@-webkit-keyframes spotlight {
    from {
        -webkit-transform: rotate(65deg) scale(1.6, 1) rotate(-45deg);
        transform: rotate(65deg) scale(1.6, 1) rotate(-45deg);
    }
    to {
        -webkit-transform: rotate(125deg) scale(1.6, 1) rotate(-45deg);
        transform: rotate(125deg) scale(1.6, 1) rotate(-45deg);
    }
}
@keyframes spotlight {
    from {
        -webkit-transform: rotate(65deg) scale(1.6, 1) rotate(-45deg);
        transform: rotate(65deg) scale(1.6, 1) rotate(-45deg);
    }
    to {
        -webkit-transform: rotate(125deg) scale(1.6, 1) rotate(-45deg);
        transform: rotate(125deg) scale(1.6, 1) rotate(-45deg);
    }
}
.logo__heading:after {
    left: 46%;
    -webkit-animation-delay: -3.2s;
    animation-delay: -3.2s;
}
.logo__subtitle {
    display: block;
    text-align: center;
}
.logo__image {
    max-width: 120%;
    height: auto;
    margin-left: -10%;
    margin-right: -10%;
    margin-bottom: -7%;
}
.note {
    background: #ffee77;
    font-size: 0.8em;
    text-align: center;
    padding: 0.5em;
}
h1,
h2 {
    display: block;
    margin: 0 auto 0.5em;
}
h2 {
    font-size: 1.4em;
    color: #f05555;
}
h2 svg {
    height: 21px;
    width: auto;
    margin: 0;
}
h2 svg path {
    stroke: currentColor;
}
p {
    margin: 0 auto 1em;
}
a {
    color: #f05555;
    -webkit-transition: color 250ms ease-in-out;
    transition: color 250ms ease-in-out;
}
a:hover,
a:focus {
    color: #FF7777;
}
img {
    vertical-align: middle;
}
button {
    background: #ddd;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
button,
.file {
    padding: 0.75em;
}
svg,
.choices label,
input[type=file] {
    display: block;
    margin: auto;
    text-align: center;
}
label small {
    display: block;
}
svg {
    max-width: 100%;
}
.choices {
    background: #eaeaea;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin: 1em auto;
}
.choices button {
    background: transparent;
    font-size: 0.8em;
    border-left: solid 3px #aaa;
}
.choices > * {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.file {
    overflow: hidden;
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%;
}
#output {
    margin: auto auto 2em;
    text-align: center;
}
.output {
    width: 100%;
    margin: 0;
    padding: 1em 0;
    border-bottom: solid 3px #ddd;
}
.output svg,
.output img {
    max-width: 100%;
    height: auto;
}
.output > a {
    display: block;
    outline: solid 1px #aaa;
    /*  background: #FFF;
  background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%), linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;*/
    
    background: #FFF url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 height%3D%2220%22 width%3D%2220%22 fill%3D%22%23ddd%22%3E %3Crect width%3D%2210%22 height%3D%2210%22 x%3D%2210%22 %2F%3E%3Crect width%3D%2210%22 height%3D%2210%22 y%3D%2210%22 %2F%3E %3C%2Fsvg%3E');
    background-size: 15px 15px;
}
.output svg {
    width: 100%;
    height: auto;
    margin: 1em auto;
}
.output__raw {
    display: block;
    background: #eaeaea;
    white-space: pre-wrap;
    padding: 0.5em;
    font-size: 0.75em;
    max-height: 20em;
    overflow: auto;
    text-align: left;
}
.output__details {
    font-size: 0.8em;
}
.output__size {
    display: block;
}
.output__details a,
.output__details button {
    display: inline-block;
    text-align: center;
    margin: 1em 0.25em 0;
    padding: 0.25em 0.5em;
    border: none;
    vertical-align: middle;
    background-color: #f05555;
    color: #FFF;
    text-decoration: none;
}
.output__details a:hover,
.output__details button:hover,
.output__details a:focus,
.output__details button:focus {
    background-color: #f48484;
}
#filedrag {
    display: none;
}
#filedrag.dragenter {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: #ff5555;
    background: rgba(255, 200, 200, 0.8);
    text-align: center;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 999;
}
label {
    cursor: pointer;
}
input[type="range"] {
    width: 60%;
    height: 5px;
    margin: 0;
    border: none;
    border-radius: 2px;
    background: #c4c4c4;
    background-image: -webkit-linear-gradient(left, transparent 95%, #919191 95%);
    background-image: linear-gradient(to right, transparent 95%, #919191 95%);
    background-size: 10.25% 100%;
    background-position: 4.75% 0;
    cursor: -webkit-grab;
    cursor: grab;
    vertical-align: middle;
    box-shadow: inset 1px 1px 3px #919191;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
input[type="range"]:focus:hover {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
input[type="range"]::-moz-range-track {
    border: inherit;
    background: transparent;
}
input[type="range"]::-ms-track {
    border: inherit;
    color: transparent;
    /* don't drawn vertical reference line */
    
    background: transparent;
}
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
    background: transparent;
}
input[type="range"]::-ms-tooltip {
    display: none;
}
/* thumb */

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    margin-top: -1px;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: #FFF;
    border: solid 2px #535050;
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    margin-top: -1px;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: #FFF;
    border: solid 2px #535050;
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    margin-top: -1px;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: #FFF;
    border: solid 2px #535050;
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}
input[type="range"]:focus::-webkit-slider-thumb {
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    border-width: 3px;
}
input[type="range"]:focus::-moz-range-thumb {
    transform: scale(1.25);
    border-width: 3px;
}
input[type="range"]:focus::-ms-thumb {
    transform: scale(1.25);
    border-width: 3px;
}
.control-group {
    display: block;
    margin-bottom: 0.25em;
}

HTML

<div class="logo">
        <h1 class="logo__heading">
      <img class="logo__image" src="/uploads/1708/jpng-logo.png" alt="JPNG.svg" />
    </h1>
        <small class="logo__subtitle"><em>This logo was originally 300kb, but compressed down to 69kb using the tool below.</em></small>

</div>

<p><strong>Combine the transparency of a PNG with the compression of a JPEG.</strong> Based on the idea from <a rel="nofollow" rel="noreferrer" href="https://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/">Using SVG to Shrink Your PNGs</a>, but adapted
        to use data URIs instead of external images. Include on your page as inline SVG, using an <code>&lt;img src="image.svg"/&gt;</code> tag, or as a <code>background-image</code>.</p>
    <div class="controls">
        <div class="control-group">
            <label class="control">
                <span class="control__label">Image Quality:</span>
                <input type="range" name="image-quality" min="0.1" max="1" step="0.1" value="0.6" />
                <span class="current-value"></span>
            </label>
        </div>

<div class="control-group">
            <label class="control">
                <span class="control__label">Image Matte:</span>
                <input type="color" name="matte" value="#FFFFFF" />
                <span class="current-value"></span>
            </label>
        </div>

<label class="control">
                <span class="control__label">Mask Quality: </span>
                <input type="range" name="mask-quality" min="0.1" max="1" step="0.1" value="0.5" />
                <span class="current-value"></span>
            </label>
        </div>
    </div>

<div class="choices">
        <div class="file">
            Drag & Drop files or
            <input type="file" id="upload" multiple="multiple" accept=".jpg,.jpeg,.png,.gif,.svg" />
        </div>

<button id="test">Try a test image: <img src="/uploads/161101/mirrorball.png" id="testImage" style="width: 2em" />
        </button>

<button id="clear">Clear Output</button>
    </div>
</header>

<div id="filedrag">Drop images to convert here.</div>

Transparent PNG with JPEG Compression，一款实用的在线工具。

h5, 图像压缩, tool

编辑器支持Emmet

快捷键

Transparent PNG with JPEG Compression，一款实用的在线工具。

h5, 图像压缩, tool

使用Slick.js和SVG滤镜实现幻灯片切换时的运动模糊特效

使用React.js实现的SVG图形变形转换器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：