液化变形（向前变形）问题求教

继续上次的问题 http://bbs.csdn.net/topics/390962881?page=1#post-398737904
已经将液化公式Ｕ解出，但实际使用後图片出现非预期变形，不确定是哪个环节出错，请大神指导

以下是我的代码：

var r, alpha, angle, sourcePosition, destPosition, rmax, M, C, X;
    for (y = -radius; y < radius; ++y) { //取得圆范围
        for (x = -radius; x < radius; ++x) {
            if (x * x + y * y <= radius * radius) {
                destPosition = (y + centerY) * width + x + centerX; //移动後圆内1点(此为pixel位置，非座标)
                destPosition *= 4;
                var rmax = radius; //圆半径
                C = {x:centerX+80,y:centerY};//移动前原点Ｃ (假设右往左移动80 pixel)
                M = {x:centerX,y:centerY}; //移动後原点Ｍ
                X = {x:(x + centerX) , y: (y+ centerY)};//移动後圆内1点座标
                var U = Liquify(M,X,C,rmax); //液化运算得到 U 座标
                sourcePosition = ((Math.ceil(U.y))*width)+Math.ceil(U.x); //粗略取整数 U 座标(尚未用线性插值法) 并转换为pixel位置
                sourcePosition *= 4;

                //用U取代原X像素
                dstPixels[destPosition + 0] = srcPixels[sourcePosition + 0];
                dstPixels[destPosition + 1] = srcPixels[sourcePosition + 1];
                dstPixels[destPosition + 2] = srcPixels[sourcePosition + 2];
                dstPixels[destPosition + 3] = srcPixels[sourcePosition + 3];
            }
         }
    }
    drawPixels(canvasId, destImgData);　//绘图开始

运行後图片结果:

14 个解决方案

#1

用 Canvas 处理？
你的 dstPixels、srcPixels 分别是什么？怎么赋值的？

看算法 srcPixels 应该是 getImageData 方法取得的图片数据
那么 dstPixels 是如何赋值的？因为你只修改了矩形的内接圆部分
js 的数组是引用传递的
如果代码中有 dstPixels = srcPixels 的话，那么对 dstPixels 的修改就会作用到 srcPixels 
于是 srcPixels[sourcePosition + 0] 得到的可能是前面刚被修改后的 dstPixels[destPosition + 0]
这样就不对了
只有在 变形数据全部生成后，才可写回去

#2

谢谢回覆，抱歉，我把漏掉的代码补上

1. 对的，是用canvas
2. 遗漏代码:

    var sourceImgData = originalImageData; //原始图片image data
    var destImgData = createCompatibleImageData(canvasId,sourceImgData); //将image 写入Canvas
    var srcPixels = sourceImgData.data; //取得image data
    var dstPixels = destImgData.data; //取得Canvas内image data

目前不太理解您的意思，我的具体思维是只对圆内pixel做替换，的确是全部替换完之後才写回canvas，也确定Ｕ算出来的值是正确的，是否有我误解的地方？目前不确定的我这样替换的逻辑是否正确，对於那个公式无法理解，我的资质太浅好困扰..

#3

谢谢回覆，抱歉，我把漏掉的代码补上

