Skip to content

Instantly share code, notes, and snippets.

@mertyildiran

mertyildiran/code.html

Created April 27, 2017 21:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mertyildiran/d3740fe193a8197158e6a31dc8a85023 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mertyildiran/d3740fe193a8197158e6a31dc8a85023 to your computer and use it in GitHub Desktop.
Download ZIP
dyon3334's code
Raw
code.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Stencil generator</title>
<link href="./vector/bootstrap.min.css" rel="stylesheet">
<link href="./vector/font-awesome.min.css" rel="stylesheet">
<link href="./vector/vectorcam.css" rel="stylesheet">
<script src="./vector/jquery.min.js"></script>
<script src="./vector/bootstrap.min.js"></script>
<!--<script src="./vector/vectorcam.js"></script>-->
<script type="text/javascript" src="./js/jquery.form.js"></script>
<script src="./vector/imagetracer_v1.1.2.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
<script type="text/javascript" src="./js/paper.js"></script>
<script src="./smoother/index.js"></script>
<script src="./smoother/bundle.js"></script>
<script src="./smoother/index.js"></script>
</head>
<style>
#preview_img:hover{
cursor:pointer;
}
#preset0Choice{
overflow:auto;
}
button{
color:black;
}
canvas:hover{
cursor:pointer;
}
canvas{
display:none;
border: 0px solid grey;
}
.stencil_act{
border: 0px solid red;
}
button {
color: white;
background: #b3a9a9;
}
</style>
<body>
<div class="container" id="container">
<div class="row" style="margin:0px;width:100%;"><img src="img/beam.bmp" style="width:100%;" /></div>
<div class="row" style="padding-top:20px;">
<div class="col-xs-3" style="text-align: right;"><button id="btnback">Back</button></div>
<div class="col-xs-6" style="min-height: 50vh;">
<div id="preset" style="width:100%;">
<img id="preview_img1" src="<?=$_POST['img_file']?>" style="display: block;background:grey;width:100%;">
<img id="wait" src="./mask/wait.gif" style="display: none;width:30%;">
<canvas id="total_canvas" width="100%" height="100%"></canvas>
<canvas id="wcanvas" width="100%" height="100%"></canvas>
<canvas id="wcanvas2" width="100%" height="100%"></canvas>
<canvas id="wcanvas3" width="100%" height="100%"></canvas>
<canvas id="wcanvas4" width="100%" height="100%"></canvas>
<div id="wsvg" style="display:none;"></div>
<div id="wsvg1" style="display:none;"></div>
<div id="wsvg2" style="display:none;"></div>
<div id="wsvg3" style="display:none;"></div>
</div>
</div>
<div class="col-xs-3" style="text-align: left;"><button id="btnnext">Next</button></div>
</div>
<div class="row" id="ctr_st" style="margin:10px;display:none;">
<div style="max-width: 140px;height: auto;margin-top: -110px;background: #b3a9a9;padding: 5px;position:relative;z-index: 5;">
<p>Max Length: <select id="bridge_max" style="color:black;">
<option value="0">5</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60" selected>60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
</select></p><p id="start_num_p">
Number: <select id="number" style="color:black;">
<option value="0">0</option>
<option value="5" selected>5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option
</select></p>
<p>
<select id="bkcolor" style="color:black;">
<option value="0" selected>White</option>
<option value="1">Original</option>
</select>
</p>
<button id="create_stencil" style="background: #f3f3f3;color:black;">Create Stencil</button><input type="hidden" id="sel_stencil" />
</div>
</div>
<div class="row" style="margin:10px;">
<div class="col-xs-2" style="text-align:left;">
<canvas class="canvas" width="100%" height="100%" style="display: none;"></canvas>
</div>
<div class="col-xs-2"><button id="ostencil1">Layer1</button></div>
<div class="col-xs-2"><button id="ostencil2">Layer2</button></div>
<div class="col-xs-2"><button id="ostencil3">Layer3</button></div>
<div class="col-xs-2"><button id="ostencil4">Layer4</button></div>
<div class="col-xs-2">
<form method="post" action="index2.php" id="page2">
<input type="hidden" id="stencil" name="stencil" val="<?=$_POST['img_file']?>" />
<input type="hidden" id="stencil_img" name="stencil_img" value="<?=$_POST['img_file']?>" />
<input type="hidden" id="layer" name="layer" value="1" />
</form></div>
</div>
</div>
<div id="svg1" style="display: none;"></div>
<div id="svg2" style="display: none;"></div>
<div id="svg3" style="display: none;"></div>
<div id="svg4" style="display: none;"></div>
<p style="text-align:center;"><div id='org_svg'></div></p>
<input type="hidden" id="original_color" value="white" />
<script>
$(document).ready(function(){
$('#ostencil1').click(function(){
$('canvas').hide();
$('#preview_img1').attr('src',"<?=$_POST['tmp_file1']?>");
$('#preview_img1').show();
//svg_smooth("<?=$_POST['tmp_file1']?>")
$('#ctr_st').show();
$('#sel_stencil').val("1");
toctx.fillStyle="#FFFFFF";
toctx.fillRect(0,0,tocanvas.width,tocanvas.height);
});
$('#ostencil2').click(function(){
$('canvas').hide();
$('#preview_img1').attr('src',"<?=$_POST['tmp_file2']?>");
$('#preview_img1').show();
//svg_smooth("<?=$_POST['tmp_file2']?>")
$('#ctr_st').show();
$('#sel_stencil').val("2");
toctx.fillStyle="#FFFFFF";
toctx.fillRect(0,0,tocanvas.width,tocanvas.height);
});
$('#ostencil3').click(function(){
$('canvas').hide();
$('#preview_img1').attr('src',"<?=$_POST['tmp_file3']?>");
$('#preview_img1').show();
//svg_smooth("<?=$_POST['tmp_file3']?>")
$('#ctr_st').show();
$('#sel_stencil').val("3");
toctx.fillStyle="#FFFFFF";
toctx.fillRect(0,0,tocanvas.width,tocanvas.height);
});
$('#ostencil4').click(function(){
$('canvas').hide();
$('#preview_img1').attr('src',"<?=$_POST['tmp_file4']?>");
$('#preview_img1').show();
//svg_smooth("<?=$_POST['tmp_file4']?>")
$('#ctr_st').show();
$('#sel_stencil').val("4");
toctx.fillStyle="#FFFFFF";
toctx.fillRect(0,0,tocanvas.width,tocanvas.height);
});
$('#create_stencil').click(function(){
var sel_stencil=$('#sel_stencil').val();
$('#wait').show();
// $('#stencil').val("<?=$_POST['tmp_file2']?>");
if(sel_stencil=="1"){
svgdraw1("bri");
$('#layer').val("1");
}else if(sel_stencil=="2"){
svgdraw2("bri");
$('#layer').val("2");
}else if(sel_stencil=="3"){
svgdraw3("bri");
$('#layer').val("3");
}else if(sel_stencil=="4"){
svgdraw4("bri");
$('#layer').val("4");
}
$('canvas').removeClass('stencil_act');
$('#wcanvas').addClass('stencil_act');
});
$('canvas').click(function(){
$('canvas').removeClass('stencil_act');
$(this).addClass('stencil_act');
//$('#stencil').val($(this).attr("stencil"));
});
$('#btnback').click(function(){
location.href="./index.php";
});
$('#btnnext').click(function(){
var canvas=document.getElementById("total_canvas");
var ctx=canvas.getContext("2d");
var dataURL = canvas.toDataURL("image/png");
if($("#layer").val()==1)filepath1="<?=$_POST['img_file']?>"+"a.png";
if($("#layer").val()==2)filepath1="<?=$_POST['img_file']?>"+"b.png";
if($("#layer").val()==3)filepath1="<?=$_POST['img_file']?>"+"c.png";
if($("#layer").val()==4)filepath1="<?=$_POST['img_file']?>"+"d.png";
$.post("svg.php", {data:dataURL,filepath:filepath1,s:"png" }, function(result) {
$('#page2').submit();
});
});
$('#save').click(function(){
canvas=document.getElementById("wcanvas");
targetPNG=canvas.toDataURL();
});
$('canvas').hide();
$('#bridge').click(function(){
svgdraw1("bri");
});
$('#bstl').click(function(){
$('#start_num').val(parseInt($('#start_num').val())+1);
});
$('#stencil1').click(function(){
$('#wait').show();
svgdraw1("bri");
//$('#stencil').val("<?=$_POST['tmp_file2']?>");
$('#layer').val("1");
$('canvas').removeClass('stencil_act');
$('#wcanvas').addClass('stencil_act');
//$('#wsvg').show();
});
$('#stencil2').click(function(){
$('#wait').show();
svgdraw2("bri");
$('#stencil').val("<?=$_POST['tmp_file2']?>");
$('#layer').val("2");
$('canvas').removeClass('stencil_act');
$('#wcanvas').addClass('stencil_act');
});
$('#stencil3').click(function(){
$('#wait').show();
svgdraw3("bri");
//$('#stencil').val("<?=$_POST['tmp_file2']?>");
$('#layer').val("3");
$('canvas').removeClass('stencil_act');
$('#wcanvas').addClass('stencil_act');
});
$('#stencil4').click(function(){
$('#wait').show();
svgdraw4("bri");
//$('#stencil').val("<?=$_POST['tmp_file2']?>");
$('#layer').val("4");
$('canvas').removeClass('stencil_act');
$('#wcanvas').addClass('stencil_act');
});
function svg_smooth(path){
$('#preview_img1').hide();
$('#wait').show();
var path1=path;
$.post("get.php", {data: path1}, function(result){
//$('#wsvg').html(scaleNumbers(result,1));
$('#wsvg').html(result);
div=$('#wsvg svg rect').attr('fill');
$('#wsvg svg rect').attr('fill','rgb(255,255,255)');
$('#wsvg svg path').each(function(){
if($(this).attr('fill')==div){
$(this).attr('fill','rgb(255,255,255)');$(this).attr('stroke','rgb(255,255,255)');
}else{
//$(this).attr('fill','rgb(0,0,0)');$(this).attr('stroke','rgb(0,0,0)');start=true;
}
var t=$(this).attr('d').replace(/Q/g,'L').replace(/M/g,'').replace(/ L/g,'').split(" ");
var cux=t[0],cuy=t[1];
var path=parseInt(cux)+" "+parseInt(cuy)+" Q ";
if(t.length>50){
for(i=2;i<=t.length-3;i=i+2){
var dis=Math.sqrt(Math.pow(cux-t[i],2)+Math.pow(cuy-t[i+1],2));
var stp=5;
if(dis>stp){
cux=parseInt(t[i]);cuy=parseInt(t[i+1]);
//cux=t[i];cuy=t[i+1];
path+=cux+" "+cuy+" ";
}
}
$(this).attr('d',"M"+path+"Z ");
}
});
//$('#wsvg svg path').attr('stroke-linecap','round');
$.post("svg.php", {data: $('#wsvg').html(),filepath:path1,s:'smooth'}, function(data){
$('#preview_img1').attr('src',data);
$('#preview_img1').show();
$('#wait').hide();
});
});
$("#wsvg").html(result);$("#wsvg").show();
//$('#preview_img1').attr('src',path1);
// $('#wait').hide();
// $('#preview_img1').show();
}
function create_bridge(id,clr){
var w1=[],b1=[],w2=[],b2=[];
var w=0,b=0;
black=false;
$(id+' svg rect').remove();
$(id+' svg path').each(function(){
if($(this).attr('fill')==clr){
black=true;
$(this).attr('stroke','rgb(255,255,255)');
}
if(black==false){
$(this).remove();
}else{
if($(this).attr('fill')=="rgb(255,255,255)"){
var t=$(this).attr('d').replace(/Q/g,'L').replace(/M/g,'').replace(/ L/g,'').split(" ");
var w11=[],w22=[];
var bd=true;
for(i=0;i<=t.length-3;i=i+2){
tmpw=($(id+' svg').attr('width').replace(/px/g,''));
tmph=($(id+' svg').attr('height').replace(/px/g,''))
//if(((t[i])<=0 || (t[i])>=tmpw) || ((t[i+1])<=0 || t[i+1]>=tmph)){bd=false;break;}
w11.push(t[i]);w22.push(t[i+1]);
}
if(bd==true){
w1.push(w11);w2.push(w22);w++;
$(this).attr("desc","1 10 p "+w1.length);
}
}else{
var t=$(this).attr('d').replace(/Q/g,'L').replace(/M/g,'').replace(/ L/g,'').split(" ");
var b11=[],b22=[];
for(j=0;j<=t.length-3;j=j+2){
b11.push(t[j]);b22.push(t[j+1]);
}
b1.push(b11);b2.push(b22);b++;
}
//$(this).attr('d','M'+t);
}
//$(this).remove();
});
//if(parseInt($('#start_num').val())>w)$('#start_num').val(0);
//alert($('#start_num option').length);
if($('#start_num option').length<w){
var html='Path: <select id="start_num" style="color:black;">';
for(i=w-1;i>=1;i--){
html+='<option value="'+i+'">'+i+'</option>';
}
html+='</select>';
$('#start_num_p').html(html);
}
var start_num=parseInt($('#start_num').val());
if(start_num>=w)start_num=start_num%w;
for(s=0;s<=w-1;s++){
i=start_num+s;
if(i>w-1){
i=i-w;
}
mdis=9999;
for(j=0;j<=b1.length-1;j++){
z=b1[j].length;
for(jj=0;jj<=b1[j].length-1;jj++){
for(ii=0;ii<=w1[i].length-1;ii++){
a1=Math.pow((w1[i][ii]-b1[j][jj]),2);
a2=Math.pow((w2[i][ii]-b2[j][jj]),2);
dis=Math.sqrt(a1+a2);
if(dis<mdis){mdis=dis;bn1=j;bn2=jj;wn=ii;}
}
}
}
if(mdis<parseInt($('#bridge_max').val())){
var rwx=[],rwy=[];
for(ii=0;ii<=w1[i].length-1;ii++){
if((wn-ii)<=0){
rwx[ii]=w1[i][w1[i].length+(wn-ii)-1];
rwy[ii]=w2[i][w1[i].length+(wn-ii)-1];
}else{
rwx[ii]=w1[i][wn-ii];
rwy[ii]=w2[i][wn-ii];
}
}
b1.push(rwx);
b2.push(rwy);
var htl="M"+w1[i][wn]+" "+w2[i][wn]+" "+w1[i][wn+1]+" "+w2[i][wn+1]+" "+b1[bn1][bn2]+" "+b2[bn1][bn2]+" "+b1[bn1][bn2+1]+" "+b2[bn1][bn2+1]+" "+w1[i][wn]+" "+w2[i][wn]+" ";
$(id+" svg").append('<path fill="rgb(255,255,255)" stroke="rgb(255,255,255)" stroke-width="2" d="'+htl.replace(/,/g,' ')+'Z "></path>');
}else{
$(id+' svg path').each(function(){
z=i+1;
if($(this).attr("desc")=="1 10 p "+z){
$(this).attr("fill",clr);
$(this).attr("stroke",clr);
}
});
}
}
}
var tocanvas=document.getElementById("total_canvas");
var toctx=tocanvas.getContext("2d");
img=new Image();
img.src="<?=$_POST['img_file']?>";
img.onload=function(){
a=img.height/img.width;
tocanvas.width=$('#preview_img1').width();
tocanvas.height=tocanvas.width*a;
toctx.fillStyle="#FFFFFF";
toctx.fillRect(0,0,tocanvas.width,tocanvas.height);
}
function stencil_comp1(canvas,file1,s1){
var pcanvas1=document.getElementById(canvas);
var pctx1=pcanvas1.getContext("2d");
tracer1 = ImageTracer;
var render1=tracer1.getImgdata(pcanvas1);
$('#svg1').html(tracer1.imagedataToSVG( render1, ""));
var clr1=$('#svg1 svg rect').attr('fill');
$('#svg1 svg rect').remove();
$('#svg1 svg path').each(function(){
tc1=$(this).attr('fill').split("(");
tc2=tc1[1].split(")");
tc=tc2[0].split(",");
//if((tc[0]>=230 && tc[1]>=230 && tc[2]>=230) || $(this).attr('fill')==clr1){
if($(this).attr('fill')==clr1){
$(this).remove();
}
});
//$('#total_canvas').show();$('#wait').hide();
$.post("svg.php", {data: $('#svg1').html(),file:file1,s:s1}, function(result){
img1=new Image();
var DOMURL1 = window.URL || window.webkitURL || window;
var svg1 = new Blob([$('#svg1').html()], {type: 'image/svg+xml'});
var url1 = DOMURL1.createObjectURL(svg1);
img1.src=url1;
img1.onload=function(){
a=img1.height/img1.width;
toctx.drawImage(img1,0,0,img1.width,img1.height,0,0,tocanvas.width,tocanvas.height);
}
});
}
function stencil_comp2(canvas2,file1,s1){
var pcanvas2=document.getElementById(canvas2);
var pctx2=pcanvas2.getContext("2d");
tracer2 = ImageTracer;
var render2=tracer2.getImgdata(pcanvas2);
html=tracer2.imagedataToSVG( render2, "");
$('#svg2').html(html);
var clr2=$('#svg2 svg rect').attr('fill');
$('#svg2 svg rect').remove();
$('#svg2 svg path').each(function(){
tc1=$(this).attr('fill').split("(");
tc2=tc1[1].split(")");
tc=tc2[0].split(",");
//if((tc[0]>=230 && tc[1]>=230 && tc[2]>=230) || $(this).attr('fill')==clr2){
if($(this).attr('fill')==clr2){
$(this).remove();
}
});
//$('#total_canvas').show();$('#wait').hide();
$.post("svg.php", {data: $('#svg2').html(),file:file1,s:s1}, function(result){
img2=new Image();
var DOMURL2 = window.URL || window.webkitURL || window;
var svg2 = new Blob([$('#svg2').html()], {type: 'image/svg+xml'});
var url2 = DOMURL2.createObjectURL(svg2);
img2.src=url2;
img2.onload=function(){
toctx.drawImage(img2,0,0,img2.width,img2.height,0,0,tocanvas.width,tocanvas.height);
}
});
}
function stencil_comp3(canvas,file1,s1){
var pcanvas=document.getElementById(canvas);
var pctx=pcanvas.getContext("2d");
tracer = ImageTracer;
var render=tracer.getImgdata(pcanvas);
html=tracer.imagedataToSVG( render, "");
$('#svg3').html(html);
var clr3=$('#svg3 svg rect').attr('fill');
$('#svg3 svg rect').remove();
$('#svg3 svg path').each(function(){
tc1=$(this).attr('fill').split("(");
tc2=tc1[1].split(")");
tc=tc2[0].split(",");
//if((tc[0]>=230 && tc[1]>=230 && tc[2]>=230) || $(this).attr('fill')==clr3){
if($(this).attr('fill')==clr3){
$(this).remove();
}
});
//$('#total_canvas').show();$('#wait').hide();
$.post("svg.php", {data: $('#svg3').html(),file:file1,s:s1}, function(result){
img3=new Image();
var DOMURL3 = window.URL || window.webkitURL || window;
var svg3= new Blob([$('#svg3').html()], {type: 'image/svg+xml'});
var url3 = DOMURL3.createObjectURL(svg3);
img3.src=url3;
img3.onload=function(){
toctx.drawImage(img3,0,0,img3.width,img3.height,0,0,tocanvas.width,tocanvas.height);
}
});
}
function stencil_comp4(canvas,file1,s1){
var pcanvas=document.getElementById(canvas);
var pctx=pcanvas.getContext("2d");
tracer = ImageTracer;
var render=tracer.getImgdata(pcanvas);
$('#svg4').html(tracer.imagedataToSVG( render, ""));
var clr4=$('#svg4 svg rect').attr('fill');
$('#svg4 svg rect').remove();
$('#svg4 svg path').each(function(){
tc1=$(this).attr('fill').split("(");
tc2=tc1[1].split(")");
tc=tc2[0].split(",");
//if((tc[0]>=230 && tc[1]>=230 && tc[2]>=230) || $(this).attr('fill')==clr4){
if($(this).attr('fill')==clr4){
$(this).remove();
}
});
//$('#total_canvas').show();$('#wait').hide();
$.post("svg.php", {data: $('#svg4').html(),file:file1,s:s1}, function(result){
img4=new Image();
var DOMURL4 = window.URL || window.webkitURL || window;
var svg4 = new Blob([$('#svg4').html()], {type: 'image/svg+xml'});
var url4 = DOMURL4.createObjectURL(svg4);
img4.src=url4;
img4.onload=function(){
toctx.drawImage(img4,0,0,img4.width,img4.height,0,0,tocanvas.width,tocanvas.height);
}
});
}
var options= {
numberofcolors: 64,
colorquantcycles: 12,
ltres : 0,
qtres : 0,
pathomit:1,
colorsampling:true,
mincolorratio:0.01,
blurradius:0,
blurdelta:0,
roundcoords:0,
};
function svgdraw1(sel){
$('#wsvg').html("");
$('canvas').hide();
$('#preview_img1').hide();
//$('#wcanvas').show();
$.post("get.php", {data: "<?=$_POST['tmp_file1']?>"}, function(result){
$('#wsvg').html(result);
//$('#wsvg svg path').attr("stroke","none");
div=$('#wsvg svg rect').attr('fill');
$("#original_color").val(div);
$('#wsvg svg rect').attr('fill',$("#original_color").val());
var pclr=[],pcpath=[];
//pclr.push(div);
var start = false;
$('#wsvg svg path').each(function () {
if ($(this).attr('fill') ==div) {
if (start == true) {
pcpath.push($(this).attr('d') + '///0');
}
} else {
if (start == false) {
start = true;
//pclr.push($(this).attr('fill'));
tclr=$(this).attr('fill');
}
pcpath.push($(this).attr('d')+'///1');
}
});
file1="<?=$_POST['img_file']?>";
$.post("svg.php", {
clr1: div,
clr2: tclr,
file: file1,
ss: 'brg',
width:$('#wsvg svg').attr('width'),
height:$('#wsvg svg').attr('height'),
path:pcpath,
bridge_max:$("#bridge_max").val(),
number:$("#number").val()
}, function(result) {
$('#wsvg').html(result);
$('#wsvg svg rect').attr("fill", $("#original_color").val());
drawcanvas1('#wsvg', 'wcanvas', document.getElementById("total_canvas"), 1,tclr);
$('#total_canvas').show();
$('#wait').hide();
$("#layer").val("1");
});
});
}
function svgdraw2(sel){
$('canvas').hide();
$('#preview_img1').hide();
var flag=0;
var count1=0;
$.post("get.php", {data: "<?=$_POST['tmp_file2']?>"}, function(result){
//$('#org_svg').html(result);
var pcpath1 = [], pcpath2 = [], pclr = [];
$('#wsvg').html(result);
//$('#wsvg svg path').attr("stroke","none");
div = $('#wsvg svg rect').attr('fill');
$("#original_color").val(div);
pclr.push(div);
var start = false;
tclr = "xxx";
file1 = "<?=$_POST['img_file']?>";
var count=0;
$('#wsvg svg path').each(function () {
if ($(this).attr('fill') == div) {
//if(start==true)pcwhite1.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
} else {
flag++;
if (flag == 1) {
tclr = $(this).attr('fill');
start = true;
}
if (tclr == $(this).attr('fill')) {
//pcblack1.push($(this).attr("d"));
} else {
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
}
}
});
//drawcanvas('#wsvg', 'wcanvas');
var canvas1=document.getElementById('wcanvas');
var ctx1=canvas1.getContext("2d");
var img1=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg1 = new Blob([$('#wsvg').html()], {type: 'image/svg+xml'});
var url1 = DOMURL.createObjectURL(svg1);
img1.src=url1;
img1.onload=function(){
canvas1.width=img1.width;
canvas1.height=img1.height;
ctx1.fillStyle=$("#original_color").val();
ctx1.fillRect(0,0,canvas1.width,canvas1.height);
ctx1.drawImage(img1,0,0,img1.width,img1.height,0,0,canvas1.width,canvas1.height);
tracer1 = ImageTracer;
var render1=tracer1.getImgdata(canvas1);
$('#wsvg').html(tracer1.imagedataToSVG( render1, options));
//$('#wsvg svg path').attr("stroke","none");
if(tclr) {
count1++;
tclr = select_color('#wsvg', tclr);
div = $('#wsvg svg path:first-child').attr("fill");
start = false;
$('#wsvg svg path').each(function () {
if ($(this).attr('fill') == div) {
if (start == true) {
if ($("#number").val() * 3 < $(this).attr("d").length) {
pcpath1.push($(this).attr('d') + '///0');
}
}
} else {
if (start == false) {
start = true;
pclr.push($(this).attr('fill'));
//tclr = $(this).attr('fill');
}
if ($("#number").val() * 3 < $(this).attr("d").length && tclr == $(this).attr('fill'))pcpath1.push($(this).attr('d') + '///1');
}
});
$.post("svg.php", {
clr1: div,
clr2: tclr,
path: pcpath1,
file: file1 + ".b1.svg",
ss: 'brg',
width: $('#wsvg svg').attr('width'),
height: $('#wsvg svg').attr('height'),
bridge_max: $("#bridge_max").val(),
number: $("#number").val()
}, function (result) {
count++;
$('#wsvg').html(result);
$('#wsvg svg rect').attr("fill", $("#original_color").val());
drawcanvas1('#wsvg', 'wcanvas', document.getElementById("total_canvas"), count,tclr);
if (count == count1) {
$('#total_canvas').show();
$('#wait').hide();
$("#layer").val("2");
}
});
}
}
$('#wsvg1').html(result);
//$('#wsvg1 svg path').attr("stroke","none");
flag = 0;
start = false;
var tclr1;
$('#wsvg1 svg path').each(function () {
if ($(this).attr('fill') == div || $(this).attr('fill') == tclr) {
//if(start==true)pcwhite2.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
} else {
flag++;
if (flag == 1) {
tclr1 = $(this).attr('fill');
start = true;
//pclr.push($(this).attr('fill'));
}
if (tclr1 == $(this).attr('fill')) {
//pcblack2.push($(this).attr("d"));
} else {
//pcwhite2.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
}
}
});
//drawcanvas('#wsvg1', 'wcanvas2');
var canvas2=document.getElementById('wcanvas2');
var ctx2=canvas2.getContext("2d");
var img2=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg2 = new Blob([$('#wsvg1').html()], {type: 'image/svg+xml'});
var url2 = DOMURL.createObjectURL(svg2);
img2.src=url2;
img2.onload=function(){
canvas2.width=img2.width;
canvas2.height=img2.height;
ctx2.fillStyle=$("#original_color").val();
ctx2.fillRect(0,0,canvas2.width,canvas2.height);
ctx2.drawImage(img2,0,0,img2.width,img2.height,0,0,canvas2.width,canvas2.height);
tracer2 = ImageTracer;
var render2=tracer2.getImgdata(canvas2);
$('#wsvg1').html(tracer2.imagedataToSVG( render2, options));
if(tclr1) {
count1++;
tclr1 = select_color('#wsvg1', tclr1);
//$('#wsvg1 svg path').attr("stroke","none");
div = $('#wsvg1 svg path:first-child').attr("fill");
start = false;
$('#wsvg1 svg path').each(function () {
if ($(this).attr('fill') == div) {
if (start == true) {
if ($("#number").val() * 3 < $(this).attr("d").length)pcpath2.push($(this).attr('d') + '///0');
}
} else {
if (start == false) {
start = true;
pclr.push($(this).attr('fill'));
//tclr1 = $(this).attr('fill');
}
if ($("#number").val() * 3 < $(this).attr("d").length && tclr1 == $(this).attr('fill'))pcpath2.push($(this).attr('d') + '///1');
}
});
$.post("svg.php", {
clr1: div,
clr2: tclr1,
path: pcpath2,
file: file1 + ".b2.svg",
ss: 'brg',
width: $('#wsvg1 svg').attr('width'),
height: $('#wsvg1 svg').attr('height'),
bridge_max: $("#bridge_max").val(),
number: $("#number").val()
}, function (result) {
count++;
$('#wsvg1').html(result);
$('#wsvg1 svg rect').attr("fill", $("#original_color").val());
drawcanvas1('#wsvg1', 'wcanvas2', document.getElementById("total_canvas"), count,tclr1);
if (count == count1) {
$('#total_canvas').show();
$('#wait').hide();
$("#layer").val("2");
}
});
}
}
});
}
function svgdraw3(sel){
$('canvas').hide();
$('#preview_img1').hide();
var flag=0;
var count1=0;
$.post("get.php", {data: "<?=$_POST['tmp_file3']?>"}, function(result){
//$('#org_svg').html(result);
var pcpath1 = [], pcpath2 = [], pcpath3 = [], pclr = [];
$('#wsvg').html(result);
//$('#wsvg svg path').attr("stroke","none");
div = $('#wsvg svg rect').attr('fill');
$("#original_color").val(div);
pclr.push(div);
var start = false;
tclr = "xxx";
var file1 = "<?=$_POST['img_file']?>";
var count=0;
$('#wsvg svg path').each(function () {
if ($(this).attr('fill') == div) {
//if(start==true)pcwhite1.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
} else {
flag++;
if (flag == 1) {
tclr = $(this).attr('fill');
start = true;
}
if (tclr == $(this).attr('fill')) {
//pcblack1.push($(this).attr("d"));
} else {
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
}
}
});
//drawcanvas('#wsvg', 'wcanvas');
var canvas1=document.getElementById('wcanvas');
var ctx1=canvas1.getContext("2d");
var img1=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg1 = new Blob([$('#wsvg').html()], {type: 'image/svg+xml'});
var url1 = DOMURL.createObjectURL(svg1);
img1.src=url1;
img1.onload=function() {
canvas1.width = img1.width;
canvas1.height = img1.height;
ctx1.fillStyle = $("#original_color").val();
ctx1.fillRect(0, 0, canvas1.width, canvas1.height);
ctx1.drawImage(img1, 0, 0, img1.width, img1.height, 0, 0, canvas1.width, canvas1.height);
tracer1 = ImageTracer;
var render1 = tracer1.getImgdata(canvas1);
$('#wsvg').html(tracer1.imagedataToSVG(render1, options));
if(tclr){
count1++;
tclr = select_color('#wsvg', tclr);
//$('#wsvg svg path').attr("stroke","none");
div = $('#wsvg svg path:first-child').attr("fill");
start = false;
$('#wsvg svg path').each(function () {
if ($(this).attr('fill') == div) {
if (start == true) {
if ($("#number").val() * 3 < $(this).attr("d").length) {
pcpath1.push($(this).attr('d') + '///0');
}
}
} else {
if (start == false) {
start = true;
pclr.push($(this).attr('fill'));
//tclr = $(this).attr('fill');
}
if ($("#number").val() * 3 < $(this).attr("d").length && tclr == $(this).attr('fill'))pcpath1.push($(this).attr('d') + '///1');
}
});
$.post("svg.php", {
clr1: div,
clr2: tclr,
path: pcpath1,
file: file1 + ".c1.svg",
ss: 'brg',
width: $('#wsvg svg').attr('width'),
height: $('#wsvg svg').attr('height'),
bridge_max: $("#bridge_max").val(),
number: $("#number").val()
}, function (result) {
count++;
$('#wsvg').html(result);
$('#wsvg svg rect').attr("fill", $("#original_color").val());
drawcanvas1('#wsvg', 'wcanvas', document.getElementById("total_canvas"), count,tclr);
if (count == count1) {
$('#total_canvas').show();
$('#wait').hide();
$("#layer").val("3");
}
});
}
}
$('#wsvg1').html(result);
//$('#wsvg1 svg path').attr("stroke","none");
flag = 0;
start = false;
var tclr1;
$('#wsvg1 svg path').each(function () {
if ($(this).attr('fill') == div || $(this).attr('fill') == tclr) {
//if(start==true)pcwhite2.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
} else {
flag++;
if (flag == 1) {
tclr1 = $(this).attr('fill');
start = true;
//pclr.push($(this).attr('fill'));
}
if (tclr1 == $(this).attr('fill')) {
//pcblack2.push($(this).attr("d"));
} else {
//pcwhite2.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
}
}
});
//drawcanvas('#wsvg1', 'wcanvas2');
var canvas2=document.getElementById('wcanvas2');
var ctx2=canvas2.getContext("2d");
var img2=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg2 = new Blob([$('#wsvg1').html()], {type: 'image/svg+xml'});
var url2 = DOMURL.createObjectURL(svg2);
img2.src=url2;
img2.onload=function() {
canvas2.width = img2.width;
canvas2.height = img2.height;
ctx2.fillStyle = $("#original_color").val();
ctx2.fillRect(0, 0, canvas2.width, canvas2.height);
ctx2.drawImage(img2, 0, 0, img2.width, img2.height, 0, 0, canvas2.width, canvas2.height);
tracer2 = ImageTracer;
var render2 = tracer2.getImgdata(canvas2);
$('#wsvg1').html(tracer2.imagedataToSVG(render2, options));
//$('#wsvg1 svg path').attr("stroke","none");
if(tclr1){
count1++;
tclr1 = select_color('#wsvg1', tclr1);
div = $('#wsvg1 svg path:first-child').attr("fill");
start = false;
$('#wsvg1 svg path').each(function () {
if ($(this).attr('fill') == div) {
if (start == true) {
if ($("#number").val() * 3 < $(this).attr("d").length)pcpath2.push($(this).attr('d') + '///0');
}
} else {
if (start == false) {
start = true;
pclr.push($(this).attr('fill'));
//tclr1 = $(this).attr('fill');
}
if ($("#number").val() * 3 < $(this).attr("d").length && tclr1 == $(this).attr('fill'))pcpath2.push($(this).attr('d') + '///1');
}
});
$.post("svg.php", {
clr1: div,
clr2: tclr1,
path: pcpath2,
file: file1 + ".c2.svg",
ss: 'brg',
width: $('#wsvg1 svg').attr('width'),
height: $('#wsvg1 svg').attr('height'),
bridge_max: $("#bridge_max").val(),
number: $("#number").val()
}, function (result) {
count++;
$('#wsvg1').html(result);
$('#wsvg1 svg rect').attr("fill", $("#original_color").val());
drawcanvas1('#wsvg1', 'wcanvas2', document.getElementById("total_canvas"), count,tclr1);
if (count == count1) {
$('#total_canvas').show();
$('#wait').hide();
$("#layer").val("3");
}
});
}
}
$('#wsvg2').html(result);
//$('#wsvg2 svg path').attr("stroke","none");
flag = 0;
start = false;
var tclr2;
$('#wsvg2 svg path').each(function () {
if ($(this).attr('fill') == div || $(this).attr('fill') == tclr || $(this).attr('fill') == tclr1) {
//if(start==true)pcwhite3.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
} else {
flag++;
if (flag == 1) {
tclr2 = $(this).attr('fill');
start = true;
//pclr.push($(this).attr('fill'));
}
if (tclr2 == $(this).attr('fill')) {
//pcblack3.push($(this).attr("d"));
} else {
//pcwhite3.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
}
}
});
//drawcanvas('#wsvg2', 'wcanvas3');
var canvas3=document.getElementById('wcanvas3');
var ctx3=canvas3.getContext("2d");
var img3=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg3 = new Blob([$("#wsvg2").html()], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg3);
img3.src=url;
img3.onload=function(){
canvas3.width=img3.width;
canvas3.height=img3.height;
ctx3.fillStyle=$("#original_color").val();
ctx3.fillRect(0,0,canvas3.width,canvas3.height);
ctx3.drawImage(img3,0,0,img3.width,img3.height,0,0,canvas3.width,canvas3.height);
tracer3 = ImageTracer;
var render3=tracer3.getImgdata(canvas3);
$("#wsvg2").html(tracer3.imagedataToSVG( render3, options));
//$('#wsvg2 svg path').attr("stroke","none");
tclr2=select_color('#wsvg2',tclr2);
if(tclr2) {
count1++;
div = $('#wsvg2 svg path:first-child').attr("fill");
start = false;
$('#wsvg2 svg path').each(function () {
if ($(this).attr('fill') == div) {
if (start == true) {
if ($("#number").val() * 3 < $(this).attr("d").length)pcpath3.push($(this).attr('d') + '///0');
}
} else {
if (start == false) {
start = true;
pclr.push($(this).attr('fill'));
//tclr2 = $(this).attr('fill');
}
if ($("#number").val() * 3 < $(this).attr("d").length && tclr2 == $(this).attr('fill'))pcpath3.push($(this).attr('d') + '///1');
}
});
$.post("svg.php", {
clr1: div,
clr2: tclr2,
path: pcpath3,
file: file1 + ".c3.svg",
ss: 'brg',
width: $('#wsvg2 svg').attr('width'),
height: $('#wsvg2 svg').attr('height'),
bridge_max: $("#bridge_max").val(),
number: $("#number").val()
}, function (result) {
count++;
$('#wsvg2').html(result);
$('#wsvg2 svg rect').attr("fill", $("#original_color").val());
drawcanvas1('#wsvg2', 'wcanvas3', document.getElementById("total_canvas"), count,tclr2);
if (count == count1) {
$('#total_canvas').show();
$('#wait').hide();
$("#layer").val("3");
}
});
}
}
});
}
function svgdraw4(sel){
$('canvas').hide();
$('#preview_img1').hide();
var flag=0;
var count1=0;
$.post("get.php", {data: "<?=$_POST['tmp_file4']?>"}, function(result) {
//$('#org_svg').html(result);
var pcpath1 = [], pcpath2 = [], pcpath3 = [], pcpath4 = [], pclr = [];
$('#wsvg').html(result);
//$('#wsvg svg path').attr("stroke","none");
div = $('#wsvg svg rect').attr('fill');
$("#original_color").val(div);
pclr.push(div);
var start = false;
tclr = "xxx";
file1 = "<?=$_POST['img_file']?>";
var count=0;
$('#wsvg svg path').each(function () {
if ($(this).attr('fill') == div) {
//if(start==true)pcwhite1.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
} else {
flag++;
if (flag == 1) {
tclr = $(this).attr('fill');
start = true;
}
if (tclr == $(this).attr('fill')) {
//pcblack1.push($(this).attr("d"));
} else {
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
}
}
});
//drawcanvas('#wsvg', 'wcanvas');
var canvas1=document.getElementById('wcanvas');
var ctx1=canvas1.getContext("2d");
var img1=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg1 = new Blob([$('#wsvg').html()], {type: 'image/svg+xml'});
var url1 = DOMURL.createObjectURL(svg1);
img1.src=url1;
img1.onload=function(){
canvas1.width=img1.width;
canvas1.height=img1.height;
ctx1.fillStyle=$("#original_color").val();
ctx1.fillRect(0,0,canvas1.width,canvas1.height);
ctx1.drawImage(img1,0,0,img1.width,img1.height,0,0,canvas1.width,canvas1.height);
tracer1 = ImageTracer;
var render1=tracer1.getImgdata(canvas1);
$('#wsvg').html(tracer1.imagedataToSVG( render1, options));
tclr=select_color('#wsvg',tclr);
//$('#wsvg svg path').attr("stroke","none");
if(tclr) {
count1++;
start = false;
div = $('#wsvg svg path:first-child').attr("fill");
$('#wsvg svg path').each(function () {
if ($(this).attr('fill') == div) {
if (start == true) {
if ($("#number").val() * 3 < $(this).attr("d").length)pcpath1.push($(this).attr('d') + '///0');
}
} else {
if (start == false) {
start = true;
pclr.push($(this).attr('fill'));
//tclr = $(this).attr('fill');
}
if ($("#number").val() * 3 < $(this).attr("d").length && tclr == $(this).attr('fill'))pcpath1.push($(this).attr('d') + '///1');
}
});
$.post("svg.php", {
clr1: div,
clr2: tclr,
path: pcpath1,
file: file1 + ".d2.svg",
ss: 'brg',
width: $('#wsvg svg').attr('width'),
height: $('#wsvg svg').attr('height'),
bridge_max: $("#bridge_max").val(),
number: $("#number").val()
}, function (result) {
count++;
$('#wsvg').html(result);
$('#wsvg svg rect').attr("fill", $("#original_color").val());
drawcanvas1('#wsvg', 'wcanvas', document.getElementById("total_canvas"), count,tclr);
if (count == count1) {
$('#total_canvas').show();
$('#wait').hide();
$("#layer").val("4");
}
});
}
}
$('#wsvg1').html(result);
//$('#wsvg1 svg path').attr("stroke","none");
flag = 0;
start = false;
var tclr1;
$('#wsvg1 svg path').each(function () {
if ($(this).attr('fill') == div || $(this).attr('fill') == tclr) {
//if(start==true)pcwhite2.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
} else {
flag++;
if (flag == 1) {
tclr1 = $(this).attr('fill');
start = true;
//pclr.push($(this).attr('fill'));
}
if (tclr1 == $(this).attr('fill')) {
//pcblack2.push($(this).attr("d"));
} else {
//pcwhite2.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
}
}
});
//drawcanvas('#wsvg1', 'wcanvas2');
var canvas2=document.getElementById('wcanvas2');
var ctx2=canvas2.getContext("2d");
var img2=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg2 = new Blob([$('#wsvg1').html()], {type: 'image/svg+xml'});
var url2 = DOMURL.createObjectURL(svg2);
img2.src=url2;
img2.onload=function(){
canvas2.width=img2.width;
canvas2.height=img2.height;
ctx2.fillStyle=$("#original_color").val();
ctx2.fillRect(0,0,canvas2.width,canvas2.height);
ctx2.drawImage(img2,0,0,img2.width,img2.height,0,0,canvas2.width,canvas2.height);
tracer2 = ImageTracer;
var render2=tracer2.getImgdata(canvas2);
$('#wsvg1').html(tracer2.imagedataToSVG( render2, options));
tclr1=select_color('#wsvg1',tclr1);
if(tclr1) {
count1++;
//$('#wsvg1 svg path').attr("stroke","none");
start = false;
div = $('#wsvg1 svg path:first-child').attr("fill");
$('#wsvg1 svg path').each(function () {
if ($(this).attr('fill') == div) {
if (start == true) {
if ($("#number").val() * 3 < $(this).attr("d").length)pcpath2.push($(this).attr('d') + '///0');
}
} else {
if (start == false) {
start = true;
pclr.push($(this).attr('fill'));
//tclr1 = $(this).attr('fill')
}
if ($("#number").val() * 3 < $(this).attr("d").length && tclr1 == $(this).attr('fill'))pcpath2.push($(this).attr('d') + '///1');
}
});
$.post("svg.php", {
clr1: div,
clr2: tclr1,
path: pcpath2,
file: file1 + ".d1.svg",
ss: 'brg',
width: $('#wsvg1 svg').attr('width'),
height: $('#wsvg1 svg').attr('height'),
bridge_max: $("#bridge_max").val(),
number: $("#number").val()
}, function (result) {
count++;
$('#wsvg1').html(result);
$('#wsvg1 svg rect').attr("fill", $("#original_color").val());
drawcanvas1('#wsvg1', 'wcanvas2', document.getElementById("total_canvas"), count,tclr1);
if (count == count1) {
$('#total_canvas').show();
$('#wait').hide();
$("#layer").val("4");
}
});
}
}
$('#wsvg2').html(result);
//$('#wsvg2 svg path').attr("stroke","none");
flag = 0;
start = false;
var tclr2;
$('#wsvg2 svg path').each(function () {
if ($(this).attr('fill') == div || $(this).attr('fill') == tclr || $(this).attr('fill') == tclr1) {
//if(start==true)pcwhite3.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
} else {
flag++;
if (flag == 1) {
tclr2 = $(this).attr('fill');
start = true;
//pclr.push($(this).attr('fill'));
}
if (tclr2 == $(this).attr('fill')) {
//pcblack3.push($(this).attr("d"));
} else {
//pcwhite3.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
}
}
});
//drawcanvas('#wsvg2', 'wcanvas3');
var canvas3=document.getElementById('wcanvas3');
var ctx3=canvas3.getContext("2d");
var img3=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg3 = new Blob([$('#wsvg2').html()], {type: 'image/svg+xml'});
var url3 = DOMURL.createObjectURL(svg3);
img3.src=url3;
img3.onload=function(){
canvas3.width=img3.width;
canvas3.height=img3.height;
ctx3.fillStyle=$("#original_color").val();
ctx3.fillRect(0,0,canvas3.width,canvas3.height);
ctx3.drawImage(img3,0,0,img3.width,img3.height,0,0,canvas3.width,canvas3.height);
tracer3 = ImageTracer;
var render3=tracer3.getImgdata(canvas3);
$('#wsvg2').html(tracer3.imagedataToSVG( render3, options));
tclr2=select_color('#wsvg2',tclr2);
if(tclr2) {
count1++;
//$('#wsvg2 svg path').attr("stroke","none");
start = false;
div = $('#wsvg2 svg path:first-child').attr("fill");
$('#wsvg2 svg path').each(function () {
if ($(this).attr('fill') == div) {
if (start == true) {
if ($("#number").val() * 3 < $(this).attr("d").length)pcpath3.push($(this).attr('d') + '///0');
}
} else {
if (start == false) {
start = true;
pclr.push($(this).attr('fill'));
//tclr2 = $(this).attr('fill')
}
if ($("#number").val() * 3 < $(this).attr("d").length && tclr2 == $(this).attr('fill'))pcpath3.push($(this).attr('d') + '///1');
}
});
$.post("svg.php", {
clr1: div,
clr2: tclr2,
path: pcpath3,
file: file1 + ".d3.svg",
ss: 'brg',
width: $('#wsvg2 svg').attr('width'),
height: $('#wsvg2 svg').attr('height'),
bridge_max: $("#bridge_max").val(),
number: $("#number").val()
}, function (result) {
count++;
$('#wsvg2').html(result);
$('#wsvg2 svg rect').attr("fill", $("#original_color").val());
drawcanvas1('#wsvg2', 'wcanvas3', document.getElementById("total_canvas"), count,tclr2);
if (count == count1) {
$('#total_canvas').show();
$('#wait').hide();
$("#layer").val("4");
}
});
}
}
$('#wsvg3').html(result);
//$('#wsvg3 svg path').attr("stroke","none");
flag = 0;
start = false;
var tclr3;
$('#wsvg3 svg path').each(function () {
if ($(this).attr('fill') == div || $(this).attr('fill') == tclr || $(this).attr('fill') == tclr1 || $(this).attr('fill') == tclr2) {
//if(start==true)pcwhite4.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
} else {
flag++;
if (flag == 1) {
tclr3 = $(this).attr('fill');
start = true;
//pclr.push($(this).attr('fill'));
}
if (tclr3 == $(this).attr('fill')) {
//pcblack4.push($(this).attr("d"));
} else {
//pcwhite4.push($(this).attr("d"));
$(this).attr('fill', $("#original_color").val());
$(this).attr('stroke', $("#original_color").val());
}
}
});
//drawcanvas('#wsvg3', 'wcanvas4');
var canvas4=document.getElementById('wcanvas4');
var ctx4=canvas4.getContext("2d");
var img4=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg4 = new Blob([$('#wsvg3').html()], {type: 'image/svg+xml'});
var url4 = DOMURL.createObjectURL(svg4);
img4.src=url4;
img4.onload=function(){
canvas4.width=img4.width;
canvas4.height=img4.height;
ctx4.fillStyle=$("#original_color").val();
ctx4.fillRect(0,0,canvas4.width,canvas4.height);
ctx4.drawImage(img4,0,0,img4.width,img4.height,0,0,canvas4.width,canvas4.height);
tracer4 = ImageTracer;
var render4=tracer4.getImgdata(canvas4);
$('#wsvg3').html(tracer4.imagedataToSVG( render4, options));
if(tclr3){
count1++;
tclr3 = select_color('#wsvg3', tclr3);
//$('#wsvg3 svg path').attr("stroke","none");
start = false;
div = $('#wsvg3 svg path:first-child').attr("fill");
$('#wsvg3 svg path').each(function () {
if ($(this).attr('fill') == div) {
if (start == true) {
if ($("#number").val() * 3 < $(this).attr("d").length)pcpath4.push($(this).attr('d') + '///0');
}
} else {
if (start == false) {
start = true;
pclr.push($(this).attr('fill'));
//tclr3 = $(this).attr('fill')
}
if ($("#number").val() * 3 < $(this).attr("d").length && tclr3 == $(this).attr('fill'))pcpath4.push($(this).attr('d') + '///1');
}
});
$.post("svg.php", {
clr1: div,
clr2: tclr3,
path: pcpath4,
file: file1 + ".d4.svg",
ss: 'brg',
width: $('#wsvg3 svg').attr('width'),
height: $('#wsvg3 svg').attr('height'),
bridge_max: $("#bridge_max").val(),
number: $("#number").val()
}, function (result) {
count++;
$('#wsvg3').html(result);
$('#wsvg3 svg rect').attr("fill", $("#original_color").val());
drawcanvas1('#wsvg3', 'wcanvas4', document.getElementById("total_canvas"), count,tclr3);
if (count == count1) {
$('#total_canvas').show();
$('#wait').hide();
$("#layer").val("4");
}
});
}
}
});
}
});
function drawcanvas(tag,can){
var canvas=document.getElementById(can);
var ctx=canvas.getContext("2d");
var img=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg = new Blob([$(tag).html()], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.src=url;
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
ctx.fillStyle=$("#original_color").val();
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
tracer = ImageTracer;
var render=tracer.getImgdata(canvas);
options= {
numberofcolors: 2,
};
$(tag).html(tracer.imagedataToSVG( render, options));
//$(tag+' svg path').attr("stroke","none");
}
}
function drawcanvas1(tag,can,canvas1,check,oclr){
var canvas=document.getElementById(can);
var ctx=canvas.getContext("2d");
var img=new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg = new Blob([$(tag).html()], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img.src=url;
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
ctx.fillStyle="#FFFFFF";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
tracer = ImageTracer;
var render=tracer.getImgdata(canvas);
options= {
numberofcolors: 64,
colorquantcycles: 12,
ltres : 0,
qtres : 0,
pathomit:1,
colorsampling:true,
mincolorratio:0.01,
blurradius:0,
blurdelta:0,
roundcoords:0,
};
$(tag).html(tracer.imagedataToSVG( render, options));
//$(tag+' svg>path:first-child').remove();
oclr = select_color(tag, oclr);
$(tag+' svg path').each(function(){
if($(this).attr('fill')!=oclr)$(this).remove();
//$(this).attr("stroke","none");
});
var ctx1 = canvas1.getContext("2d");
var img1 = new Image();
var DOMURL = window.URL || window.webkitURL || window;
var svg1 = new Blob([$(tag).html()], {type: 'image/svg+xml'});
var url1 = DOMURL.createObjectURL(svg1);
img1.src = url1;
img1.onload = function () {
if(check==1) {
a = img1.height / img1.width;
if ($('#preset').height() < $('#preset').width() * a)$('#preset').height(($('#preset').width() * a));
canvas1.width = $('#preset').width() * 1;
canvas1.height = canvas1.width * a;
if(check==1) {
radioValue = $("#bkcolor").val();
if (radioValue == 0) {
ctx1.fillStyle = "#FFFFFF";
} else {
ctx1.fillStyle = $("#original_color").val();
}
ctx1.fillRect(0, 0, canvas1.width, canvas1.height);
}
}
ctx1.drawImage(img1, 0, 0, img1.width, img1.height, 0, 0, canvas1.width, canvas1.height);
}
}
}
function scaleNumbers(input, quality) {
var i = 0;
var current = '';
var output = '';
while (i < input.length) {
if (/\d/.test(input[i])) {
current += input[i];
} else if (current != '' && /\./.test(input[i])) {
current += input[i];
} else {
output += (current == '' ? '' : Math.round(current * quality)) + input[i];
current = ''
}
i++;
}
output += current == '' ? '' : Math.round(current * quality);
return output.replace(/^<\?xml\s+[^>]+>/, '')
.replace(/\s+PUBLIC\s+(("[^"]*"|'[^']*')\s*){2}/, '')
.replace(/<\!DOCTYPE\s+[^\s]+>/, '')
.replace(/http:\/\/www.w\d+org\/\d+\/svg/g, 'http://www.w3.org/2000/svg')
.replace(/http:\/\/www.w\d+org\/\d+\/xlink/g, 'http://www.w3.org/1999/xlink')
.replace(/http:\/\/www.w\d+org\/\d+\/xhtml/g, 'http://www.w3.org/1999/xhtml');
}
function colorToHex(color) {
/*if (color.substr(0, 1) === '#') {
return color;
}*/
//var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
temp=color.split("(");
temp1=temp[1].split(")");
digits=temp1[0].split(",");
var red = parseInt(digits[0]);
var green = parseInt(digits[1]);
var blue = parseInt(digits[2]);
var rgb = blue | (green << 8) | (red << 16);
return parseInt(rgb.toString(16),16);
}
function select_color(tag,clr){
var dif_color=999999;
var tclr_tmp;
$(tag+' svg path').each(function(){
var dif_tmp=Math.abs(colorToHex($(this).attr('fill'))-colorToHex(clr));
if(dif_tmp<dif_color){
dif_color=dif_tmp;tclr_tmp=$(this).attr('fill');
}
});
return tclr_tmp;
}
</script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment