液化变形(向前变形)问题求教
继续上次的问题 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 给我
了解,谢谢您!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Alipay Php ...

JWT est une norme ouverte basée sur JSON, utilisée pour transmettre en toute sécurité des informations entre les parties, principalement pour l'authentification de l'identité et l'échange d'informations. 1. JWT se compose de trois parties: en-tête, charge utile et signature. 2. Le principe de travail de JWT comprend trois étapes: la génération de JWT, la vérification de la charge utile JWT et l'analyse. 3. Lorsque vous utilisez JWT pour l'authentification en PHP, JWT peut être généré et vérifié, et les informations sur le rôle et l'autorisation des utilisateurs peuvent être incluses dans l'utilisation avancée. 4. Les erreurs courantes incluent une défaillance de vérification de signature, l'expiration des jetons et la charge utile surdimensionnée. Les compétences de débogage incluent l'utilisation des outils de débogage et de l'exploitation forestière. 5. L'optimisation des performances et les meilleures pratiques incluent l'utilisation des algorithmes de signature appropriés, la définition des périodes de validité raisonnablement,

Le détournement de la session peut être réalisé via les étapes suivantes: 1. Obtenez l'ID de session, 2. Utilisez l'ID de session, 3. Gardez la session active. Les méthodes pour empêcher le détournement de la session en PHP incluent: 1. Utilisez la fonction Session_RegeReate_id () pour régénérer l'ID de session, 2. Stocker les données de session via la base de données, 3. Assurez-vous que toutes les données de session sont transmises via HTTPS.

L'application du principe solide dans le développement de PHP comprend: 1. Principe de responsabilité unique (SRP): Chaque classe n'est responsable d'une seule fonction. 2. Principe ouvert et ferme (OCP): les changements sont réalisés par extension plutôt que par modification. 3. Principe de substitution de Lisch (LSP): les sous-classes peuvent remplacer les classes de base sans affecter la précision du programme. 4. Principe d'isolement d'interface (ISP): utilisez des interfaces à grain fin pour éviter les dépendances et les méthodes inutilisées. 5. Principe d'inversion de dépendance (DIP): les modules élevés et de bas niveau reposent sur l'abstraction et sont mis en œuvre par injection de dépendance.

Comment définir automatiquement les autorisations d'UnixSocket après le redémarrage du système. Chaque fois que le système redémarre, nous devons exécuter la commande suivante pour modifier les autorisations d'UnixSocket: sudo ...

Comment déboguer le mode CLI dans phpstorm? Lors du développement avec PHPStorm, nous devons parfois déboguer PHP en mode interface de ligne de commande (CLI) ...

Liaison statique (statique: :) implémente la liaison statique tardive (LSB) dans PHP, permettant à des classes d'appel d'être référencées dans des contextes statiques plutôt que de définir des classes. 1) Le processus d'analyse est effectué au moment de l'exécution, 2) Recherchez la classe d'appel dans la relation de succession, 3) il peut apporter des frais généraux de performance.

Envoyant des données JSON à l'aide de la bibliothèque Curl de PHP dans le développement de PHP, il est souvent nécessaire d'interagir avec les API externes. L'une des façons courantes consiste à utiliser la bibliothèque Curl pour envoyer le post� ...
