javascript - 将图像绘制为 HTML 表格

Question

这是我的 JSFiddle:http://jsfiddle.net/0r16e802/4/

我想做的是获取图像并将其绘制为 HTML 表格2 我算法中的大问题

1. 我似乎可以绘制图像，但只有第一张图像被加载到第一行

2. 尺寸和background-position 的大问题

    var Append="";
   $(document).ready(function(){
     var row=2;
     var ItemPerRow=10;
     CreateEmojiTable(row, ItemPerRow);
   
   function CreateEmojiTable(row, ItemsPerRow){
     Append+="<table width='99%' style='padding-top:3px;'>";
    for(var i=0;i<row;i++)
    {
       Append+="<tr>";
       DrawEmoji(ItemsPerRow, i);
      Append+="</tr>";
    }
    Append+="</table>";    
   $("#emoji_container").html(Append);
     }
       function DrawEmoji(ItemsPerRow, r){
      var size=16;
       for(var i=0;i<ItemsPerRow;i++){
      Append+="<td>"
      Append+="<div class='emoji' style='background-position:0px -"+parseInt(r*i*size)+"px;'></div>";
     Append+="</td>";
     }
    }
    });
   

Answer 1

编辑:更正索引

按照 Jovan 的建议，索引应该像他说的那样:

(r*ItemsPerRow + i) * size

但它仍然未对齐，因此您必须像这样更正它:

(r*ItemsPerRow + i) * size - 2

然后，您不希望超过实际的最大索引，即 262，否则您将像我在上面的评论中所说的那样出现重复和错位。

这是完整的解决方案。它修复了索引、对齐和最大索引:http://jsfiddle.net/0r16e802/12/

---

图像中的表情符号对齐到 17 像素，而不是 16。

var size=17;

这会使它们彼此对齐，但您仍然需要解决边界条件问题，即相差 1 个像素。

为此，将 CSS 固定 1 个像素:

height:16px;

最后，通过减去 1 来修复大小计算:

parseInt(r*i*size - 1)

这是解决方案:http://jsfiddle.net/0r16e802/5/