微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > web前端 > js教程 > 正文

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

php中文网

发布： 2016-05-16 19:18:19

原创

1172人浏览过

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

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

Kits AI

Kits AI

Kits.ai 是一个为音乐家提供一站式AI音乐创作解决方案的网站，提供AI语音生成和免费AI语音训练

Kits AI

413

Kits AI

<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需刷新才能执行]

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

来源：php中文网

上一篇：求解开jscript.encode代码的asp函数_典型特效下一篇：一个支持ff的modaldialog的js代码_javascript技巧

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

JavaScript_地理位置服务与地图集成首先通过JavaScript的GeolocationAPI获取用户授权后的经纬度，再结合高德地图等SDK在页面中初始化地图并标记位置；需处理权限拒绝、定位超时等异常，建议通过按钮触发定位请求，并在HTTPS环境下部署以保障安全性和兼容性。

2025-11-19 14:27:27

914

事件委托_JS事件处理优化事件委托通过事件冒泡将监听器绑定到父元素，统一处理子元素事件。例如为ul绑定click事件，通过判断e.target.nodeName===‘LI’来捕获li点击，减少重复绑定，节省内存，提升性能，支持动态添加元素，适用于列表、表格等大量子元素场景，但需注意非冒泡事件如focus需用focusin替代，并谨慎使用stopPropagation。

2025-11-19 14:23:02

567

JavaScript响应式编程_Observable数据流处理响应式编程通过Observable实现对异步数据流的优雅处理，Observable作为可观察的数据流，支持多值推送、惰性执行与链式操作符，借助RxJS可在JavaScript中实现如防抖搜索、事件合并等复杂逻辑，广泛应用于Angular等框架中。

2025-11-19 13:59:02

357

JavaScriptCanvas编程_2D图形与动画性能优化答案：通过减少重绘区域、使用分层Canvas和缓存图形，结合requestAnimationFrame统一动画循环并控制帧率，批量绘制同类图形、避免昂贵特效、使用整数坐标，并通过对象池管理内存，可显著提升Canvas动画性能。

2025-11-19 13:47:02

548

JavaScript框架比较_React与Vue设计哲学差异 React强调灵活架构与JSX的显式控制，适合定制化开发；Vue提供渐进式框架与模板语法，内置路由和状态管理，更易上手。

2025-11-19 13:46:02

228

静态类型：Flow与TypeScript生态对比 TypeScript凭借其成熟的生态、广泛的工具支持和活跃的社区，已成为静态类型化JavaScript的事实标准，相比之下Flow生态局限、工具链支持弱，仅在特定场景适用。

2025-11-19 13:38:38

377

js函数定义的三种方式函数定义有三种方式：1.函数声明具有提升特性，可在声明前调用；2.函数表达式赋值给变量，常用于回调，不具完全提升；3.箭头函数语法简洁，无自身this，适合回调但不可作为构造函数。

2025-11-19 13:12:06

584

React组件条件类型Props：深度解析与实践本文深入探讨了如何在React组件中定义基于条件依赖的Props类型，即一个Prop的类型根据另一个Prop的值动态变化。文章首先阐述了如何利用TypeScript的const断言和satisfies操作符精确地定义常量主题对象，避免类型拓宽。随后，详细介绍了两种核心策略：通过泛型和索引访问类型实现条件Props，以及通过映射类型构建联合类型来表达所有可能的Props组合，并提供了详细的代码示例和选择建议。

2025-11-19 13:09:07

968

JavaScript实现Indeed API分页数据高效获取教程本教程详细阐述了如何使用JavaScript高效地从Indeed搜索API等分页接口获取所有可用数据。文章将介绍理解分页机制、利用async/await实现循环请求的核心逻辑，并提供一个健壮的代码示例，以迭代更新查询参数（如start和limit），聚合数据，直至所有结果被成功检索。同时，教程还将涵盖实际应用中的注意事项，如API响应解析、速率限制和错误处理。

2025-11-19 13:04:02

475

函数式编程_JS高阶函数应用高阶函数是能接收或返回函数的函数，如map、filter、reduce，用于数据转换、筛选和累积计算，提升代码复用性与可读性。

2025-11-19 12:34:02

999

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部