本帖最后由 wind74181 于 2015-01-07 18:07:26 编辑

解决方案 »

  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,也确定U算出来的值是正确的,是否有我误解的地方?目前不确定的我这样替换的逻辑是否正确,对於那个公式无法理解,我的资质太浅好困扰..
      

  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};//移动前原点C (假设右往左移动80 pixel)
                    M = {x:centerX,y:centerY}; //移动後原点M
                    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,也确定U算出来的值是正确的,是否有我误解的地方?目前不确定的我这样替换的逻辑是否正确,对於那个公式无法理解,我的资质太浅好困扰..
      

  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.   

    我写了个完整的测试例,你可参考一下(当然毛病很多,但意思到了)
    在图片上按下鼠标键并拖动鼠标就可看到效果<!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>
      

  8.   

    哇...谢谢xuzuning大神,太强大了!!刚刚无聊也在板上乱晃回答问题 挺好玩的~已经测试过您给的代码,也仔细看过,执行原理似乎跟您上次给的php版本代码一样(用递减半径的方式运行?)这样子的确有达到目的,但是可能无法实际应用在瘦身功能。xuzuning觉得我用那个公式的方式还有讨论的空间吗?还是我应该做罢寻求其他方式?
      

  9.   

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

  10.   


    刚刚一直在玩您提供的那个代码 的确可以达到瘦身,但我想应该无法使用在商业用途,使用者用起来可能无法达到他们预期的效果(要做到像美图秀秀那样)。目前在网路上,也没找到半个实现类似功能的人,我想这可能真的相当困难,感谢xuzuning热心协助!我再花些时间研究看看,如果xuzuning有发现新思维,也恳请您与我讨论分享。另外PHP板无法编辑帖子是正常的吗? 这样很困扰,我在回答别人问题时写错字却无法修改,一直说我权限不足,即使此篇我是发帖者,一样无法编辑自己的帖子。
      

  11.   

    贴子只在发布后数分钟内贴主可修改
    其他时间修改的权限在版主,CSDN就是这样规定的算法问题待想明白后在于你商讨,你可以私信发个 email 给我