1. 对的，是用canvas
2. 完整代码:

  

  var sourceImgData = originalImageData; //原始图片image data
    var destImgData = createCompatibleImageData(canvasId,sourceImgData); //将image 写入Canvas
    var srcPixels = sourceImgData.data; //取得image data
    var dstPixels = destImgData.data; //取得Canvas内image data
    width = sourceImgData.width;
    height = sourceImgData.height;
    centerX = Math.floor(width / 2); 
    centerY = Math.floor(height / 2);
    radius = 100;
    copyImageData(srcPixels, dstPixels, width, height);
    drawPixels(canvasId, destImgData); //绘出整张原图

   var r, alpha, angle, sourcePosition, destPosition, rmax, M, C, X;
    for (y = -radius; y < radius; ++y) { //取得圆范围
        for (x = -radius; x < radius; ++x) {
            if (x * x + y * y <= radius * radius) {
                destPosition = (y + centerY) * width + x + centerX; //移动後圆内1点(此为pixel位置，非座标)
                destPosition *= 4;
                var rmax = radius; //圆半径
                C = {x:centerX+80,y:centerY};//移动前原点Ｃ (假设右往左移动80 pixel)
                M = {x:centerX,y:centerY}; //移动後原点Ｍ
                X = {x:(x + centerX) , y: (y+ centerY)};//移动後圆内1点座标
                var U = Liquify(M,X,C,rmax); //液化运算得到 U 座标
                sourcePosition = ((Math.ceil(U.y))*width)+Math.ceil(U.x); //粗略取整数 U 座标(尚未用线性插值法) 并转换为pixel位置
                sourcePosition *= 4;
 
                //用U取代原X像素
                dstPixels[destPosition + 0] = srcPixels[sourcePosition + 0];
                dstPixels[destPosition + 1] = srcPixels[sourcePosition + 1];
                dstPixels[destPosition + 2] = srcPixels[sourcePosition + 2];
                dstPixels[destPosition + 3] = srcPixels[sourcePosition + 3];
            }
         }
    }
    drawPixels(canvasId, destImgData);　//绘出圆形部分

    


目前不太理解您的意思，我的具体思维是只对圆内pixel做替换，的确是全部替换完之後才写回canvas，也确定Ｕ算出来的值是正确的，是否有我误解的地方？目前不确定的我这样替换的逻辑是否正确，对於那个公式无法理解，我的资质太浅好困扰..

#4

createCompatibleImageData 是个什么函数
如果 他返回的 destImgData 是传入的 sourceImgData 的引用的话，就会出现你遇到的情况

#5

function createCompatibleImageData(canvasId, imgData) {
    "use strict";
    var context2d = getContext2d(canvasId);
    return context2d.createImageData(imgData.width, imgData.height);
}

就只是定义canvas context2d 而已，所以我的pixwel替换的思维是错误的吗？应该怎麽做才对？

感谢！

#6

流程大致是这样

var c=document.getElementById("myCanvas"); //获取 Canvas 控件
var ctx=c.getContext("2d"); 
var img=new Image()
img.src = '/photo.jpg';
img.onload = function() { //加载图片
  source = ctx.getImageData( x, y, w, h) //读取一个矩形区域
  //在这里进行处理，注意事项在下面
  ctx.putImageData(source, x, y) //写回去
}

处理时
srcPixels = source.data.concat([]); //这样产生副本（非引用）
dstPixels 就是 source.data

#7

不太清楚您指的引用是什麽意思，是参照的意思吗？(2者会同步变化)
我的代码部分应该是复制一份暂存，不是参照(或引用)

我想了一下所看的问题，是否可能是作用区域有问题？
应该受影响的区域从原点Ｃ移动到Ｍ时(红色区块)


我的做法只有取得Ｍ圆内Ｘ点并算出Ｕ替换，作用区块也只有Ｍ圆，是否是这原因引起非预期图片变形？

#8

我写了个完整的测试例，你可参考一下（当然毛病很多，但意思到了）
在图片上按下鼠标键并拖动鼠标就可看到效果

<!DOCTYPE HTML>
<html>
<head>
<script>
start = 0;
x = y = 0;
r = 60;

function $(id) {
  return document.getElementById(id);
}
window.onload = function() {
  var c = $("myCanvas");
  ctx = c.getContext("2d");
  var img=new Image()
  img.src = '/00.jpg'; //待处理图片
  img.onload = function() {
    c.width = this.width * 2 + 10;
    c.height = this.height;
    ctx.drawImage(img, 0, 0);
    ctx.drawImage(img, this.width+10, 0); //我喜欢弄个对照组
  }
}
window.onmouseup = function(e) {
  start = 0;
}
window.onmousedown = function(e) {
  $("mouse").innerHTML = e.x + ', ' + e.y;
  start = 1;
  x = e.x;
  y = e.y;
  r = parseInt($('r').value);
}
window.onmousemove = function(e) {
  if(start) {
    $("mouse").innerHTML = e.x + ', ' + e.y;
    forward(ctx, r, x, y, e.x, e.y)
    x = e.x;
    y = e.y;
    r -= $('dj').value;
  }
}

