怎么在人物照片上 添加一个动物头像遮住原来人物头像

peitali 2014-12-01 03:29:12
涉及到肖像权的问题，要让用户上传自己照片的时候， 在自己的面部 选择一个动物头像 遮住自己 ，然后合成一张图片， 效果就像APP animal face 那种，
请问怎么实现，求思路，有demo 最好 js html5 都可以，小弟感激不尽
...全文
4557 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
peitali 2014-12-08
  • 打赏
  • 举报
 回复
引用 2 楼 liuxingfffff 的回复:
写了个大概的demo。细节 你自己调试吧 思路：背景使用人物图片，头像是动物图片，动物图片是可以拖动的。 这部分功能用js+css来实现的。 上传给后台的数据是2张图片 还有动物头像图片相对于人物图片垂直距离 和 水平距离。 再把这2张图片 合成一张图片。 

<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
	<div style="display:inline-block;position:relative;">
		<img src="img.jpg" border="0"><div id="view" style="position:absolute;left:0;top:0;display:inline-block;"><img src="2.jpg" border="0" ></div></div>
	<form action="data.ashx" method="post" enctype="multipart/form-data" target="_blank">
        <input type="hidden" name="t" id="t" />
        <input type="hidden" name="l" id="l" />
        <input type="submit" value="提交" id="btnSubmit" />
    </form>
    <script>
        (function () {
            var t = document.getElementById("t");
            var l = document.getElementById("l");
            var head = document.getElementById("view");
            var img_width = 0;
            var img_height = 0;
            var position_x = 0;
            var position_y = 0;
            var btnSubmit = document.getElementById("btnSubmit");

            btnSubmit.onclick = function () {
                t.value = head.style.top.replace("px","");
                l.value = head.style.left.replace("px","");
                return true;
            }

            var img = head.getElementsByTagName("img")[0];
            img.onload = function () {
                img_width = img.width;
                img_height = img.height;
                head.style.width = img_width + "px";
                head.style.height = img_height + "px";
                img.style.display = "none";
                head.style.background = "url(" + img.attributes["src"].nodeValue + ") no-repeat ";
                head.style.backgroundSize = "100px 75px";
            }

            head.onmousedown = function (e) {
                var old_x = e.clientX;
                var old_y = e.clientY;
                head.style.cursor = "move";
                document.onmousemove = function (e) {
                    var x = e.clientX;
                    var y = e.clientY;

                    position_x += x - old_x;
                    position_y += y - old_y;

                    head.style.left = position_x + "px";
                    head.style.top = position_y + "px";

                    old_x = x;
                    old_y = y;
                }
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    head.style.cursor = "default";
                }
            }
        })();
	</script>	
</body>
</html>


<%@ WebHandler Language="C#" Class="Data" %>
using System;
using System.Collections.Generic;
using System.Web;

public class Data : IHttpHandler
{
    public bool IsReusable
    {
        get { return false; }
    }

    protected HttpRequest Request;
    protected HttpResponse Response;
    protected HttpServerUtility Server;

