Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > 如何实现从照片中裁切自已的肖像呢？_javascript技巧

如何实现从照片中裁切自已的肖像呢？_javascript技巧

WBOY

Freigeben： 2016-05-16 19:18:19

Original

1018 Leute haben es durchsucht

在会员注册时，让会员输入头像对后续的功能很重要。很难指望普通人具备photoshop的操作能力，让他们提供合乎尺寸的个人照片不太现实。还好现在可以让服务端支持图片处理，我们只需要在客户端提供用户设计图片的接口就可以了。

下面的程序实现了裁切缩放部分图片的功能。从技术上来看，主要是怎么让半透明的摭罩中空，为了实现这一点，我使用了3*3的表格来模拟座标上的矩形，通过指定左上单元格的宽高来设置矩形的座标，而中心单元格的宽高则与矩形的尺寸相对应。

<style> 
#tbHole td{background:white;filter:alpha(opacity=50);-moz-opacity:.5} 
#tbHole img{width:1;height:1;visibility:hidden} 
v\:*{behavior:url(#default#vml)} 
</style> 
<div id="bxHole" onselectstart="return(false)" ondragstart="return(false)" onmousedown="return(false)" oncontextmenu="return(false)" style="position:absolute;left:0;top:0;width:800;height:600;border:1px solid #808080;background:url(http://album.sina.com.cn/pic/40db9aaa02000eh1)"> 
    <table id="tbHole" cellpadding="0" cellspacing="0" width="100%" height="100%" style="position:absolute"> 
        <tr height="158">
<td width="243"><img  alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" ></td>
<td width="120"><img  alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" ></td>
<td><img  alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" ></td>
</tr> 
        <tr height="140"> 
            <td><img  alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" ></td> 
            <td onmousedown="$('bxHole').dragStart(event,0)" style="background:transparent;filter:;-moz-opacity:1;cursor:move;border:1px solid white !important"><img  alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" ></td> 
            <td><img  alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" ></td> 
        </tr> 
        <tr>
<td><img  alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" ></td>
<td><img  alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" ></td>
<td><img  alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" ></td>
</tr> 
    </table> 
    <img  id="bxHoleMove1" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,1)"   style="max-width:90%" alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" > 
    <img  id="bxHoleMove2" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,2)"   style="max-width:90%" alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" > 
    <img  id="bxHoleMove3" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,3)"   style="max-width:90%" alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" > 
    <img  id="bxHoleMove4" src="http://www.5djs.com/images/upload/41.gif" onmousedown="$('bxHole').dragStart(event,4)"   style="max-width:90%" alt="如何实现从照片中裁切自已的肖像呢？_javascript技巧" > 
</div> 
<div id="bxImgHoleShow" style="position:absolute;left:850;top:50;width:120;height:140;border:1px solid #808080;overflow:hidden"></div> 
 
 
<script> 
function $(obj){ 
    return typeof(obj)=="object"?"obj":document.getElementById(obj) 
} 
bxHole_ini() 
function bxHole_ini(){ 
    var bx=$("bxHole"),tb=$("tbHole") 
    $("bxImgHoleShow").innerHTML="<"+(document.all?"v:image":"img")+" id=imgHoleShow src='http://album.sina.com.cn/pic/40db9aaa02000eh1' style='position:absolute;left:0;top:0;width:800;height:600' />" 
    bx.w0=tb.rows[0].cells[1].offsetWidth 
    bx.h0=tb.rows[1].offsetHeight 
    bx.w_img=$("imgHoleShow").offsetWidth 
    bx.h_img=$("imgHoleShow").offsetHeight 
    bx.dragStart=function(e,dragType){ 
        bx.dragType=dragType 
        bx.px=tb.rows[0].cells[0].offsetWidth 
        bx.py=tb.rows[0].offsetHeight 
        bx.pw=tb.rows[0].cells[1].offsetWidth 
        bx.ph=tb.rows[1].offsetHeight 
        bx.sx=e.screenX 
        bx.sy=e.screenY 
    } 
    bx.onmouseup=function(){ 
        if(bx.dragType==null) 
            return 
        var w=tb.rows[0].cells[1].offsetWidth,h=tb.rows[1].offsetHeight 
        bx.dragType=null 
        if(w/h>bx.w0/bx.h0) 
            tb.rows[0].cells[1].style.width=h*bx.w0/bx.h0 
        else 
            tb.rows[1].style.height=w*bx.h0/bx.w0 
        bx.setTip() 
    } 
    bx.onmousemove=function(e){ 
        var x,y,w,h 
        if(bx.dragType==null) 
            return 
        if(e==null) 
            e=event 
        x=Math.max(bx.px+e.screenX-bx.sx,1) 
        y=Math.max(bx.py+e.screenY-bx.sy,1) 
        w=Math.min(bx.pw+e.screenX-bx.sx,tb.offsetWidth-bx.px-1) 
        h=Math.min(bx.ph+e.screenY-bx.sy,tb.offsetHeight-bx.py-1) 
        if(bx.dragType==0){ 
            x=Math.min(x,tb.offsetWidth-bx.pw-1) 
            y=Math.min(y,tb.offsetHeight-bx.ph-1) 
            w=bx.pw 
            h=bx.ph 
        } 
        if(bx.dragType==1||bx.dragType==4) 
            w=bx.pw+bx.px-x 
        if(bx.dragType==1||bx.dragType==2) 
            h=bx.ph+bx.py-y 
        if(bx.dragType==2||bx.dragType==3) 
            x=bx.px 
        if(bx.dragType==3||bx.dragType==4) 
            y=bx.py 
        w=Math.max(w,bx.w0/2) 
        h=Math.max(h,bx.h0/2) 
        if(bx.dragType==1||bx.dragType==4) 
            x=bx.pw+bx.px-w 
        if(bx.dragType==1||bx.dragType==2) 
            y=bx.ph+bx.py-h 
        tb.rows[0].cells[0].style.width=x 
        tb.rows[0].cells[1].style.width=w 
        tb.rows[0].style.height=y 
        tb.rows[1].style.height=h 
        $("bxHole").setTip() 
    } 
    bx.setTip=function(){ 
        var x=tb.rows[0].cells[0].offsetWidth,y=tb.rows[0].offsetHeight,w=tb.rows[0].cells[1].offsetWidth,h=tb.rows[1].offsetHeight 
        var img=$("imgHoleShow"),per 
        $("bxHoleMove1").style.left=$("bxHoleMove4").style.left=x-3 
        $("bxHoleMove1").style.top=$("bxHoleMove2").style.top=y-3 
        $("bxHoleMove2").style.left=$("bxHoleMove3").style.left=x+w-4 
        $("bxHoleMove3").style.top=$("bxHoleMove4").style.top=y+h-4

if(w/h>bx.w0/bx.h0) 
            w=h*bx.w0/bx.h0 
        else 
            h=w*bx.h0/bx.w0 
        per=bx.h0/h 
        img.style.width=per*bx.w_img 
        img.style.height=per*bx.h_img 
        img.style.left=-x*per 
        img.style.top=-y*per 
    } 
    bx.setTip() 
} 
</script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Verwandte Etiketten：

如何实现从照片中裁切自已的肖像呢？

Quelle：php.cn

Vorheriger Artikel：求解开jscript.encode代码的asp函数_典型特效 Nächster Artikel：一个支持ff的modaldialog的js代码_javascript技巧

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

0

3

2061

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

0

11

2222

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

0

1

1872

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...

Aus 2024-04-18 23:52:34

0

1

1753

Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen

Aus 2024-04-16 10:10:18

0

0

1780

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage