orimuse作品上传_线框图
时间:2022-05-06
本文章向大家介绍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>
- CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins
- jenkins 入门教程(中)
- docker学习(1) 安装
- Ajax等待返回结果时,弹出一个友好的等待提示
- Facebook Like Button在IE上的bug
- CSS魔法堂:hasLayout原来是这样!
- jetty 9 嵌入式开发示例
- 人工智能之头像识别
- mysql : utf8mb4 的问题
- 列举一下项目中使用的产品和技术
- mysql的sql_mode模式
- docker学习(5) 在mac中创建mysql docker容器
- ssh远程执行目标机器上的命令
- 使用jQuery Tools scrollable注意事项
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 求求你,不要再纠结指针了(2)——函数指针
- 用Python解决100个问题 | 倒计时
- 【转载】【ionic+angularjs】angularjs ui-router路由简介
- 实时性迷思(1) —— “快是优点么?”
- Java中Thread的join方法为什么能让线程插队?
- 再见 ELK,是时候拥抱下一代日志系统 Loki 了
- 利用VBAProject来共用VBA代码
- 线上频出MySQL死锁问题!分享一下自己教科书般的排查和分析过程!
- 换人!这些算法都不会还学什么操作系统
- 【赵渝强老师】第一个Oracle的手工备份和恢复
- LeetCode刷题DAY 36:最小路径和
- Java底层-JMX
- VBA汇总多个Sheet数据
- VBA数据类型String
- 第一个程序