function forward(im, r, cx, cy, mx, my) {
  var p = im.getImageData( cx-r, cy-r, r+r, r+r);
  $('box').innerHTML = p.width + 'x' + p.height;
  var dst = p.data;
  var src = [], i;
  for(i=0; i<dst.length; i++) src.push(dst[i]+0)

  var w = r + r;
  var r2 = r * r;
  var mcx = mx - cx;
  var mcy = my - cy;
  var mcx2 = mcx * mcx;
  var mcy2 = mcy * mcy;
  var res = [];
  var len = r + r;
  var x, y, u = {}, dx, dy;
  for(x=0; x<len; x++) {
    dx = r2 - (x - cx) * (x - cx);
    ux = x - (dx/(dx + mcx2)) * (dx/(dx + mcx2)) * mcx; 
    for(y=0; y<len; y++) {
      if(r2 < (x - cx) * (x - cx) + (y - cy) * (y - cy)) continue;

        dy = r2 - (y - cy) * (y - cy);
        uy = y - (dy/(dy + mcy2)) * (dy/(dy + mcy2)) * mcy;

        o = ((y-r+mcy) * p.width + x-r+mcx) * 4;
        t1  = ((Math.floor(uy) - r) * p.width + Math.floor(ux) - r) * 4;
        t2  = ((Math.ceil(uy) - r) * p.width + Math.ceil(ux) - r) * 4;
        for(i=0; i<4; i++) p.data[o+i] = (src[t1+i] + src[t2+i])/2
    }
  }
  im.putImageData(p, mx-r, my-r)
}
</script>
</head>
<body>

<canvas id="myCanvas" width="327" height="500" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<div>
鼠标位置:<span id=mouse></span>
取景框:<span id=box></span>
工作半径<input type=text id=r value=60>
递减<input type=text id=dj value=4>
</div>
</body>
</html>

#9

哇...谢谢xuzuning大神，太强大了！！

刚刚无聊也在板上乱晃回答问题 挺好玩的~

已经测试过您给的代码，也仔细看过，执行原理似乎跟您上次给的php版本代码一样(用递减半径的方式运行?)

这样子的确有达到目的，但是可能无法实际应用在瘦身功能。

xuzuning觉得我用那个公式的方式还有讨论的空间吗？还是我应该做罢寻求其他方式？

#10

当你将鼠标从边缘向中心移动时，的确有所谓“廋身“的效果（改变参数试试）
不过这个这个公式似乎并不像他描述的那样（好像反了）
当然也可能是程序写错了，我尝试了集中写法，大多都不能实现期望的结果。只有上次那个php版的效果最明显
你可以再看看

#11

#12

引用 11 楼 xuzuning 的回复:

刚刚一直在玩您提供的那个代码 的确可以达到瘦身，但我想应该无法使用在商业用途，使用者用起来可能无法达到他们预期的效果(要做到像美图秀秀那样)。目前在网路上，也没找到半个实现类似功能的人，我想这可能真的相当困难，感谢xuzuning热心协助！我再花些时间研究看看，如果xuzuning有发现新思维，也恳请您与我讨论分享。

另外PHP板无法编辑帖子是正常的吗? 这样很困扰，我在回答别人问题时写错字却无法修改，一直说我权限不足，即使此篇我是发帖者，一样无法编辑自己的帖子。

#13

贴子只在发布后数分钟内贴主可修改
其他时间修改的权限在版主，CSDN就是这样规定的

算法问题待想明白后在于你商讨，你可以私信发个 email 给我

#14

引用 13 楼 xuzuning 的回复:

贴子只在发布后数分钟内贴主可修改
其他时间修改的权限在版主，CSDN就是这样规定的

算法问题待想明白后在于你商讨，你可以私信发个 email 给我

了解，谢谢您！