Javascript 如何使用砖块绘制图像。图像可以通过上传器上传。

我正在开发一个web应用程序，它有一个砖块编辑器，用于使用砖块绘制标志。直到我能用字符和数字画符号。现在我尝试在砖块编辑器上绘制图像

我想要像这样的东西：

---

我有一个javascript和ajax处理程序解决方案

第一步。在html控件上绘制图像

第二步。将图像转换为base64并传递给ajax处理程序

函数GenerateImage（） {

私有字符串ReadJpeg（字符串ImgName） {

XmlDocument xml=新的XmlDocument（）

xmlementroot=xml.CreateElement（“Color”）；//根节点 AppendChild（根）

xmlcoment comment=xml.CreateComment（“图像颜色”）；
AppendChild（注释）；
var path=HttpContext.Current.Server.MapPath（“图像”）；//获取所保存图像的服务器路径
var imgBitData=新位图（路径+“/”+ImgName）；
var imgWidth=imgBitData.Width；
var imgHeight=imgBitData.Height；
SetAttribute（“RowNum”，imgHeight.ToString（））；
for（int i=0；i

    var imgElem = document.getElementById("uploadImg");                                                                                 // Get uploaded image name

    var tempcanvas = document.createElement("canvas");                                                                                  // Dynamic create canvas control
    tempcanvas.width = imgElem.clientWidth;
    tempcanvas.height = imgElem.clientHeight;
    var tempCtx = tempcanvas.getContext("2d");
    tempCtx.drawImage(imgElem, 0, 0);                                                                                                   // Draw image on canvas
    var dataURL = tempcanvas.toDataURL("image/png");
    var imgData = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

    var parameter = "File64=" + imgData;                                                                                                // Set values in parameter
    var xmlhttp;        
    if (window.XMLHttpRequest) {                                                                                                        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {                                                                                                                              // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    if (xmlhttp) {
        xmlhttp.open("POST", "monoImageHandler.ashx", false);                                                                           // Call AJAX handler with post request                
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(parameter);                                                                                                        // Passes valuse as parameter 

        var imgColorXml;
        imgColorXml = xmlhttp.responseXML;                                                                                              // This is the code for getting the info of the client using text                           
        var totalRow = imgColorXml.getElementsByTagName("Color");
        var imgRowCount = parseInt(totalRow[0].getAttribute('RowNum'));
        setBackGroundUploadImage(imgElem.clientWidth, imgElem.clientHeight);                                                            // Set 

        // Draw x co-ordinate of rectangle
        for (var row = 0; row < imgRowCount; row++) {
            ctx.save();

            var y = imgColorXml.getElementsByTagName("Row_No" + row);
            var imgColCount = parseInt(y[0].getAttribute('ColNum'));

            // Draw y co-ordinate of rectangle
            for (var col = 0; col < imgColCount; col++) {

                var x = imgColorXml.getElementsByTagName("Row" + row);
                var colColor = x[col].getAttribute('Color');

                colColor = colColor.slice(2, 8);
                if (colColor != "ffffff")
                    ctx.fillStyle = "#" + colColor;
                else
                    ctx.fillStyle = "#FFFD0A";
                ctx.save();
                ctx.translate(col * WIDTH, row * HEIGHT);
                drawImageBrick();
                ctx.restore();
            }
            ctx.restore();
        }
    }
}

// Draw bricks and manage gaphs between bricks
function drawImageBrick() {
    ctx.beginPath();
    ctx.rect(1, 1, WIDTH - WMargin, HEIGHT - HMargin);
    ctx.closePath();
    ctx.fill();
}

/// This function read saved image from server

/// Convert it into bitmap data and read pixel by pixel color

    XmlComment comment = xml.CreateComment("Image Color");
    root.AppendChild(comment);

    var path = HttpContext.Current.Server.MapPath("Images");                                                                    // Get server path for pick saved image
    var imgBitData = new Bitmap(path + "/" + ImgName);

    var imgWidth = imgBitData.Width;
    var imgHeight = imgBitData.Height;

    root.SetAttribute("RowNum", imgHeight.ToString());

    for (int i = 0; i < imgHeight; i++)
    {
        XmlElement Row_No = xml.CreateElement("Row_No" + i);
        Row_No.SetAttribute("ColNum", imgWidth.ToString());
        for (int j = 0; j < imgWidth; j++)
        {
            // Read the color from pallete
            Color pixelColor = imgBitData.GetPixel(j, i);                                                                       // Get pixel by pixel color of image
            XmlElement Row = xml.CreateElement("Row" + i);
            Row.SetAttribute("Color", pixelColor.Name.ToString());
            Row_No.AppendChild(Row);            
        }
        root.AppendChild(Row_No);
    }
    imgBitData.Dispose();                                                                                                       // Free image resource
    FileInfo myfileinf = new FileInfo(path + "/" + ImgName);                                                                    // Delete image after complete process
    myfileinf.Delete();
    GC.Collect();          
    return xml.OuterXml;
}