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>
- 1067: [SCOI2007]降雨量
- 2761: [JLOI2011]不重复数字(哈希表)
- 1297: [SCOI2009]迷路
- Javascript DOM操作实例
- 2431: [HAOI2009]逆序对数列
- JavaScript实例---表格隔行变色以及移入鼠标高亮
- 1022: [SHOI2008]小约翰的游戏John
- Javascript数组
- 1588: [HNOI2002]营业额统计
- [git]撤销的相关命令:reset、revert、checkout
- Thrift教程初级篇——thrift安装环境变量配置第一个实例
- 1083: [SCOI2005]繁忙的都市
- 1015: [JSOI2008]星球大战starwar
- Tyvj P1813 [JSOI2008]海战训练
- 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 数组属性和方法
- 图像处理笔记(5)---- OpenCV 用滑动条做调色板
- 牛X | 一款比传统数据库快100-1000倍的数据库,认识一下
- SpringBoot统一参数校验
- SpringBoot多邮件源发送邮件
- 一个基础的SpringBoot项目该包含哪些
- leetcode树之平衡二叉树
- 3分钟短文:说说Laravel页面会话之间的数据保存Session用法
- Skywalking Php注册不上问题排查
- 第4章代码-图形几何变换
- 第5章代码-三维观察
- 我的2020 九月iOS面试秘籍,为你的跳槽保驾护航
- SAP Spartacus layout设计原理
- Angular依赖注入的一个例子和注入原理单步调试
- Angular依赖注入的一个常见错误NullInjectorError,No provider for XXX
- Redis系列(十二)scan Info Object等特殊命令集合