Table des matières
回复讨论(解决方案)
Maison développement back-end tutoriel php 液化变形(向前变形)问题求教

液化变形(向前变形)问题求教

Jun 23, 2016 pm 01:42 PM

继续上次的问题 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); //绘图开始
Copier après la connexion


运行後图片结果:


回复讨论(解决方案)

用 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
Copier après la connexion


目前不太理解您的意思,我的具体思维是只对圆内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); //绘出圆形部分
Copier après la connexion




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

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

function createCompatibleImageData(canvasId, imgData) {    "use strict";    var context2d = getContext2d(canvasId);    return context2d.createImageData(imgData.width, imgData.height);}
Copier après la connexion


就只是定义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) //写回去}
Copier après la connexion

处理时
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>
Copier après la connexion

哇...谢谢xuzuning大神,太强大了!!

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

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

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

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

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



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

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

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

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

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

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



了解,谢谢您!
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

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 !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

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

Expliquez les jetons Web JSON (JWT) et leur cas d'utilisation dans les API PHP. Expliquez les jetons Web JSON (JWT) et leur cas d'utilisation dans les API PHP. Apr 05, 2025 am 12:04 AM

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,

Comment fonctionne le détournement de session et comment pouvez-vous l'atténuer en PHP? Comment fonctionne le détournement de session et comment pouvez-vous l'atténuer en PHP? Apr 06, 2025 am 12:02 AM

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.

Décrivez les principes solides et comment ils s'appliquent au développement de PHP. Décrivez les principes solides et comment ils s'appliquent au développement de PHP. Apr 03, 2025 am 12:04 AM

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? Comment définir automatiquement les autorisations d'UnixSocket après le redémarrage du système? Mar 31, 2025 pm 11:54 PM

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? Comment déboguer le mode CLI dans phpstorm? Apr 01, 2025 pm 02:57 PM

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) ...

Expliquez la liaison statique tardive en PHP (statique: :). Expliquez la liaison statique tardive en PHP (statique: :). Apr 03, 2025 am 12:04 AM

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.

Comment envoyer une demande post contenant des données JSON à l'aide de la bibliothèque Curl de PHP? Comment envoyer une demande post contenant des données JSON à l'aide de la bibliothèque Curl de PHP? Apr 01, 2025 pm 03:12 PM

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� ...

See all articles