我如何使用砖块绘制图像。图片可以通过上传者上传。

Question

我正在开发Web应用程序，它使用砖块绘制标志的砖块编辑器。直到我可以通过字符和数字绘制标志。现在我尝试在砖块编辑器上绘制图像。

我想要类似的东西：

upload this image

Draw this image like

Answer 1

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

步骤1.在html控件上绘制图像。

步骤2.将图像转换为base64并传递给ajax处理程序

函数GenerateImage（） {

    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();
}

在ajax处理程序上逐个像素地读取图像颜色。

步骤3.使用base64在服务器端临时绘制图像。

步骤4.逐个像素地读取图像颜色并存储到动态XML中。

步骤5.返回此xml并读取颜色并在砖上绘制。

/// This function read saved image from server

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

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

XmlDocument xml = new XmlDocument（）;

XmlElement root = xml.CreateElement（＆＃34; Color＆＃34;）; //根节点         xml.AppendChild（根）;

    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;
}