JavaScript中的圖像失真算法

所以我爲webapp創建了扭曲。我想在Mac中獲得與照片展位應用程序類似的效果。網上很難找到材料。大部分的藝術品（如http://www.splashnology.com/article/pixel-distortions-with-bilinear-filtration-in-html5-canvas/4739/）只描述基礎知識。現在，例如，我想讓球形或旋轉效果更加平滑，但我找不到任何解決方案。任何幫助，想法，資源？非常感謝！JavaScript中的圖像失真算法

來源

2013-03-12 Andrei Ivanov

我知道了）但是現在我想學習如何改進這些算法） – 2013-03-12 19:52:58

好吧，如果你有興趣像波浪一樣簡單的效果，在這裏閱讀http://ru.wikipedia.org/wiki /Синусоида，它是所有我們在八年級（從俄羅斯谷歌翻譯到英語）的想法。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
     <script src="../js/common.js"></script> 
     <link rel="stylesheet" href="style.css"> 
     <script>    

      addEventListener('load', function() { 
       var cnv = gid('q'); 
       var ctx = cnv.getContext('2d'); 
       // характеризует сдвиг графика по оси Oy. Чем больше a, тем выше поднимается график 
       var a = cnv.height/2; 
       // характеризует растяжение графика по оси Oy. Чем больше увеличивается b, тем сильнее возрастает амплитуда колебаний 
       var b = 10; 
       // характеризует растяжение графика по оси Ox. При увеличении c частота колебаний повышается 
       var c = .05; 
       // характеризует сдвиг графика по оси Ox. При увеличении d график двигается в положительном направлении оси абсцисс 
       var d = 0; 

       for (var i = 0; i < cnv.width; ++i) { 
        ctx.fillRect(i, (a + b * Math.sin(c * i + d)), 1, 1); 
       } 

       var cnv1 = gid('e'); 
       var ctx1 = cnv1.getContext('2d'); 
       ctx1.font = 'bold 30px Calibri'; 
       ctx1.fillText('Hello', 10, 30); 
       var imd = ctx1.getImageData(0, 0, cnv1.width, cnv1.height); 

       var cnv2 = gid('r'); 
       var ctx2 = cnv2.getContext('2d'); 
       ctx2.fillRect(0, 0, cnv2.width, cnv2.height); 
       var imd1 = ctx2.getImageData(0, 0, cnv2.width, cnv2.height); 
       var w = imd.width * 4; 

       for (var i = 0, j, x, y, d = imd.data, d1 = imd1.data, l = d.length; i < l; i += 4) { 
        y = Math.floor(i/w); 
        x = i - w * y; 
        j = (y + Math.floor(10 * Math.sin(.01 * x))) * w + x; 
        d1[j] = d[i]; 
        d1[j + 1] = d[i + 1]; 
        d1[j + 2] = d[i + 2]; 
        d1[j + 3] = d[i + 3]; 
       } 

     ctx2.putImageData(imd1, 0, 0); 
      }); 

     </script> 
    </head> 
    <body> 
     <canvas id="q" width="140" height="40"></canvas> 
     <p>График синусоиды.</p> 
     <canvas id="e" width="140" height="40"></canvas> 
     <p>Изображение без искажения.</p> 
     <canvas id="r" width="140" height="40"></canvas> 
     <p>Изображение с искажением.</p> 
    </body> 
</html>

來源

2013-05-17 14:08:08 user2240578

JavaScript中的圖像失真算法

回答

相關問題