网页简单上传图片 imgareaselect插件
參考網址
http://www.cnblogs.com/cjqa/p/4386489.html
????
http://blog.csdn.net/china_lzn/article/details/7553552（未測試）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css"/>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.min.js"></script>
</head>
<body>
<div class="frame" style="width: 500px; height: 467px;float:left;border:1px solid #dcdcdc;">
<img id="photo" src="./images/b.jpg" style="max-width:100%;max-height:100%;" />
</div>
<div id="preview" style="width: 250px; height: 200px; overflow: hidden;border:1px solid #dcdcdc;">
<img src="./images/b.jpg" style="width: 250px; height: 200px;" />
</div>
</body>
<script type="text/javascript">
function preview(img, selection) {
? ? ? ?if (!selection.width || !selection.height) { return; }
? ? ? ?var scaleX = 250 / selection.width;
? ? ? ?var scaleY = 200 / selection.height;
? ? ? ?var hei = $('#photo').height();
? ? ? ?var wid = $('#photo').width();
? ? ? ?$('#preview img').css({
? ? ? ? ? ?width: Math.round(scaleX * wid),
? ? ? ? ? ?height: Math.round(scaleY * hei),
? ? ? ? ? ?marginLeft: -Math.round(scaleX * selection.x1),
? ? ? ? ? ?marginTop: -Math.round(scaleY * selection.y1)
? ? ? ?});
? ?}
? ?$(function () {
? ? ? ?$('#photo').imgAreaSelect({
? ? ? ? ? ?//aspectRatio: '1:1',?
? ? ? ? ? ?handles: true,
? ? ? ? ? ?fadeSpeed: 200, onSelectChange: preview
? ? ? ?});
? ?});
</script>
</html>
本文轉自 曦羽 ?51CTO博客，原文鏈接:http://blog.51cto.com/exist/1959681
總結
以上是生活随笔為你收集整理的网页简单上传图片 imgareaselect插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信公众平台实现授权登录（不是微信开放平
- 下一篇： TCP源端口选择算法与列维模型