    public void ProcessRequest(HttpContext context)
    {
        Request = context.Request;
        Response = context.Response;
        Server = context.Server;
        Response.ContentType = "text/plain";

        string avatorFilePath = Server.MapPath("img.jpg");
        string animalFilePath = Server.MapPath("2.jpg");

        int width = 0;
        int height = 0;
        int top = int.Parse(context.Request.Form["t"]);
        int left = int.Parse(context.Request.Form["l"]);
        
        using (System.Drawing.Image avator = System.Drawing.Image.FromFile(avatorFilePath, true))
        {
            width = avator.Width;
            height = avator.Height;
        }

        using (System.Drawing.Image pickedImage = new System.Drawing.Bitmap(width, height))
        {
            using (System.Drawing.Graphics pickedG = System.Drawing.Graphics.FromImage(pickedImage))
            {
                pickedG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                pickedG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

                //加载背景
                using (System.Drawing.Image avatorImage = System.Drawing.Image.FromFile(avatorFilePath, true))
                {
                    System.Drawing.Rectangle fromR = new System.Drawing.Rectangle(0, 0, width, height);
                    System.Drawing.Rectangle toR = new System.Drawing.Rectangle(0, 0, width, height);
                    pickedG.DrawImage(avatorImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel);
                }

                using (System.Drawing.Image animalImage = System.Drawing.Image.FromFile(animalFilePath, true))
                {
                    System.Drawing.Rectangle fromR = new System.Drawing.Rectangle(0, 0, animalImage.Width, animalImage.Height);
                    System.Drawing.Rectangle toR = new System.Drawing.Rectangle(left, top, animalImage.Width, animalImage.Height);
                    pickedG.DrawImage(animalImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel);
                }

                //关键质量控制
                //获取系统编码类型数组,包含了jpeg,bmp,png,gif,tiff
                System.Drawing.Imaging.ImageCodecInfo[] icis = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders();
                System.Drawing.Imaging.ImageCodecInfo ici = null;
                foreach (System.Drawing.Imaging.ImageCodecInfo i in icis)
                {
                    if (i.MimeType == "image/jpeg")
                    {
                        ici = i;
                    }
                }
                System.Drawing.Imaging.EncoderParameters ep = new System.Drawing.Imaging.EncoderParameters(1);
                ep.Param[0] = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, (long)90);

                //保存缩略图
                byte[] bytes;
                using (System.IO.MemoryStream ms = new System.IO.MemoryStream())
                {
                    pickedImage.Save(ms, ici, ep);

                    bytes = ms.ToArray();

                    ms.Close();
                    ms.Dispose();
                }
                Response.OutputStream.Write(bytes, 0, bytes.Length);
            }
        }
        Response.CacheControl = "no-cache";
        Response.ContentType = "image/jpeg";
    }
}
http://bbs.csdn.net/topics/390944211?page=1#post-398641348 大神，能不能帮我看下 这个问题，这个功能很着急，我搞了好久还没搞好。。不胜感激
业余草 2014-12-02
  • 打赏
  • 举报
 回复
引用 2 楼 liuxingfffff 的回复:
写了个大概的demo。细节 你自己调试吧 思路：背景使用人物图片，头像是动物图片，动物图片是可以拖动的。 这部分功能用js+css来实现的。 上传给后台的数据是2张图片 还有动物头像图片相对于人物图片垂直距离 和 水平距离。 再把这2张图片 合成一张图片。 

<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
	<div style="display:inline-block;position:relative;">
		<img src="img.jpg" border="0"><div id="view" style="position:absolute;left:0;top:0;display:inline-block;"><img src="2.jpg" border="0" ></div></div>
	<form action="data.ashx" method="post" enctype="multipart/form-data" target="_blank">
        <input type="hidden" name="t" id="t" />
        <input type="hidden" name="l" id="l" />
        <input type="submit" value="提交" id="btnSubmit" />
    </form>
    <script>
        (function () {
            var t = document.getElementById("t");
            var l = document.getElementById("l");
            var head = document.getElementById("view");
            var img_width = 0;
            var img_height = 0;
            var position_x = 0;
            var position_y = 0;
            var btnSubmit = document.getElementById("btnSubmit");

            btnSubmit.onclick = function () {
                t.value = head.style.top.replace("px","");
                l.value = head.style.left.replace("px","");
                return true;
            }

            var img = head.getElementsByTagName("img")[0];
            img.onload = function () {
                img_width = img.width;
                img_height = img.height;
                head.style.width = img_width + "px";
                head.style.height = img_height + "px";
                img.style.display = "none";
                head.style.background = "url(" + img.attributes["src"].nodeValue + ") no-repeat ";
                head.style.backgroundSize = "100px 75px";
            }

            head.onmousedown = function (e) {
                var old_x = e.clientX;
                var old_y = e.clientY;
                head.style.cursor = "move";
                document.onmousemove = function (e) {
                    var x = e.clientX;
                    var y = e.clientY;

                    position_x += x - old_x;
                    position_y += y - old_y;

                    head.style.left = position_x + "px";
                    head.style.top = position_y + "px";

                    old_x = x;
                    old_y = y;
                }
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    head.style.cursor = "default";
                }
            }
        })();
	</script>	
</body>
</html>


