kopia lustrzana https://github.com/msurguy/SquiggleCam
2 wiersze
19 KiB
JavaScript
2 wiersze
19 KiB
JavaScript
webpackJsonp([1],{"/+sM":function(t,e){},NHnr:function(t,e,s){"use strict";Object.defineProperty(e,"__esModule",{value:!0});s("uMhA");var i=s("7+uW"),a=s("woOf"),n=s.n(a),r={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"image-chooser"},[s("div",{staticClass:"button-group stretch"},[s("label",[t._v("Input:")]),t._v(" "),s("button",{staticClass:"btn",class:{active:"upload"===t.selectedItem},attrs:{id:"upload",disabled:t.disabled},on:{click:t.toggle}},[t._v("File")]),t._v(" "),s("button",{staticClass:"btn",class:{active:"webcam"===t.selectedItem},attrs:{id:"webcam",disabled:t.disabled},on:{click:t.toggle}},[t._v("WebCam")])])])},staticRenderFns:[]};var o=s("VU/8")({name:"ImageChooser",data:function(){return{selectedItem:"upload",disabled:!1}},methods:{toggle:function(t){this.selectedItem=t.target.id,this.$emit("selected",this.selectedItem)}}},r,!1,function(t){s("/+sM")},"data-v-4692bf3a",null).exports,c=s("//Fk"),l=s.n(c),d={name:"WebCam",props:{width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:200},autoplay:{type:Boolean,default:!0},screenshotFormat:{type:String,default:"image/jpeg"},deviceId:{type:String,default:null},playsinline:{type:Boolean,default:!0}},data:function(){return{source:null,canvas:null,camerasListEmitted:!1,cameras:[]}},watch:{deviceId:function(t){this.changeCamera(t)}},mounted:function(){this.setupMedia()},beforeDestroy:function(){this.stop()},methods:{legacyGetUserMediaSupport:function(){return function(t){var e=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia||navigator.oGetUserMedia;return e?new l.a(function(s,i){e.call(navigator,t,s,i)}):l.a.reject(new Error("getUserMedia is not implemented in this browser"))}},setupMedia:function(){void 0===navigator.mediaDevices&&(navigator.mediaDevices={}),void 0===navigator.mediaDevices.getUserMedia&&(navigator.mediaDevices.getUserMedia=this.legacyGetUserMediaSupport()),this.testMediaAccess()},loadCameras:function(){var t=this;navigator.mediaDevices.enumerateDevices().then(function(e){for(var s=0;s!==e.length;++s){var i=e[s];"videoinput"===i.kind&&t.cameras.push(i)}}).then(function(){t.camerasListEmitted||(t.$emit("cameras",t.cameras),t.camerasListEmitted=!0)}).catch(function(e){return t.$emit("notsupported",e)})},changeCamera:function(t){this.stop(),this.$emit("camera-change",t),this.loadCamera(t)},loadSrcStream:function(t){var e=this;"srcObject"in this.$refs.video?this.$refs.video.srcObject=t:this.source=window.HTMLMediaElement.srcObject(t),this.$refs.video.onloadedmetadata=function(){e.$emit("video-live",t)},this.$emit("started",t)},stopStreamedVideo:function(t){var e=this,s=t.srcObject;s.getTracks().forEach(function(t){t.stop(),e.$emit("stopped",s),e.$refs.video.srcObject=null,e.source=null})},stop:function(){null!==this.$refs.video&&this.$refs.video.srcObject&&this.stopStreamedVideo(this.$refs.video)},start:function(){this.deviceId&&this.loadCamera(this.deviceId)},testMediaAccess:function(){var t=this;navigator.mediaDevices.getUserMedia({video:{width:this.$props.width,aspectRatio:{exact:this.$props.width/this.$props.height}},audio:!1}).then(function(e){return t.loadCameras()}).catch(function(e){return t.$emit("error",e)})},loadCamera:function(t){var e=this;navigator.mediaDevices.getUserMedia({video:{deviceId:{exact:t},width:this.width,aspectRatio:{exact:this.width/this.height}},audio:!1}).then(function(t){return e.loadSrcStream(t)}).catch(function(t){return e.$emit("error",t)})},capture:function(){return this.getCanvas().toDataURL(this.screenshotFormat)},getCanvasRaw:function(){return this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height)},getCanvas:function(){var t=this.$refs.video;if(!this.ctx){var e=document.createElement("canvas");e.height=t.height,e.width=t.width,this.canvas=e,this.ctx=e.getContext("2d"),this.ctx.translate(e.width,0),this.ctx.scale(-1,1)}var s=this.ctx,i=this.canvas;return s.clearRect(0,0,this.width,this.height),s.drawImage(t,0,0,this.width,this.height),i}}},u={render:function(){var t=this.$createElement;return(this._self._c||t)("video",{ref:"video",attrs:{width:this.width,height:this.height,src:this.source,autoplay:this.autoplay,playsinline:this.playsinline}})},staticRenderFns:[]};var v=s("VU/8")(d,u,!1,function(t){s("mxzp")},"data-v-43507d33",null).exports,h={name:"svgChartLine",props:["d","stroke"],computed:{pathD:function(){var t="";return this.d.values.forEach(function(e,s){t+=0===s?"M "+e[0]+","+e[1]:"L"+Math.round(100*e[0])/100+","+Math.round(100*e[1])/100}),t}}},g={render:function(){var t=this.$createElement;return(this._self._c||t)("path",{style:{strokeWidth:this.stroke.width,fill:this.stroke.fill,stroke:this.stroke.color},attrs:{d:this.pathD}})},staticRenderFns:[]},m={name:"svgChart",components:{svgChartLine:s("VU/8")(h,g,!1,null,null,null).exports},props:["lines","black","width","height"],computed:{viewbox:function(){return"0 0 "+this.width+" "+this.height},background:function(){return this.black?"#000000":"#FFFFFF"},stroke:function(){return{color:this.black?"#FFFFFF":"#000000",fill:"none",width:"2px"}}}},p={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("svg",{style:{background:t.background},attrs:{xmlns:"http://www.w3.org/2000/svg",viewBox:t.viewbox,width:t.width,height:t.height}},[s("g",t._l(t.lines,function(e,i){return s("svg-chart-line",{key:i,attrs:{d:e,stroke:t.stroke}})}),1)])},staticRenderFns:[]};var f={name:"App",components:{imageChooser:o,webcam:v,svgChart:s("VU/8")(m,p,!1,function(t){s("Q3wT")},null,null).exports},data:function(){return{cropper:{},dataUrl:"",lines:[],inputType:"upload",settings:{black:!1,frequency:150,amplitude:1,lineCount:50,brightness:0,contrast:0,minBrightness:0,maxBrightness:255,spacing:1,width:500,height:500},canvasData:null,webcam:{img:null,camera:null,deviceId:null,device:null,devices:[],streaming:!1}}},watch:{"webcam.camera":function(t){this.webcam.deviceId=t},"webcam.devices":function(){var t=this.webcam.devices[0];t&&(this.webcam.camera=t.deviceId,this.webcam.deviceId=t.deviceId)},"settings.frequency":function(){this.processImage()},"settings.spacing":function(){this.processImage()},"settings.lineCount":function(){this.processImage()},"settings.amplitude":function(){this.processImage()},"settings.minBrightness":function(){this.processImage()},"settings.maxBrightness":function(){this.processImage()},"settings.brightness":function(){this.processImage()},"settings.contrast":function(){this.processImage()},"settings.black":function(){this.processImage()},canvasData:function(){this.processImage()}},computed:{widthInCM:function(){return Math.round(10*this.settings.width/38)/10},heightInCM:function(){return Math.round(10*this.settings.height/38)/10}},methods:{downloadSVG:function(){var t=(new XMLSerializer).serializeToString(this.$refs.svgResult.$el),e=new Blob(['<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">'+t],{type:"image/svg+xml;charset=utf-8"}),s=URL.createObjectURL(e),i=document.createElement("a");i.href=s,i.download="squiggleCam_"+Date.now()+".svg",document.body.appendChild(i),i.click(),document.body.removeChild(i)},uploadCroppedImage:function(){var t=this;this.cropper.generateBlob(function(e){var s=document.createElement("canvas");s.width=t.settings.width,s.height=t.settings.height;var i=s.getContext("2d"),a=new Image;a.onload=function(){i.drawImage(a,0,0),t.canvasData=i.getImageData(0,0,t.settings.width,t.settings.height)},a.src=URL.createObjectURL(e)},"image/jpeg",1)},processImage:function(){var t=this;this.$worker.run(function(t){for(var e=t.config,s=t.image,i=parseInt(e.width),a=parseInt(e.height),n=parseInt(e.contrast),r=parseInt(e.brightness),o=parseInt(e.lineCount),c=parseInt(e.minBrightness),l=parseInt(e.maxBrightness),d=parseFloat(e.spacing),u=e.black,v=[],h=5,g=0,m=void 0,p=void 0,f=[],_=0,b=0,w=259*(n+255)/(255*(259-n)),C=Math.floor(a/o),y=0;y<a;y+=C){g=0,(f=[]).push([0,y]),_=y*i;for(var x=d;x<i;x+=d)b=Math.floor(x+_),m=0!==n?.2125*(w*(s.data[4*b]-128)+128+r)+.7154*(w*(s.data[4*(b+1)]-128)+128+r)+.0721*(w*(s.data[4*(b+2)]-128)+128+r):.2125*(s.data[4*b]+r)+.7154*(s.data[4*(b+1)]+r)+.0721*(s.data[4*(b+2)]+r),u?(m=Math.min(255-c,255-m),p=Math.max(l-m,0)):(m=Math.max(c,m),p=Math.max(l-m,0)),h=e.amplitude*p/o,g+=p/e.frequency,f.push([x,y+Math.sin(g)*h]);v.push(f)}return v},[{config:n()({},this.settings),image:this.canvasData}]).then(function(e){t.lines=[],e.forEach(function(e){t.lines.push({values:e})})}).catch(function(t){console.error(t)})},onCapture:function(){this.webcam.img=this.$refs.webcam.capture(),this.canvasData=this.$refs.webcam.getCanvasRaw()},onStarted:function(t){this.webcam.streaming=!0},onStopped:function(t){this.webcam.streaming=!1},onStop:function(){this.$refs.webcam.stop()},onStart:function(){this.$refs.webcam.start()},onError:function(t){console.log("On Error Event",t)},onCameras:function(t){this.webcam.devices=t,console.log("On Cameras Event",t)},onCameraChange:function(t){this.webcam.deviceId=t,this.webcam.camera=t},onInputSelected:function(t){this.inputType=t}}},_={render:function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{attrs:{id:"app"}},[s("div",{staticClass:"wrapper"},[s("div",{staticClass:"container"},[s("aside",{attrs:{id:"panel"}},[t._m(0),t._v(" "),s("div",{staticClass:"accordion"},[s("div",{staticClass:"option"},[s("input",{staticClass:"toggle",attrs:{type:"checkbox",id:"toggle2"}}),t._v(" "),s("label",{staticClass:"title",attrs:{for:"toggle2"}},[t._v("Paper Settings")]),t._v(" "),s("div",{staticClass:"content"},[s("div",{staticClass:"paper-chooser"},[s("div",{staticClass:"button-group stretch"},[s("label",[t._v("Color:")]),t._v(" "),s("button",{staticClass:"btn",class:{active:!1===t.settings.black},on:{click:function(e){t.settings.black=!1}}},[t._v("White")]),t._v(" "),s("button",{staticClass:"btn",class:{active:!0===t.settings.black},on:{click:function(e){t.settings.black=!0}}},[t._v("Black")])])]),t._v(" "),s("div",{staticClass:"slider"},[s("span",{staticClass:"metric"},[t._v("\n "+t._s(t.widthInCM)+"cm\n ")]),t._v(" "),s("span",{staticClass:"label"},[t._v("\n Width\n ")]),t._v(" "),s("input",{directives:[{name:"model",rawName:"v-model",value:t.settings.width,expression:"settings.width"}],attrs:{type:"range",min:"200",max:"500"},domProps:{value:t.settings.width},on:{__r:function(e){t.$set(t.settings,"width",e.target.value)}}}),t._v(" "),s("div",{staticClass:"output"},[t._v(t._s(t.settings.width))])]),t._v(" "),s("div",{staticClass:"slider"},[s("span",{staticClass:"metric"},[t._v("\n "+t._s(t.widthInCM)+"cm\n ")]),t._v(" "),s("span",{staticClass:"label"},[t._v("\n Height\n ")]),t._v(" "),s("input",{directives:[{name:"model",rawName:"v-model",value:t.settings.height,expression:"settings.height"}],attrs:{type:"range",min:"200",max:"500"},domProps:{value:t.settings.height},on:{__r:function(e){t.$set(t.settings,"height",e.target.value)}}}),t._v(" "),s("div",{staticClass:"output"},[t._v(t._s(t.settings.height))])])])]),t._v(" "),s("div",{staticClass:"option"},[s("input",{staticClass:"toggle",attrs:{type:"checkbox",checked:"",id:"toggle1"}}),t._v(" "),s("label",{staticClass:"title",attrs:{for:"toggle1"}},[t._v("\n Image Selection\n ")]),t._v(" "),s("div",{staticClass:"content"},[s("div",{staticClass:"image-inputs"},[s("image-chooser",{on:{selected:t.onInputSelected}}),t._v(" "),"upload"===this.inputType?s("div",{staticClass:"image-upload"},[s("croppa",{attrs:{width:t.settings.width/2,height:t.settings.height/2,preventWhiteSpace:!1,quality:2,"placeholder-color":"#000","remove-button-size":22,"placeholder-font-size":24,"remove-button-color":"black","canvas-color":"#FFFFFF"},model:{value:t.cropper,callback:function(e){t.cropper=e},expression:"cropper"}}),t._v(" "),s("button",{staticClass:"btn btn-primary btn-block",staticStyle:{display:"block"},on:{click:t.uploadCroppedImage}},[t._v("Use Image")])],1):t._e(),t._v(" "),"webcam"===this.inputType?s("div",{staticClass:"image-webcam"},[s("div",{staticClass:"video-controls"},[s("select",{directives:[{name:"model",rawName:"v-model",value:t.webcam.camera,expression:"webcam.camera"}],on:{change:function(e){var s=Array.prototype.filter.call(e.target.options,function(t){return t.selected}).map(function(t){return"_value"in t?t._value:t.value});t.$set(t.webcam,"camera",e.target.multiple?s:s[0])}}},[s("option",[t._v("- Select Device: -")]),t._v(" "),t._l(t.webcam.devices,function(e){return s("option",{key:e.deviceId,domProps:{value:e.deviceId}},[t._v(t._s(e.label))])})],2),t._v(" "),t.webcam.streaming?s("button",{staticClass:"btn btn-sm",attrs:{type:"button"},on:{click:t.onStop}},[s("svg",{attrs:{width:"12",height:"12"}},[s("rect",{staticStyle:{fill:"rgb(255,0,0)"},attrs:{width:"12",height:"12"}})])]):t._e(),t._v(" "),t.webcam.streaming?t._e():s("button",{staticClass:"btn btn-sm",attrs:{type:"button"},on:{click:t.onStart}},[t._v("Start")])]),t._v(" "),s("webcam",{ref:"webcam",attrs:{"device-id":t.webcam.deviceId,width:t.settings.width,height:t.settings.height},on:{started:t.onStarted,stopped:t.onStopped,error:t.onError,cameras:t.onCameras,"camera-change":t.onCameraChange}}),t._v(" "),t.webcam.streaming?s("button",{staticClass:"btn btn-record",attrs:{type:"button"},on:{click:t.onCapture}},[s("svg",{attrs:{height:"48",width:"48",viewBox:"0 0 48 48"}},[s("circle",{attrs:{cx:"24",cy:"24",r:"23",stroke:"white","stroke-width":"1",fill:"#D41616"}})])]):t._e()],1):t._e()],1)])]),t._v(" "),s("div",{staticClass:"option"},[s("input",{staticClass:"toggle",attrs:{type:"checkbox",id:"toggle3"}}),t._v(" "),s("label",{staticClass:"title",attrs:{for:"toggle3"}},[t._v("Image Adjustments")]),t._v(" "),s("div",{staticClass:"content"},[s("div",{staticClass:"slider"},[s("span",{staticClass:"label"},[t._v("\n Brightness\n ")]),t._v(" "),s("input",{directives:[{name:"model",rawName:"v-model",value:t.settings.brightness,expression:"settings.brightness"}],attrs:{type:"range",min:"-100",max:"100"},domProps:{value:t.settings.brightness},on:{__r:function(e){t.$set(t.settings,"brightness",e.target.value)}}}),t._v(" "),s("div",{staticClass:"output"},[t._v(t._s(t.settings.brightness))])]),t._v(" "),s("div",{staticClass:"slider"},[s("span",{staticClass:"label"},[t._v("\n Contrast\n ")]),t._v(" "),s("input",{directives:[{name:"model",rawName:"v-model",value:t.settings.contrast,expression:"settings.contrast"}],attrs:{type:"range",min:"-100",max:"100"},domProps:{value:t.settings.contrast},on:{__r:function(e){t.$set(t.settings,"contrast",e.target.value)}}}),t._v(" "),s("div",{staticClass:"output"},[t._v(t._s(t.settings.contrast))])]),t._v(" "),s("div",{staticClass:"slider"},[s("span",{staticClass:"label"},[t._v("\n Min brightness\n ")]),t._v(" "),s("input",{directives:[{name:"model",rawName:"v-model",value:t.settings.minBrightness,expression:"settings.minBrightness"}],attrs:{type:"range",min:"0",max:"255"},domProps:{value:t.settings.minBrightness},on:{__r:function(e){t.$set(t.settings,"minBrightness",e.target.value)}}}),t._v(" "),s("div",{staticClass:"output"},[t._v(t._s(t.settings.minBrightness))])]),t._v(" "),s("div",{staticClass:"slider"},[s("span",{staticClass:"label"},[t._v("\n Max brightness\n ")]),t._v(" "),s("input",{directives:[{name:"model",rawName:"v-model",value:t.settings.maxBrightness,expression:"settings.maxBrightness"}],attrs:{type:"range",min:"0",max:"255"},domProps:{value:t.settings.maxBrightness},on:{__r:function(e){t.$set(t.settings,"maxBrightness",e.target.value)}}}),t._v(" "),s("div",{staticClass:"output"},[t._v(t._s(t.settings.maxBrightness))])])])]),t._v(" "),s("div",{staticClass:"option"},[s("input",{staticClass:"toggle",attrs:{type:"checkbox",id:"toggle4"}}),t._v(" "),s("label",{staticClass:"title",attrs:{for:"toggle4"}},[t._v("Squiggle Settings")]),t._v(" "),s("div",{staticClass:"content"},[s("div",{staticClass:"slider"},[s("span",{staticClass:"label"},[t._v("\n Frequency\n ")]),t._v(" "),s("input",{directives:[{name:"model",rawName:"v-model",value:t.settings.frequency,expression:"settings.frequency"}],attrs:{type:"range",min:"5",max:"256"},domProps:{value:t.settings.frequency},on:{__r:function(e){t.$set(t.settings,"frequency",e.target.value)}}}),t._v(" "),s("div",{staticClass:"output"},[t._v(t._s(t.settings.frequency))])]),t._v(" "),s("div",{staticClass:"slider"},[s("span",{staticClass:"label"},[t._v("\n Line Count\n ")]),t._v(" "),s("input",{directives:[{name:"model",rawName:"v-model",value:t.settings.lineCount,expression:"settings.lineCount"}],attrs:{type:"range",min:"10",max:"200"},domProps:{value:t.settings.lineCount},on:{__r:function(e){t.$set(t.settings,"lineCount",e.target.value)}}}),t._v(" "),s("div",{staticClass:"output"},[t._v(t._s(t.settings.lineCount))])]),t._v(" "),s("div",{staticClass:"slider"},[s("span",{staticClass:"label"},[t._v("\n Amplitude\n ")]),t._v(" "),s("input",{directives:[{name:"model",rawName:"v-model",value:t.settings.amplitude,expression:"settings.amplitude"}],attrs:{type:"range",min:"0.1",max:"5",step:"0.1"},domProps:{value:t.settings.amplitude},on:{__r:function(e){t.$set(t.settings,"amplitude",e.target.value)}}}),t._v(" "),s("div",{staticClass:"output"},[t._v(t._s(t.settings.amplitude))])]),t._v(" "),s("div",{staticClass:"slider"},[s("span",{staticClass:"label"},[t._v("\n Sampling\n ")]),t._v(" "),s("input",{directives:[{name:"model",rawName:"v-model",value:t.settings.spacing,expression:"settings.spacing"}],attrs:{type:"range",min:"0.5",max:"3",step:"0.2"},domProps:{value:t.settings.spacing},on:{__r:function(e){t.$set(t.settings,"spacing",e.target.value)}}}),t._v(" "),s("div",{staticClass:"output"},[t._v(t._s(t.settings.spacing))])])])])]),t._v(" "),s("div",{staticClass:"section-title"},[t._v("\n Download:\n ")]),t._v(" "),s("div",{staticClass:"actions"},[s("button",{staticClass:"btn btn-block",on:{click:t.downloadSVG}},[t._v("\n SVG\n ")])]),t._v(" "),t._m(1)]),t._v(" "),s("main",[t.canvasData?s("div",{ref:"container",staticClass:"svg-container"},[s("svg-chart",{ref:"svgResult",attrs:{black:t.settings.black,lines:t.lines,width:t.settings.width,height:t.settings.height}})],1):t._e()])])])])},staticRenderFns:[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"header"},[e("h2",[this._v("SquiggleCam")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"credits"},[e("p",[this._v("\n Project by "),e("a",{attrs:{target:"_blank",href:"http://twitter.com/msurguy"}},[this._v("@msurguy")]),this._v(" ("),e("span",{staticClass:"fa fa-github"}),e("a",{attrs:{target:"_blank",href:"http://github.com/msurguy/SquiggleCam"}},[this._v("Source")]),this._v(")\n "),e("br"),this._v("Based upon\n "),e("a",{attrs:{target:"_blank",href:"https://github.com/gwygonik/SquiggleDraw"}},[this._v("SquiggleDraw")])])])}]};var b=s("VU/8")(f,_,!1,function(t){s("n0/Z")},null,null).exports,w=s("8smA"),C=s("86jz"),y=s.n(C);s("toYN");i.a.config.productionTip=!1,i.a.use(w.a),i.a.use(y.a),new i.a({el:"#app",components:{App:b},template:"<App/>"})},Q3wT:function(t,e){},mxzp:function(t,e){},"n0/Z":function(t,e){},toYN:function(t,e){},uMhA:function(t,e){}},["NHnr"]);
|
|
//# sourceMappingURL=app.2cf2ad8ffdb718b4ceba.js.map
|