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

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

代码语言：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('drag.........完整代码请登录后点击上方下载按钮下载查看