<%@ WebHandler Language="C#" Class="Data" %>
using System;
using System.Collections.Generic;
using System.Web;

public class Data : IHttpHandler
{
    public bool IsReusable
    {
        get { return false; }
    }

    protected HttpRequest Request;
    protected HttpResponse Response;
    protected HttpServerUtility Server;

    public void ProcessRequest(HttpContext context)
    {
        Request = context.Request;
        Response = context.Response;
        Server = context.Server;
        Response.ContentType = "text/plain";

        string avatorFilePath = Server.MapPath("img.jpg");
        string animalFilePath = Server.MapPath("2.jpg");

        int width = 0;
        int height = 0;
        int top = int.Parse(context.Request.Form["t"]);
        int left = int.Parse(context.Request.Form["l"]);
        
        using (System.Drawing.Image avator = System.Drawing.Image.FromFile(avatorFilePath, true))
        {
            width = avator.Width;
            height = avator.Height;
        }

        using (System.Drawing.Image pickedImage = new System.Drawing.Bitmap(width, height))
        {
            using (System.Drawing.Graphics pickedG = System.Drawing.Graphics.FromImage(pickedImage))
            {
                pickedG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                pickedG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

                //加载背景
                using (System.Drawing.Image avatorImage = System.Drawing.Image.FromFile(avatorFilePath, true))
                {
                    System.Drawing.Rectangle fromR = new System.Drawing.Rectangle(0, 0, width, height);
                    System.Drawing.Rectangle toR = new System.Drawing.Rectangle(0, 0, width, height);
                    pickedG.DrawImage(avatorImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel);
                }

                using (System.Drawing.Image animalImage = System.Drawing.Image.FromFile(animalFilePath, true))
                {
                    System.Drawing.Rectangle fromR = new System.Drawing.Rectangle(0, 0, animalImage.Width, animalImage.Height);
                    System.Drawing.Rectangle toR = new System.Drawing.Rectangle(left, top, animalImage.Width, animalImage.Height);
                    pickedG.DrawImage(animalImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel);
                }

                //关键质量控制
                //获取系统编码类型数组,包含了jpeg,bmp,png,gif,tiff
                System.Drawing.Imaging.ImageCodecInfo[] icis = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders();
                System.Drawing.Imaging.ImageCodecInfo ici = null;
                foreach (System.Drawing.Imaging.ImageCodecInfo i in icis)
                {
                    if (i.MimeType == "image/jpeg")
                    {
                        ici = i;
                    }
                }
                System.Drawing.Imaging.EncoderParameters ep = new System.Drawing.Imaging.EncoderParameters(1);
                ep.Param[0] = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, (long)90);

                //保存缩略图
                byte[] bytes;
                using (System.IO.MemoryStream ms = new System.IO.MemoryStream())
                {
                    pickedImage.Save(ms, ici, ep);

                    bytes = ms.ToArray();

                    ms.Close();
                    ms.Dispose();
                }
                Response.OutputStream.Write(bytes, 0, bytes.Length);
            }
        }
        Response.CacheControl = "no-cache";
        Response.ContentType = "image/jpeg";
    }
}
高手啊
peitali 2014-12-01
  • 打赏
  • 举报
 回复
大侠，太感谢了，这么快就写了个demo，我研究研究
liuxingfffff 2014-12-01
  • 打赏
  • 举报
 回复
写了个大概的demo。细节 你自己调试吧
思路：背景使用人物图片，头像是动物图片，动物图片是可以拖动的。
这部分功能用js+css来实现的。
上传给后台的数据是2张图片 还有动物头像图片相对于人物图片垂直距离 和 水平距离。
再把这2张图片 合成一张图片。




<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0;padding:0;}

</style>

</head>

