html5自动生成图片,HTML5拖放API如何实现自动生成相框功能 HTML5拖放API实现自动生成相框功能代码...
HTML5拖放API如何实现自动生成相框功能?下面小编给大家分享一下HTML5拖放API实现自动生成相框功能代码,代码很详细,小编觉得挺不错的,有需要的小伙伴们可以来看看。
实现功能: 将桌面图片拖入指定地方,生成相框和相关信息。
相框需要自己配置,设置为背景,在CSS中设置。
效果如图:
html部分:
H5拖放API之图片相框效果
>
请将图片拖放至此处
CSS部分:
* {
margin: 0px;
padding: 0px;
}
.box2 hr {
border: 3px solid blueviolet;
}
.box {
width: 240px;
height: 150px;
border: 1px dotted red;
text-align: center;
margin: 20px auto;
line-height: 150px;
}
.box2 {
margin: 20px auto;
width: 240px;
padding: 30px;
border: 3px solid pink ;
font-size: 13px;
}
.photoFrame {
border-top: 15px solid #90EE90;
border-bottom: 15px solid #90EE90;
border-left: 15px solid #48D1CC;
border-right: 15px solid #20B2AA;
border-style: inset;
width: 200px;
height: 200px;
background: url(../imgs/ptoto.jpg);
margin: 10px auto;
position: relative;
overflow: hidden;
}
img {
position: absolute;
width: 154px;
height: 141px;
left: 25px;
top: 30px;
right: 30px;
bottom: 30px;
}
li {
list-style-type: none;
}
JS部分
window.onload = function() {
var box2 = document.querySelector(".box2");
var box = document.querySelector(".box");
var count = 0;
function photoFrame() {
var d1 = document.createElement("div");
d1.className = "photoFrame";
d1.style.marginTop = "30px";
d1.style.marginLeft = "5px";
var img = document.createElement("img");
img.src = "";
count++;
img.id = 'img' + parseInt(count);
d1.appendChild(img);
return d1;
}
box.ondragover = function(ev) {
ev.preventDefault();
}
box.ondrop = function(ev) {
ev.preventDefault();
var files = ev.dataTransfer.files;
//获取当前文件的最新修改日期
var lastModified = files[0].lastModifiedDate;
//修改当前文件的最新修改日期的描述格式
var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString() : 'n/a';
//设置图片下方状态信息栏描述内容
var fileStatus = "
1.名称:" + files[0].name + "
2.类型:" + files[0].type + "
3.大小:" +
files[0].size + "字节" + "
4.修改时间:" + lastModifiedStr + "" + "";
box2.appendChild(photoFrame());
box2.innerHTML = box2.innerHTML + fileStatus;
//设置图片路径
function setPath() {
var fd = new FileReader();
if(files[0].type.indexOf('image') != 1) {
fd.readAsDataURL(files[0]);
count++;
var id = "img" + parseInt(count - 1);
var img = document.getElementById(id);
fd.onload = function() {
var img = document.getElementById(id);
img.src = this.result;
}
}
}
setPath();
}
}
html5自动生成图片,HTML5拖放API如何实现自动生成相框功能 HTML5拖放API实现自动生成相框功能代码...相关推荐
- HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
- html自动生成在线试题,HTML5测试题整理Ⅰ
1.在 HTML5 中,哪个元素用于组合标题元素? 答案: 2.HTML5 中不再支持哪个元素? 答案:,,,,, ,,,,,, 3.在 HTML5 中,onblur 和 onfocus 是? 答案: ...
- 【Day05】Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5?
Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5? 一.Html5 新特性 1. 拖拽释放(Drag and drop)API 2. 语义化更 ...
- 用html5做一个介绍自己家乡的页面_厚溥资讯 | HTML5的小知识点小集合(上)
1.Doctype作用?标准模式与兼容模式各有什么区别? (1)声明位于位于HTML文档中的第一行,处于标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文 ...
- html5 websocket与c,打通B/S与C/S !让HTML5 WebSocket与.NET Socket公用同一个服务端!
随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...
- 调用智能Ai画图在线生成图片生成视频的工具集API说明等
四款文字生成视频的智能软件 1. Lumen5:是一种自动化视频制作工具,可以利用其强大的AI技术,自动对文本进行分析,并提供适当的图像.视频剪辑和音乐,生成令人印象深刻的视频.它适用于制作社交媒体广 ...
- echarts自动生成图片的解决方案
echarts自动生成图片的解决方案 参考文章: (1)echarts自动生成图片的解决方案 (2)https://www.cnblogs.com/dubbo/p/11416705.html 备忘一下 ...
- 使用Signature Tool自动生成P/Invoke调用Windows API的C#函数声明
使用Signature Tool自动生成P/Invoke调用Windows API的C#函数声明 分类: 小技巧 Win32编程 C++ 解决难题 .NET2009-02-05 20:53 5186人 ...
- html5语言基础教程,HTML5基础教程,从入门到精通,零基础学HTML5
随着互联网的快速发展,对前端开发方面的人才需求越来越大,其中Web前端领域的HTML5也受到许多人追捧 HTML5是构建Web内容的一种语言描述方式.HTML5是互联网的下一代标准,是构建以及呈现互联 ...
- html5 2015,2015年有用的16大免费的响应式HTML5框架
Twitter Bootstrap Bootstrap是全世界最流行的html5框架之一.Twitter Bootstrap是光滑的.直观和强大的前端web开发框架,令开发更加快捷.容易.它拥有用于开 ...
最新文章
- r语言绘制精美pcoa图_如何绘制精美的PCoA图形?
- java mysql failover_MySQL MMM 双主在Failover时挂起
- 苹果设置网易邮箱收件服务器,如何在iPhone 3/4、iPod touch的邮件应用程序中使用IMAP服务...
- makefile与make
- HTML基础(part6)--常用标签之列表
- 【案例】无线串口模块 星型网络组网 案例
- mysql执行存储过程提示out of_PHP执行MYSQL存储过程报错:Commands out of sync; you can't run...
- 《Hadoop权威指南》阅读笔记(1)
- 时间序列分析(一) 如何判断序列是否平稳
- 图解机器学习算法 | 从入门到精通系列教程(机器学习通关指南·完结)
- APEX 文件格式学习记录
- 想要Linux上云?如何实现Linux工作流上云部署
- outlook客户端怎么看html,谷歌浏览器根据html网页启动邮件客户端Outlook(示例代码)...
- python 文件批量改名
- photoshop中如何在6寸相纸上打印1寸照片10张2X5模式(自动填充模式)
- iOS锁屏界面音频播放控制
- 灵魂书籍 | 《记忆力心理学 | 赫尔曼·艾宾浩斯》
- GUI 图形用户界面编程(七)-女友生气,你是选择亚索还是女友?
- U3D_Shader编程(第二篇:基础夯实篇)
- 实现童年宝可梦,教你用Python画一只属于自己的皮卡丘
热门文章
- php中 s=,PHP错误表中的所有值=’s’
- influxdb java api使用_java使用influxDB数据库的详细源码
- 蓝桥杯 卡片换位(bfs)
- MySQL 日期时间相关函数
- android左右滑动开关,Android点击左右按钮实现左右滑动页面切换
- 面向对象程序设计c 语言描述 答案,c面向对象程序设计习题解答全.doc
- 最新QQ邮箱滑块JS逆向教程
- 自动化测试工具selenium 之Selenium-IDE
- python try else多余的设计_在python中利用try..except来代替if..else的用法
- 太大如何翻页固定表头_外行学 Python 爬虫 第六篇 动态翻页