Table of Contents
回复讨论(解决方案)
Home Backend Development PHP Tutorial 液化变形(向前变形)问题求教

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

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); //绘图开始
Copy after login


运行後图片结果:


回复讨论(解决方案)

用 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
Copy after login


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




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

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

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


就只是定义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) //写回去}
Copy after login

处理时
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>
Copy after login

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

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

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

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

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

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



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

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

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

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

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

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



了解,谢谢您!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

11 Best PHP URL Shortener Scripts (Free and Premium) 11 Best PHP URL Shortener Scripts (Free and Premium) Mar 03, 2025 am 10:49 AM

Long URLs, often cluttered with keywords and tracking parameters, can deter visitors. A URL shortening script offers a solution, creating concise links ideal for social media and other platforms. These scripts are valuable for individual websites a

Introduction to the Instagram API Introduction to the Instagram API Mar 02, 2025 am 09:32 AM

Following its high-profile acquisition by Facebook in 2012, Instagram adopted two sets of APIs for third-party use. These are the Instagram Graph API and the Instagram Basic Display API.As a developer building an app that requires information from a

Working with Flash Session Data in Laravel Working with Flash Session Data in Laravel Mar 12, 2025 pm 05:08 PM

Laravel simplifies handling temporary session data using its intuitive flash methods. This is perfect for displaying brief messages, alerts, or notifications within your application. Data persists only for the subsequent request by default: $request-

Build a React App With a Laravel Back End: Part 2, React Build a React App With a Laravel Back End: Part 2, React Mar 04, 2025 am 09:33 AM

This is the second and final part of the series on building a React application with a Laravel back-end. In the first part of the series, we created a RESTful API using Laravel for a basic product-listing application. In this tutorial, we will be dev

Simplified HTTP Response Mocking in Laravel Tests Simplified HTTP Response Mocking in Laravel Tests Mar 12, 2025 pm 05:09 PM

Laravel provides concise HTTP response simulation syntax, simplifying HTTP interaction testing. This approach significantly reduces code redundancy while making your test simulation more intuitive. The basic implementation provides a variety of response type shortcuts: use Illuminate\Support\Facades\Http; Http::fake([ 'google.com' => 'Hello World', 'github.com' => ['foo' => 'bar'], 'forge.laravel.com' =>

cURL in PHP: How to Use the PHP cURL Extension in REST APIs cURL in PHP: How to Use the PHP cURL Extension in REST APIs Mar 14, 2025 am 11:42 AM

The PHP Client URL (cURL) extension is a powerful tool for developers, enabling seamless interaction with remote servers and REST APIs. By leveraging libcurl, a well-respected multi-protocol file transfer library, PHP cURL facilitates efficient execution of various network protocols, including HTTP, HTTPS, and FTP. This extension offers granular control over HTTP requests, supports multiple concurrent operations, and provides built-in security features.

12 Best PHP Chat Scripts on CodeCanyon 12 Best PHP Chat Scripts on CodeCanyon Mar 13, 2025 pm 12:08 PM

Do you want to provide real-time, instant solutions to your customers' most pressing problems? Live chat lets you have real-time conversations with customers and resolve their problems instantly. It allows you to provide faster service to your custom

Announcement of 2025 PHP Situation Survey Announcement of 2025 PHP Situation Survey Mar 03, 2025 pm 04:20 PM

The 2025 PHP Landscape Survey investigates current PHP development trends. It explores framework usage, deployment methods, and challenges, aiming to provide insights for developers and businesses. The survey anticipates growth in modern PHP versio

See all articles