jQuery圖像處理

Question

我想在jquery中的靜態圖像上繪製不同頻率的網格線，對於最佳/最簡單的方法有任何建議 - 謝謝！

Answer 1

這裏是一個非常快速的樣機，應該幫助給你我採取

var top = image.top; 
var left = image.left; 
var width = image.width; 
var height = image.height; 
var boxHeight = 10; //change this how tall you want each grid box to be 
var boxWidth = 10; //same for width 
gridtop = top; 
gridleft = left; 
while (gridtop < top + height); { 
    gridtop += boxHeight; 
    $('body').append('<div></div>').css('position', 'absolute').css('width', width).css('top', gridtop).css('left', left); 
} 
while (gridleft < left + width); { 
    gridleft += boxWidth; 
    $('body').append('<div></div>').css('position', 'absolute').css('height', height).css('left', gridleft).css('top', top); 
} 

Answer 2

// Specify the number of boxes 
var verticalBoxes = 10; 
var horizontalBoxes = 10; 
var countBoxes = verticalBoxes*horizontalBoxes; 

var imageHeight = img.height(); 
var imageWidth = img.width(); 

var boxHeight = imageHeight/verticalBoxes; 
var boxWidth = imageWidth/horizontalBoxes; 

// #grid needs to be relatively positioned 
var grid = $('#grid').detach(); 
for(i = 0; i < countBoxes ; i++){ 
    grid.append('<div class=\'boxes\'></div>'); 
} 

// This is the absolutely positioned container overlaying the image 
$('#grid-container').append(grid); 

$('head').append('<style>.boxes {outline:1px solid black; height:'+boxHeight+'px; width:'+boxWidth+'px; float:left; }</style>'); 

的想法，我相信這個版本是更好的性能，依賴於CSS盒子模型，而不是單獨把每個箱子。然而它指定箱子的數量而不是箱子的尺寸...