溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

網(wǎng)頁簡單上傳圖片   imgareaselect插件

發(fā)布時間：2020-07-27 19:33:20 來源：網(wǎng)絡(luò) 閱讀：406 作者：曦羽 欄目：建站服務(wù)器

參考網(wǎng)址

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" >

　　<img id="photo" src="./p_w_picpaths/b.jpg" />

</div>


<div id="preview" >

　　<img src="./p_w_picpaths/b.jpg" />

</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>


向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手