我的 JavaScript 像素绘图函数不能接受大于 9 的宽度值

Posted 2023-05-07

技术标签:

【中文标题】我的 JavaScript 像素绘图函数不能接受大于 9 的宽度值【英文标题】：My JavaScript pixel-drawing function cannot accept a width value of more than 9 【发布时间】：2021-11-15 06:00:24 【问题描述】：

这个功能我用了很久了。我自己做的。有一半的时间它根本不起作用，但过了一段时间我设法修复它。然而，这不是这里的原因。

/*pixelPrint() is a function that allows you to print pixel art from specified data in a new format. This programming language is parsed into javascript and executed as so. You may take this function, but keep the credits.*/
function pixelPrint(indata)
    /*
    *           The Flux Brothers
    *       Major_Flux and Minor_Flux
    *           June 2021 product
    *           pixelPrint 1.0
    *
    * Free license use only if these credits are
    * included in this product. Removal of credits
    * will void your free license of use until you
    * return an exact copy of this license to this
    * product. You may grab this out of anyone's
    * project as long as they have this license on
    * it and they didn't tinker with the code.
    *
    * Do not tinker with the code or you will null
    * its ability to function assuming it does at
    * all with your setup. Email Major_Flux or any
    * person who knows him if you want to tinker
    * with the code if your setup doesn't allow it
    * to work so that a cross-browser/OS fix can be
    * put up for others to benefit from.
    */
    try
        var colors = indata.split(";");
        var sizeData = colors[0];
        var pixWidth;
        var pixHeight;
        if(sizeData.indexOf("*") == 1)
            pixWidth = sizeData.split("*")[0];
            pixHeight = sizeData.split("*")[1];
        else
            return("<p style='color: #ff0000'>Error: size data not valid</p>");
        
        if(pixWidth.indexOf(" ") > 0 || pixHeight.indexOf(" ") > 0)
            return("<p style='color: #ff0000'>Error: size data have spaces in them</p>");
        
        var internals = "";
        var colorKey = 0;
        for(var y = 0; y < pixHeight; y++)
            internals = internals + "<tr>";
            for(var x = 0; x < pixWidth; x++)
                colorKey++;
                internals = internals + "<td style='background: " + colors[colorKey] + "; width: 5px; height: 5px; display: inline-block;'></td>";
            
            internals = internals + "</tr>";
        
        var outdata;
        if(internals != "" && internals != null && internals != undefined && internals.indexOf("<") >= 0)
            outdata = "<table cellSpacing='0px' class='pixelboard'>" + internals + "</table>";
        else
            outdata = "<p style='color: #ff0000'>Error: var internals is somehow empty</p>";
        
        if(outdata != indata)
            return(outdata);
        else
            throw("Data was not processed");
        
    catch(err)
        alert(err);

<p>This html is not part of any of the problem, just the JS. This HTML is to display what it does.</p>
<p>Usage: <code>[width]*[height];color;color...</code></p>
<p>Example: <code>2*2;#dddddd;#aaaaaa;#aaaaaa;#777777</code>, produces a 2 by 2 square with a pixelated outset effect to it.</p>
<p>Try it out below:</p>
<input id="code" type="text"/><button onclick="document.getElementById('result').innerHTML = pixelPrint(document.getElementById('code').value);">Try</button>
<div id="result">

</div>
<p>Do not worry about the chopped up rows, I am sure you can find a CSS-based fix when you put the free function on your website.</p>

我放在这里的原因是宽度不能是两位或多位数字，限制为只有1-9。你能弄清楚这是怎么回事吗？

【问题讨论】：

【参考方案1】：