原生js实现将任意图片转换成rgb形式的纯css代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：原生js实现将任意图片转换成rgb形式的纯css代码，任意图片转换成rgb多行代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Vexel</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <style></style>
    <style>
        html {
      height: 100%
    }
    
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: sans-serif;
    }
    
    header {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 4.5em;
      background: -webkit-linear-gradient(#666, #333);
      background: -moz-linear-gradient(#666, #333);
      background: linear-gradient(#666, #333);
    }
    
    h1 {
      display: inline-block;
      color: #F1F1F1;
      text-shadow: 0 1px #FFF, 0 -1px #000;
      margin: 15px;
    }
    
    h3 {
      display: inline-block;
      color: #F3F3F3;
    }
    
    h1, h3 {
      font-weight: normal;
    }
    
    #wrapper {
      height: 100%;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      padding-top: 4.5em;
    }
    
    #input {
      background-color: #fff;
      background-image: -webkit-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), 
      -webkit-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
      background-image: -moz-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), 
      -moz-linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
      background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), 
      linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%);
      background-size:16px 16px;
      background-position:0 0, 8px 8px;
      height: 100%;
      width:50%;
      float:left;
      box-shadow: inset -25px 25px 25px -25px #000
    }
    
    #stylesheet {
      background: #fff;
      width:49%;
      float: right;
      height: 100%;
      color: black;
      margin: 0;
      margin-left: 1%;
      padding: 0;
      overflow: scroll
    }
    
    code {
      font: 13px/1.8 Monaco, Mono-Space;
      white-space: pre;
    }
    
    #vexel {
      margin: 15px;
    }
    
    #dropzone {
      border: 4px dashed #113;
      border-radius: 5px;
      padding: 25px;
      text-align: center;
      font: bold 25px Arial, Tahoma, sans-serif;
      color: #113;
      margin: 15px;
    }
    
    #dropzone.over {
      border-color: #c00;
      color: #c00;
    }
    
    .social {
      float: right;
      padding: 20px;
    }
    </style>
</head>

<body>
    <header>
        <h1>Vexel</h1>
       <h3>将任何图片变成css代码</h3>

    </header>
    <div id="wrapper">
        <div id="input">
            <div id="dropzone">拖动图片到这</div>
            <output id="vexel"></output>
        </div>
        <output id="stylesheet">
      <p class="help">把任意的图片拖到左边的区域</p>
      <p>支持<code>PNG</code>, <code>JPEG</code> and <code>GIF</code> GIFs</p>
     
    </output>
    </div>
    <script>
        (function(){
    
    var dropZone = document.getElementById('dropzone')
    
    dropZone.addEventListener('dragenter', handleDragEnter, false)
    dropZone.addEventListener('dragover', handleDragEnter, false)
    dropZone.addEventListener('dragleave', handleDragLeave, false)
    dropZone.addEventListener('drop', handleFileSelect, true)
    
    function handleDragEnter(e) {
      e.preventDefault()
      e.target.className = 'over'
    }
    
    function handleDragLeave(e) {
      e.target.className = ''
    }
    
    function handleFileSelect(e) {
      e.stopPropagation()
      e.preventDefault()
      e.target.className = ''
    
      var files = files = e.dataTransfer.files,
          f = files[0],
          reader = new FileReader(),
          cb, fn
      try {
        document.styleSheets[0].deleteRule(0)
        document.styleSheets[0].deleteRule(1)
      } catch(e) {}
    
      if (!f.type.match('image.*')) return
    
      if (f.type.match('.*gif')) {
        cb = img2anim
        fn = 'readAsArrayBuffer'
      } else {
        cb = img2vexel
        fn = 'readAsDataURL'
      }
    
      reader.onload = (function(f, cb) {
        return function(e) {
          cb(e.target.result)
        }
      })(f, cb)
    
      reader[fn](f)
    }
    
    function atos(a) {
      return String.fromCharCode.apply(null, a)
    }
    
    function preText(text) {
      return text.replace(/([;{}])\s?/g, '$1\n').replace(/,\srgb/g, ',\n  rgb').replace(/ent,/g, 'ent,\n  ').replace(/\),/g, '),\n  ')
    }
    
    function renderStylesheet() {
      var styleSheet = document.styleSheets[0],
          list = [],
          rule
      for (i = 0, len = styleSheet.cssRules.length; i < len; i++) {
        rule = styleSheet.cssRules[i]
        if (rule.type === 7) { // keyframes
          list.push('@keyframes ' + rule.name + ' {\n')
          for (var j = 0, innerLen = rule.cssRules.length; j < innerLen; j++) {
            list.push(preText(ru.........完整代码请登录后点击上方下载按钮下载查看