<body>

	<div style="display:inline-block;position:relative;">

		<img src="img.jpg" border="0"><div id="view" style="position:absolute;left:0;top:0;display:inline-block;"><img src="2.jpg" border="0" ></div></div>

	<form action="data.ashx" method="post" enctype="multipart/form-data" target="_blank">

        <input type="hidden" name="t" id="t" />

        <input type="hidden" name="l" id="l" />

        <input type="submit" value="提交" id="btnSubmit" />

    </form>

    <script>

        (function () {

            var t = document.getElementById("t");

            var l = document.getElementById("l");

            var head = document.getElementById("view");

            var img_width = 0;

            var img_height = 0;

            var position_x = 0;

            var position_y = 0;

            var btnSubmit = document.getElementById("btnSubmit");



            btnSubmit.onclick = function () {

                t.value = head.style.top.replace("px","");

                l.value = head.style.left.replace("px","");

                return true;

            }



            var img = head.getElementsByTagName("img")[0];

            img.onload = function () {

                img_width = img.width;

                img_height = img.height;

                head.style.width = img_width + "px";

                head.style.height = img_height + "px";

                img.style.display = "none";

                head.style.background = "url(" + img.attributes["src"].nodeValue + ") no-repeat ";

                head.style.backgroundSize = "100px 75px";

            }



            head.onmousedown = function (e) {

                var old_x = e.clientX;

                var old_y = e.clientY;

                head.style.cursor = "move";

                document.onmousemove = function (e) {

                    var x = e.clientX;

                    var y = e.clientY;



                    position_x += x - old_x;

                    position_y += y - old_y;



                    head.style.left = position_x + "px";

                    head.style.top = position_y + "px";



                    old_x = x;

                    old_y = y;

                }

                document.onmouseup = function (e) {

                    document.onmousemove = null;

                    document.onmouseup = null;

                    head.style.cursor = "default";

                }

            }

        })();

	</script>	

</body>

</html>






<%@ WebHandler Language="C#" Class="Data" %>

using System;

using System.Collections.Generic;

using System.Web;



public class Data : IHttpHandler

{

    public bool IsReusable

    {

        get { return false; }

    }



    protected HttpRequest Request;

    protected HttpResponse Response;

    protected HttpServerUtility Server;



    public void ProcessRequest(HttpContext context)

    {

        Request = context.Request;

        Response = context.Response;

        Server = context.Server;

        Response.ContentType = "text/plain";



        string avatorFilePath = Server.MapPath("img.jpg");

        string animalFilePath = Server.MapPath("2.jpg");



        int width = 0;

        int height = 0;

        int top = int.Parse(context.Request.Form["t"]);

        int left = int.Parse(context.Request.Form["l"]);

        

        using (System.Drawing.Image avator = System.Drawing.Image.FromFile(avatorFilePath, true))

        {

            width = avator.Width;

            height = avator.Height;

        }



        using (System.Drawing.Image pickedImage = new System.Drawing.Bitmap(width, height))

        {

            using (System.Drawing.Graphics pickedG = System.Drawing.Graphics.FromImage(pickedImage))

            {

                pickedG.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;

                pickedG.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;



                //加载背景

                using (System.Drawing.Image avatorImage = System.Drawing.Image.FromFile(avatorFilePath, true))

                {

                    System.Drawing.Rectangle fromR = new System.Drawing.Rectangle(0, 0, width, height);

                    System.Drawing.Rectangle toR = new System.Drawing.Rectangle(0, 0, width, height);

                    pickedG.DrawImage(avatorImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel);

                }



                using (System.Drawing.Image animalImage = System.Drawing.Image.FromFile(animalFilePath, true))

                {

                    System.Drawing.Rectangle fromR = new System.Drawing.Rectangle(0, 0, animalImage.Width, animalImage.Height);

                    System.Drawing.Rectangle toR = new System.Drawing.Rectangle(left, top, animalImage.Width, animalImage.Height);

                    pickedG.DrawImage(animalImage, toR, fromR, System.Drawing.GraphicsUnit.Pixel);

                }



                //关键质量控制

                //获取系统编码类型数组,包含了jpeg,bmp,png,gif,tiff

                System.Drawing.Imaging.ImageCodecInfo[] icis = System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders();

                System.Drawing.Imaging.ImageCodecInfo ici = null;

                foreach (System.Drawing.Imaging.ImageCodecInfo i in icis)

                {

                    if (i.MimeType == "image/jpeg")

                    {

                        ici = i;

                    }

                }

                System.Drawing.Imaging.EncoderParameters ep = new System.Drawing.Imaging.EncoderParameters(1);

                ep.Param[0] = new System.Drawing.Imaging.EncoderParameter(System.Drawing.Imaging.Encoder.Quality, (long)90);



                //保存缩略图

                byte[] bytes;

                using (System.IO.MemoryStream ms = new System.IO.MemoryStream())

                {

                    pickedImage.Save(ms, ici, ep);



                    bytes = ms.ToArray();



                    ms.Close();

                    ms.Dispose();

                }

                Response.OutputStream.Write(bytes, 0, bytes.Length);

            }

        }

        Response.CacheControl = "no-cache";

        Response.ContentType = "image/jpeg";

    }

}
peitali 2014-12-01
  • 打赏
  • 举报
 回复
