|
|
| Line 1: |
Line 1: |
| | {{UCAS-China}} | | {{UCAS-China}} |
| − | <html>
| |
| − |
| |
| − | <head>
| |
| − | <style type="text/css">
| |
| − | @charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
| |
| − | <script>
| |
| − | window.readcubeExtension = {
| |
| − | version: '1.36',
| |
| − | id: 'mfacblegickmnfpaebakfnlbfhpoegin'
| |
| − | };
| |
| − | </script>
| |
| − | <title>夜莺与玫瑰-音转图测试</title>
| |
| − | <meta charset="utf-8">
| |
| − | </head>
| |
| − | <body>
| |
| − | <span><h4 style="background-color:#FF0000;">Please Select a Picture：<h4></span>
| |
| − | <input id="picture" type="file" accept="image/*" style="font-size: 15px;" onchange="ugly();"><br>
| |
| − | <span>请选择音乐：</span>
| |
| − | <input id="audio" type="file" accept="audio/*" style="font-size: 15px;" onchange="noise();"><br>
| |
| − | <button style="font-size: 15px;" onclick="begin();">开始</button>
| |
| − | <span id="wait" style="visibility: hidden;">请等待</span><br>
| |
| − | <canvas id="target"></canvas><br>
| |
| − | <img id="img" style="width: 500px; visibility:hidden; position:absolute;">
| |
| − | <canvas id="sketch" style="visibility:hidden; position:absolute;"></canvas>
| |
| − | <canvas id="color" style="visibility:hidden; position:absolute;"></canvas>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | var
| |
| − | targetC = document.getElementById("target"),
| |
| − | greyC = document.getElementById("sketch"),
| |
| − | colorC = document.getElementById("color"),
| |
| − |
| |
| − | targetX, colorX;
| |
| − |
| |
| − | var
| |
| − | particles = [];
| |
| − |
| |
| − | function draw() {
| |
| − | if( !targetX )
| |
| − | return ;
| |
| − |
| |
| − | var
| |
| − | imgt = targetX.getImageData(0, 0, targetC.width, targetC.height),
| |
| − | pixC = colorX. getImageData(0,0, targetC.width, targetC.height).data,
| |
| − | pixG = greyX. getImageData(0,0,targetC.width, targetC.height).data,
| |
| − | pixT = imgt.data;
| |
| − |
| |
| − | for(var i = 0, n = pixT.length; i < n; i += 4){
| |
| − | pixT[i] = pixC[i] * pixG[i] / 255;
| |
| − | pixT[i+1] = pixC[i+1] * pixG[i+1] / 255;
| |
| − | pixT[i+2] = pixC[i+2] * pixG[i+2] / 255;
| |
| − | pixT[i+3] = 255;
| |
| − | }
| |
| − |
| |
| − | targetX.putImageData(imgt, 0, 0);
| |
| − | };
| |
| − |
| |
| − | function ugly(){
| |
| − | var
| |
| − | reader = new FileReader();
| |
| − |
| |
| − | reader.onload = function() {
| |
| − | var
| |
| − | s = document.getElementById("img");
| |
| − | s.src = this.result;
| |
| − | s.onload = function(){
| |
| − | greyC.width = s.width;
| |
| − | greyC.height = s.height;
| |
| − |
| |
| − | colorC.width = s.width;
| |
| − | colorC.height = s.height;
| |
| − |
| |
| − | targetC.width = s.width;
| |
| − | targetC.height = s.height;
| |
| − |
| |
| − | targetX = targetC.getContext("2d");
| |
| − | colorX = colorC.getContext("2d");
| |
| − |
| |
| − | greyX = greyC.getContext("2d");
| |
| − | greyX.drawImage( s, 0, 0, s.width, s.height );
| |
| − | var
| |
| − | imgd = greyX.getImageData(0, 0, s.width, s.height),
| |
| − | pix = imgd.data;
| |
| − |
| |
| − | for(var i = 0, n = pix.length; i < n; i += 4){
| |
| − | var
| |
| − | grey = pix[i]*0.27 + pix[ i+1 ]*0.54 + pix[i+2] * 0.1 + 25;
| |
| − |
| |
| − | pix[i] = pix[i+1] = pix[i+2] = grey;
| |
| − | }
| |
| − | greyX.putImageData(imgd, 0, 0);
| |
| − | };
| |
| − | };
| |
| − |
| |
| − | reader.readAsDataURL( document.getElementById("picture").files[0] );
| |
| − | }
| |
| − |
| |
| − | var
| |
| − | ac = new ( window.AudioContext || window.webkitAudioContext )(),
| |
| − | source = ac.createBufferSource(),
| |
| − | analyzer = ac.createAnalyser();
| |
| − |
| |
| − | function noise(){
| |
| − | var
| |
| − | reader = new FileReader();
| |
| − |
| |
| − | reader.onload = function() {
| |
| − | ac.decodeAudioData( this.result , function(data){
| |
| − | source.buffer = data;
| |
| − | source.connect( analyzer );
| |
| − | analyzer.connect( ac.destination );
| |
| − | });
| |
| − | };
| |
| − |
| |
| − | reader.readAsArrayBuffer( document.getElementById("audio").files[0] );
| |
| − | };
| |
| − |
| |
| − | var
| |
| − | animateId;
| |
| − | var analyze = function(){
| |
| − | var
| |
| − | freq = new Uint8Array(4);
| |
| − | analyzer.getByteFrequencyData( freq );
| |
| − | var
| |
| − | loudness = Math.sqrt( freq[0]*freq[0] + freq[1]*freq[1] + freq[2]*freq[2] + freq[3]*freq[3] ),
| |
| − | r = Math.max( Math.min( Math.floor( (freq[0]+freq[1] - 200)*1000/(2*loudness)), 255), 0 ),
| |
| − | g = Math.max( Math.min( Math.floor( (freq[1]+freq[2] - 260)*1000/(2*loudness)), 255), 0 ),
| |
| − | b = Math.max( Math.min( Math.floor( (freq[2]+freq[3] - 260)*1000/(2*loudness)), 255), 0 ),
| |
| − |
| |
| − | p = {
| |
| − | x: Math.random()*colorC.width,
| |
| − | y: Math.random() * colorC.height,
| |
| − | r: loudness * 0.06,
| |
| − | c: 'rgb(' + r +","+ g +","+ b +")" //*255/(2*loudness)
| |
| − | };
| |
| − |
| |
| − | if(loudness > 0){
| |
| − | console.log(p.c);
| |
| − | particles.push(p);
| |
| − |
| |
| − | colorX.beginPath();
| |
| − | colorX.arc( p.x, p.y, p.r, 0, 2 * Math.PI, true);
| |
| − | colorX.fillStyle = p.c;
| |
| − | colorX.fill();
| |
| − | colorX.closePath();
| |
| − | document.getElementById("wait").style.visibility = "hidden";
| |
| − | draw();
| |
| − | }
| |
| − | animateId = setTimeout(analyze, 500);
| |
| − | };
| |
| − |
| |
| − | function begin(){
| |
| − | document.getElementById("wait").style.visibility = "visible";
| |
| − | analyze();
| |
| − | source.start(0);
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − | </body>
| |
| | <html><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style><script>window.readcubeExtension = { | | <html><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style><script>window.readcubeExtension = { |
| | version: '1.36', | | version: '1.36', |
