液化变形(向前变形)问题求教
继续上次的问题 http://bbs.csdn.net/topics/390962881?page=1#post-398737904
已经将液化公式U解出,但实际使用後图片出现非预期变形,不确定是哪个环节出错,请大神指导
以下是我的代码:
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); //绘图开始
运行後图片结果:
回复讨论(解决方案)
用 Canvas 处理?
你的 dstPixels、srcPixels 分别是什么?怎么赋值的?
看算法 srcPixels 应该是 getImageData 方法取得的图片数据
那么 dstPixels 是如何赋值的?因为你只修改了矩形的内接圆部分
js 的数组是引用传递的
如果代码中有 dstPixels = srcPixels 的话,那么对 dstPixels 的修改就会作用到 srcPixels
于是 srcPixels[sourcePosition + 0] 得到的可能是前面刚被修改后的 dstPixels[destPosition + 0]
这样就不对了
只有在 变形数据全部生成后,才可写回去
谢谢回覆,抱歉,我把漏掉的代码补上
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算出来的值是正确的,是否有我误解的地方?目前不确定的我这样替换的逻辑是否正确,对於那个公式无法理解,我的资质太浅好困扰..
谢谢回覆,抱歉,我把漏掉的代码补上
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算出来的值是正确的,是否有我误解的地方?目前不确定的我这样替换的逻辑是否正确,对於那个公式无法理解,我的资质太浅好困扰..
createCompatibleImageData 是个什么函数
如果 他返回的 destImgData 是传入的 sourceImgData 的引用的话,就会出现你遇到的情况
function createCompatibleImageData(canvasId, imgData) { "use strict"; var context2d = getContext2d(canvasId); return context2d.createImageData(imgData.width, imgData.height);}
就只是定义canvas context2d 而已,所以我的pixwel替换的思维是错误的吗?应该怎麽做才对?
感谢!
流程大致是这样
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
不太清楚您指的引用是什麽意思,是参照的意思吗?(2者会同步变化)
我的代码部分应该是复制一份暂存,不是参照(或引用)
我想了一下所看的问题,是否可能是作用区域有问题?
应该受影响的区域从原点C移动到M时(红色区块)
我的做法只有取得M圆内X点并算出U替换,作用区块也只有M圆,是否是这原因引起非预期图片变形?
我写了个完整的测试例,你可参考一下(当然毛病很多,但意思到了)
在图片上按下鼠标键并拖动鼠标就可看到效果
<!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>
哇...谢谢xuzuning大神,太强大了!!
刚刚无聊也在板上乱晃回答问题 挺好玩的~
已经测试过您给的代码,也仔细看过,执行原理似乎跟您上次给的php版本代码一样(用递减半径的方式运行?)
这样子的确有达到目的,但是可能无法实际应用在瘦身功能。
xuzuning觉得我用那个公式的方式还有讨论的空间吗?还是我应该做罢寻求其他方式?
当你将鼠标从边缘向中心移动时,的确有所谓“?身“的效果(改变参数试试)
不过这个这个公式似乎并不像他描述的那样(好像反了)
当然也可能是程序写错了,我尝试了集中写法,大多都不能实现期望的结果。只有上次那个php版的效果最明显
你可以再看看
刚刚一直在玩您提供的那个代码 的确可以达到瘦身,但我想应该无法使用在商业用途,使用者用起来可能无法达到他们预期的效果(要做到像美图秀秀那样)。目前在网路上,也没找到半个实现类似功能的人,我想这可能真的相当困难,感谢xuzuning热心协助!我再花些时间研究看看,如果xuzuning有发现新思维,也恳请您与我讨论分享。
另外PHP板无法编辑帖子是正常的吗? 这样很困扰,我在回答别人问题时写错字却无法修改,一直说我权限不足,即使此篇我是发帖者,一样无法编辑自己的帖子。
贴子只在发布后数分钟内贴主可修改
其他时间修改的权限在版主,CSDN就是这样规定的
算法问题待想明白后在于你商讨,你可以私信发个 email 给我
贴子只在发布后数分钟内贴主可修改
其他时间修改的权限在版主,CSDN就是这样规定的
算法问题待想明白后在于你商讨,你可以私信发个 email 给我
了解,谢谢您!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Alipay PHP ...

JWT는 주로 신분증 인증 및 정보 교환을 위해 당사자간에 정보를 안전하게 전송하는 데 사용되는 JSON을 기반으로 한 개방형 표준입니다. 1. JWT는 헤더, 페이로드 및 서명의 세 부분으로 구성됩니다. 2. JWT의 작업 원칙에는 세 가지 단계가 포함됩니다. JWT 생성, JWT 확인 및 Parsing Payload. 3. PHP에서 인증에 JWT를 사용하면 JWT를 생성하고 확인할 수 있으며 사용자 역할 및 권한 정보가 고급 사용에 포함될 수 있습니다. 4. 일반적인 오류에는 서명 검증 실패, 토큰 만료 및 대형 페이로드가 포함됩니다. 디버깅 기술에는 디버깅 도구 및 로깅 사용이 포함됩니다. 5. 성능 최적화 및 모범 사례에는 적절한 시그니처 알고리즘 사용, 타당성 기간 설정 합리적,

세션 납치는 다음 단계를 통해 달성 할 수 있습니다. 1. 세션 ID를 얻으십시오. 2. 세션 ID 사용, 3. 세션을 활성 상태로 유지하십시오. PHP에서 세션 납치를 방지하는 방법에는 다음이 포함됩니다. 1. 세션 _regenerate_id () 함수를 사용하여 세션 ID를 재생산합니다. 2. 데이터베이스를 통해 세션 데이터를 저장하십시오.

PHP 개발에서 견고한 원칙의 적용에는 다음이 포함됩니다. 1. 단일 책임 원칙 (SRP) : 각 클래스는 하나의 기능 만 담당합니다. 2. Open and Close Principle (OCP) : 변경은 수정보다는 확장을 통해 달성됩니다. 3. Lisch의 대체 원칙 (LSP) : 서브 클래스는 프로그램 정확도에 영향을 미치지 않고 기본 클래스를 대체 할 수 있습니다. 4. 인터페이스 격리 원리 (ISP) : 의존성 및 사용되지 않은 방법을 피하기 위해 세밀한 인터페이스를 사용하십시오. 5. 의존성 반전 원리 (DIP) : 높고 낮은 수준의 모듈은 추상화에 의존하며 종속성 주입을 통해 구현됩니다.

시스템이 다시 시작된 후 UnixSocket의 권한을 자동으로 설정하는 방법. 시스템이 다시 시작될 때마다 UnixSocket의 권한을 수정하려면 다음 명령을 실행해야합니다.

phpstorm에서 CLI 모드를 디버그하는 방법은 무엇입니까? PHPStorm으로 개발할 때 때때로 CLI (Command Line Interface) 모드에서 PHP를 디버그해야합니다 ...

정적 바인딩 (정적 : :)는 PHP에서 늦은 정적 바인딩 (LSB)을 구현하여 클래스를 정의하는 대신 정적 컨텍스트에서 호출 클래스를 참조 할 수 있습니다. 1) 구문 분석 프로세스는 런타임에 수행됩니다. 2) 상속 관계에서 통화 클래스를 찾아보십시오. 3) 성능 오버 헤드를 가져올 수 있습니다.

PHP 개발에서 PHP의 CURL 라이브러리를 사용하여 JSON 데이터를 보내면 종종 외부 API와 상호 작용해야합니다. 일반적인 방법 중 하나는 컬 라이브러리를 사용하여 게시물을 보내는 것입니다 ...