大神都去哪儿了 ，自己顶
如何在图片上添加贴图？试试这几种方法
你平时在拍照的时候，有没有遇到过这样的情况：当你拍照后，发现背景不是很符合你的心意出现了一些你不想分享的物品，这个时候你会怎么办呢？一般情况下，有的小伙伴会选择使用马赛克来遮住这些物品，但是有些图片如果打上马赛克的话会影响美观。今天告诉大家一个更好的方法，也就是给图片添加贴纸打码，既不会影响美观，又会显得很可爱。下面，让我来教你如何在图片上添加贴纸吧，有需要的小伙伴一起来看看呀～方法一：使用“图片转换器”实现在图片上添加贴纸迅捷图片转换器不仅可进行图片转换，而且还拥有许多的工具，例如：图片压缩、抠图换背景、
css-实现鼠标移至图片上显示黑色半透明遮罩层，且不至于遮住图片上的超链接的方法
作为一个刚接触html和css的小白,总会遇到一些细节问题,在这里写下一个我遇到的小问题的解决方法,方便今后加深理解,更高效地学习。 一般情况下，让一个图片有超链接，可以用a标签把 img包住，但是要做hover鼠标经过显示黑色半透明遮罩层如果用定位的话，定位的半透明遮罩层就会把图片遮住，以至于鼠标经过没有小手指，也点不到链接，所以这里给出一个思路，可以让a链接和图片同为子元素，然后display...
图片人物提取
图片人物提取 photoshop 下载Photoshop cc2019 使用方法 1.打开图片后，点击工具栏中的魔棒工具 2.点击魔棒工具后，先选中背景，然后Ctrl+Shift+I反选人物 3.选中任务后，点击工具栏的选择并遮住 4.进入选择并遮住月面，把不透明设置为100，调整一下边缘检测，然后点击确定。 5.调整好并选择并遮住后，人物就被载入了选区 6.人物载入选区后，按Ctrl+J就可以把人物抠下来 remove remove打开方法 网址：remove.bg 使用步骤 1.将所要提取的图片上传
ps-抠头发-选择并遮住工具
本人所用的ps版本是photoshop2022 文章目录前言一、选择并遮住工具二、使用步骤1.选择主体2.选择并遮住 前言 本文是关于如何用选择并遮住进行抠图 提示：以下是本篇文章正文内容，下面案例可供参考 一、选择并遮住工具 本文要用到选择并遮住工具来调整头发边缘 二、使用步骤 1.选择主体 详细步骤如下（示例）： 在选择菜单栏中，选择-主体 这里我们会发现人物主体已经选择出来了，但是发丝选区部分并不够细致如下图： 如果我们直接对人物直接进行抠图， 当我们更换背景时会发现有很多的瑕疵 更换.
怎么将自己的头像p到特定的背景图_做个背景透明的头像，让自己的微信与众不同...
一年前，我曾经写过一个小教程，可以让方方正正的微信头像变得像图中所显示的那样——背景是透明的，受到不少朋友的喜欢。这次我将其改编成视频的形式，以便让更多的人学习。这里要强调的是，本教程只适用于安卓手机。下面就让我们开始吧！https://www.zhihu.com/video/961011467868463104以下为文字稿：01、头像去背景首先，要准备一张适合做头像的图片，要求是：大小适中，画面...
HTML5

39,083

社区成员

5,548

社区内容

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章