orimuse作品上传_线框图

 <script>
window.onload=function(){
 var cloth_name={
 //衣服的款式图片
 man:{
 white_f:"img/shadow/m_white1.png",
     white_b:"img/shadow/m_white2.png",
     black_f:"img/shadow/m_black1.png",
     black_b:"img/shadow/m_black2.png"
 },
 woman:{
 white_f:"img/shadow/w_white1.png",
     white_b:"img/shadow/w_white2.png",
     black_b:"img/shadow/w_black2.png",
     black_f:"img/shadow/w_black1.png"
 }
 }
 var cloth_templete_tab=document.getElementById("cloth_templete_tab");
 var cloth_for_person=document.getElementsByClassName("cloth_for_person");
 //衣服款式选择面板切换  
 //衣服款式背景切换
 var div2=document.getElementById("div2");
 var cloth_for_person_choice=document.getElementsByClassName("cloth_for_person_choice");
    cloth_templete_tab.onchange=function(){
  if(cloth_templete_tab.value=="男"){
      cloth_for_person[0].style.display="none";
    cloth_for_person[1].style.display="block";//切换面板
   if(cloth_for_person_choice[1].value=="男白"){
   div2.style.background="url("+cloth_name.man.white_f+")";
   }else if(cloth_for_person_choice[1].value=="男黑"){
   div2.style.background="url("+cloth_name.man.black_f+")";
   }//切换衣服
  }else if(cloth_templete_tab.value=="女"){
      cloth_for_person[1].style.display="none";
      cloth_for_person[0].style.display="block";//切换面板
      if(cloth_for_person_choice[0].value=="女白"){
   div2.style.background="url("+cloth_name.woman.white_f+")";
   }else if(cloth_for_person_choice[0].value=="女黑"){
   div2.style.background="url("+cloth_name.woman.black_f+")";
   }//切换衣服
    }
    }
  cloth_for_person_choice[0].onchange=function(){
    if(cloth_for_person_choice[0].value=="女白"){
  div2.style.background="url("+cloth_name.woman.white_f+")";
  }else if(cloth_for_person_choice[0].value=="女黑"){
  div2.style.background="url("+cloth_name.woman.black_f+")";
  }
  }
   cloth_for_person_choice[1].onchange=function(){
  if(cloth_for_person_choice[1].value=="男白"){
  div2.style.background="url("+cloth_name.man.white_f+")";
  }else if(cloth_for_person_choice[1].value=="男黑"){
  div2.style.background="url("+cloth_name.man.black_f+")";
  }
  }
 //预览
 function pre_view(){
  var design_area=document.getElementById("design_area");
  var pre_view=document.getElementById("pre_view");
  pre_view.onmousemove=function(){
  design_area.style.border="none";
  }
  pre_view.onmouseout=function(){
  design_area.style.border="solid red 1px";
  }
 }
 pre_view();
 //设计
var canvas = document.getElementById('pre_view_canvas');
var context = canvas.getContext('2d');
//隐藏大图像上传
 var canvas_hidden = document.getElementById('pre_view_canvas_hidden');
 var context_hidden = canvas_hidden.getContext('2d');
 //定义一个图片对象
var bark = new Image(); 
function upload_myworks(){
  var file=document.getElementById("file");
 file.onchange=function () {
 var files = this.files; // 获取文件列表
 var reader = new FileReader(); //实例化FileReader对象，用于读取文件数据
 for (var i = 0, length = files.length; i < length; i++) {
 if (files[i].type.toLowerCase().match(/image.*/)) {// 正则判断文件类型是否为图片类型
 reader.addEventListener('load', function (e) { // 监听FileReader实例的load事件
       bark.src =e.target.result;
  // 图片加载完成后，将其显示在canvas上  
  // console.log(bark.src);//设置图片内容编码，可上传
   bark.onload=function(){                
  context.drawImage(bark,0,0, 285, 400);
  context_hidden.drawImage(bark,0,0, 2400, 3360);//获取大图
 }  
               });
       reader.readAsDataURL(files[i]); // 读取图片文件为dataURI格式
              break;
                 };
             };
           }
 }
upload_myworks();
//显示转化的图片
function appear_changed_img(){
 var changed=document.getElementById("changed");
 var changed_img=document.getElementById("changed_img");
 changed.onclick=function(){
 alert(canvas_hidden.toDataURL())
 changed_img.src=canvas_hidden.toDataURL();
 }
}
appear_changed_img() 
}
</script>