缩略图

HTML5 原生API input file 来实现多图上传,并大图预览

喜你入骨 提交于 2020-01-28 04:28:53
闲来无事,突然想用原生来实现图片的多图上传。 一、效果图大致如下: 1、上传时可以选择多图 2、上传之后缩略图下过图如下: 3、点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应的大图。效果如下: 4、点击删除,弹出是否要删除的弹框,点击确定后,删除。效果图如下: 二、要求 1、限制图片的张数(4张) 2、限制单个图片的大小(1M) 3、支持拖拽上传 4、上传后显示小图预览 5、点击小图进行大图预览 6、实现agax上传 三、所需插件 1、由于时间原因,页面布局依赖于bootstrap 2、滚动插件用的 swiper.js 3、弹框差价 layer 四、页面布局 4-1、缩略效果图如下: 4-2、缩略图的HTML代码如下: <form action="post" class="vaildform fmreset" enctype="multipartform-data"> <div class="form-group clearfix"> <label class="col-lg-2 col-md-2 col-sm-2 control-label" for="userName">图册</label> <div class="col-lg-10 col-md-10 col-sm-10 clearfix"> <!-- 图片展示 --> <div class=

生成jpg的缩略图并添加水印

时间秒杀一切 提交于 2020-01-26 18:43:49
改进版本v1. 1 。解决了生成较大缩略图时质量下降问题。现在的版本正确的叫法应改是缩放图了。哈哈 using System; using System.Drawing; using System.Drawing.Imaging; namespace Onest.Cyclone.Business.util { /// <summary> /// 缩略图 /// </summary> public class Miniature { private Miniature() { } public static void Convert(System.IO.Stream src, string newImagePath, int Width, int Height, string Copyright) { System.Drawing.Image oldimage = Image.FromStream(src, true , true ); int width ; // 缩略图的宽度 int height ; // 缩略图的高度 if (oldimage.Width > oldimage.Height ) // 横向,颠倒一下尺寸设置 { width = Height; // 缩略图的宽度 height = Width ; // 缩略图的高度 } else // 纵向 { //

多文件无刷新上传(一)

和自甴很熟 提交于 2020-01-24 23:53:53
本代码实现图片文件上传并生成缩略图以及文件安全效验等。 多文件上传效果只兼容 IE10、firefox、chrome 等浏览器,其他浏览器只能单文件上传。 事件: 开发代码中一般使用传统的FileUpload控件进行单个文件上传,选择图片文件时又无法达到实时预览的效果,而且无法实施对多件文件一次性上传。 实现图片预览在第二篇中详细描述,请关注。 代码架构图: --- AjaxUploadFileContral ---- cs ----ajax.aspx //ajax页面 ----Encryption.cs //加解密操作基类 ----JSONHelper.cs //json操作基类 ----Result.cs //保存对象类 ----UploadFileClass.cs //文件上传操作基类 ---- css ----css.css ---- img //资源图片 ---- js ----jquery-1.4.2.min.js ----uploadfile.js //文件上传js类 --- temp //图片临时文件夹 --- ajaxUF.ascx //文件上传控件 --- UploadFile.aspx //文件接收页面 ---- Image //站点图片文件夹 ---- Default.aspx //主页面,测试 ---- Web.config 初步效果图(火狐下):

Unity 视频缩略图获取

↘锁芯ラ 提交于 2020-01-20 08:25:44
IEnumerator GetVideoThumb(string urlpath,int index) { print(index); Transform go= Instantiate(VideoPlayerPrefab); VideoPlayer tmpVp= go.gameObject.AddComponent<VideoPlayer>(); go.gameObject.AddComponent<IndexNumber>(); go.GetComponent<IndexNumber>().index = index; tmpVp.source = VideoSource.Url; tmpVp.url = urlpath; tmpVp.sendFrameReadyEvents = true; //绑定的事件会不断调用 tmpVp.frameReady += OnNewFrame; tmpVp.Play(); yield return null; //while (tmpVp.texture == null|| tmpVp.isPlaying==false) //{ // yield return new WaitForSeconds(1.5f); //} //Texture2D videoFrameTexture = new Texture2D(Screen.width,

爬天极网美女图片缩略图:

∥☆過路亽.° 提交于 2020-01-18 01:32:19
import os#导入发送请求模块:import requests#导入解析文本模块:from bs4 import BeautifulSoup#返回上一级目录:base_path = os.path.dirname(os.path.abspath(__file__))#路径和图片文件夹拼接:img1_path = os.path.join(base_path,"img1")#获取响应:response = requests.get("http://pic.yesky.com/c/6_20491_1.shtml")#将请求结果交给bs4解析:soup = BeautifulSoup(response.text,"html.parser")#经过分析定位到<div class="lb_box">:div_obj = soup.find(name="div",attrs={"class":"lb_box"})#从div中找所有的dl标签(每一张图片的外部标点)、结果是列表list_dd = div_obj.find_all(name = "dd")#循环每一张图片的dl:for dd in list_dd: #从dd中找到a: a_obj = dd.find("a") #拼接文件夹的路径并创建文件夹: dir_path = os.path.join(img1_path,a_obj

win10任务栏任务不显示缩略图

巧了我就是萌 提交于 2020-01-18 01:11:35
win10界面,把鼠标移上去,会把任务栏的小任务放大。 如何不把这个放大呢? 运行中输入regedit,打开注册表编辑器。 在打开的注册表编辑器窗口中定位到HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced 在右侧窗口中找到ExtendedUIHoverTime,如果没有的话,可以手工新建一个DWORD(32位)值, 打开ExtendedUIHoverTime,在打开的编辑窗口中把其数值数据设置为9000 接着定位到HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Taskband 在右侧窗口中找到NumThumbnails,如果没有的话也要手工新建一个Dword(32位)值,把其命名为NumThumbnails, 双击NumThumbnails后,在打开的编辑窗口中把其数值数据设置为0,点击确定按钮保存。 之后重启电脑即可 点击之后就没有缩略图了 来源: CSDN 作者: 滚雪球~ 链接: https://blog.csdn.net/qq_21237549/article/details/104021982

视频帧数缩略图

与世无争的帅哥 提交于 2020-01-14 11:38:58
  七牛云-开源的播放器 sdk   一。项目中安装 https://sdk-release.qnsdk.com/qiniu-web-player-1.2.3.js <script charset="utf-8" type="text/javascript" src="https://sdk-release.qnsdk.com/qiniu-web-player-1.2.3.js"></script>引到项目中即可  二。展示demo   html 部分 <div id="player" style="width: 640px; height: 480px;"> </div>   javescript 部分 window.onload = function () { loadPlay() } function loadPlay() {     const url = "http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4" player = new QPlayer({ url: url, container: document.getElementById("player"), }) player.on("ready", handleReady); } 此时可以展示出基础画面   三。增加进度条上的视频帧缩略图

jpeg图片格式详解

两盒软妹~` 提交于 2020-01-12 02:42:23
———————————————— 版权声明:本文为CSDN博主「yun_hen」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/yun_hen/article/details/78135122 peg图片格式详解 1. JPEG文件简介 JPEG的全称是JointPhotographicExpertsGroup(联合图像专家小组),它是一种常用的图像存储格式, jpg/jpeg是24位的图像文件格式,也是一种高效率的压缩格式,文件格式是JPEG(联合图像专家组)标准的产物,该标准由ISO与CCI TT(国际电报电话咨询委员会)共同制定,是面向连续色调静止图像的一种压缩标准。其最初目的是使用64Kbps的通信线路传输720×576 分辨率压缩后的图像。通过损失极少的分辨率,可以将图像所需存储量减少至原大小的10%。由于其高效的压缩效率和标准化要求,目前已广泛用于彩色传真、静止图像、电话会议、印刷及新闻图片的传送上。但那些被删除的资料无法在解压时还原,所以* .jpg/.jpeg文件并不适合放大观看,输出成印刷品时品质也会受到影响。不过,普通用户不必担心,因为.jpg/.jpeg的压缩算法十分先进,它对图形图像的损失影响不是很大,一幅1 6 M(24位)的.jpg/

创建缩略图

情到浓时终转凉″ 提交于 2020-01-11 00:53:44
string file = files[i]; Image img = Image.FromFile(file); int width = img.Width; int height = img.Height; if (width > height) { width = 800 ; height = width * img.Height / img.Width; } else { height = 800 ; width = height * img.Width / img.Height; } Bitmap bt = new Bitmap(width, height); Graphics g = Graphics.FromImage(bt); g.DrawImage(img, 0 , 0 , width, height); // g.Save( // Image small = img.GetThumbnailImage(width, height, null, IntPtr.Zero); bt.Save( string .Format( " {0}m{1}.jpg " , topath, i.ToString( " 0000 " )), ImageFormat.Jpeg); 来源: https://www.cnblogs.com/gateluck/archive/2011/07

PHP学习创建水印,缩略图

随声附和 提交于 2020-01-10 10:53:23
今天网上学习了一段PHP创建缩略图还有打水印的代码,如下: 其中将图片的路径作为参数传给函数,打水印的过程就是首先获取图片和logo的参数信息,然后将logo图片拷贝到原图的某个位置,然后保存,水印打入完毕。 创建缩略图就是将缩放比例传入函数,然后调整元图片的宽度和高度,进行保存。 感觉这段代码当中比较巧妙地就是用到了图片的路径保存还有就是这个大量运用到PHP提供的图片处理函数,这点是非常重要的,没见过的函数要多查查手册,大体就能理解功能了 。 图片处理类: <?php class Image_process{ public $source;//原图 public $source_width;//宽 public $source_height;//高 public $source_type_id;//原图的类型 public $orign_name;//文件名 public $orign_dirname;//路径名 public function __construct($source){ //传入图片路径作为参数 $this->typeList = array(1=>'gif',2=>'jpg',3=>'png'); $ginfo = getimagesize($source); //获取图片的参数 $this->source_width = $ginfo[0]; $this-