JS实现图片预览与等比缩放
案例仅为图片预览功能,省略图片上传步骤,框架为easyui。
HTML代码:
@*text-align:center;水平居中
vertical-align: middle;display: table-cell;垂直居中*@
<div id="img-dialog" style="text-align:center;vertical-align: middle;display: table-cell;padding:5px;">
<img id="showImg" />
</div> <a href="javascript:void(0)" id="btnShow" onclick="showImga()"></a>
JS代码:
//图片预览
function showImga() {
//显示图片
$("#showImg").attr("src", "../UploadFile/Images/图片.png");
var img = new Image();
img.src = $('#showImg').attr("src");
var w = img.width; //获取图片实际宽度
var h = img.height;
var objImg = $("#showImg")[0];
var maxWidth = 500;
var maxHeight = 500;
autoResizable(w, h, maxWidth, maxHeight, objImg); $('#img-dialog').dialog({
title: '图片预览',
width: maxWidth,
height: maxHeight,
resizable: true, //设置窗体大小可拖动
onResize: function (width, height) { //窗体大小发生改变时触发
//这里为了显示完整图片,需减去easyui本身弹框dialog边框所占高度
autoResizable(w, h, width - 25, height - 35, objImg);
}
});
} //自动调整图片大小
//参数:图片宽度,图片高度,窗体宽度,窗体高度,图片对象
function autoResizable(w, h, maxWidth, maxHeight, objImg) {
var hRatio;
var wRatio;
var Ratio = 1;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (maxWidth == 0 && maxHeight == 0) {
Ratio = 1;
} else if (maxWidth == 0) {
if (hRatio < 1) Ratio = hRatio;
} else if (maxHeight == 0) {
if (wRatio < 1) Ratio = wRatio;
} else if (wRatio < 1 || hRatio < 1) {
Ratio = (wRatio <= hRatio ? wRatio : hRatio);
}
if (Ratio < 1) {
w = w * Ratio;
h = h * Ratio;
} objImg.style.height = Math.round(h) + "px";
objImg.style.width = Math.round(w) + "px";
}
最终效果图:
JS实现图片预览与等比缩放的更多相关文章
- 纯JS实现图片预览与等比例缩放和居中
最近做项目时有一个需求,广告位图片上传时要预览,并且要等比例缩放和居中.已经保存的广告位图片显示时也要等比例缩放和居中.我使用了下面的代码实现,不过可能有一些小问题. <!DOCTYPE HTM ...
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...
- js本地图片预览代码兼容所有浏览器
html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...
- js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
- 浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
- js实现图片预览
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Jquery OR Js 实现图片预览
Jquery方法一: <!DOCTYPE html> <html> <head> <title></title> <s ...
随机推荐
- 云课堂Android模块化实战--如何设计一个通用性的模块
本文来自 网易云社区 . 如何设计一个通用性的模块 前言 每个开发者都会知道,随着项目的开发,会发现业务在不断壮大,产品线越来越丰富,而留给开发的时间却一直有限,在有限的时间,尽快完成某个功能的迭代. ...
- [HNOI2004]宠物收养所
题目链接:戳我 其实也就是一个splay而已了. 但是一定要注意这种需要计算的,刚开始insert的时候插入极大值极小值的时候不要让它爆掉int.......(比如我刚开始就写了一个214748364 ...
- random 随机生成字符串
# import random# for x in range(10):# i = 0# l = []# while i < 10:# ret = chr(random.randint(33, ...
- linux 安装python3.7 报错No module named '_ctypes'
ModuleNotFoundError: No module named '_ctypes' 操作系统:centos yum install libffi-devel ./configure --en ...
- OCP换题库了,052新加的考题及答案整理-第16题
16.Your database Is configured In archivelog mode. The USERS01 tablespace Is currently online. You a ...
- 5,临界区 之 lock
前提背景:多个并发线程共享同一个资源时,为防止这些共享资源可能出现的错误或数据不一致问题,提出了临界区的概念 临界区: 指一个用以访问共享资源的代码块,这个代码块在同一时间内只能允许一个线程访问 实现 ...
- H5新手教程,小白来看看。
H5教程(一) 相信点进来看这篇文章的应该都是刚刚接触H5的新手,那么你真的是找到了一篇合适的文章. 1.学习前准备 既然想学习好H5,只是这样看是不够的,还需要动手练习,以及及时复习,所以我推荐几款 ...
- HTML5 简单Demo1
----------------------------页面效果图------------------------------ 截图1: 截图2: -------------------------- ...
- 「美团 CodeM 复赛」城市网络
题目链接 题意分析 首先 \([u,v]\)在树上是一条深度递增的链 那么我们可以使用倍增找 \(x\)的祖先当中深度最大的值大于\(x\)的点 然后维护一个\(pre\) 重新建树 这样从\(x\) ...
- 吴裕雄 python 机器学习——聚类
import numpy as np import matplotlib.pyplot as plt from sklearn.datasets.samples_generator import ma ...