Question

我有两个重叠的图像，这里是一个示例：

这是HTML：

<div class='image-wrapper drag-area fade1' id='cupcategory-productname-1' style='width: 300px; top: 50%; left: 50%'>
    <div class='mydiv' id='drag-fronte'>
        <div id='logo-container-fronte' class='mydivheader logo'>
            <img id='cupcategory-productname-fronte' name='logo-container' style='width: 300px; top: 50%; left: 50%' src='../img/esempio_logo.png' onclick='saveImageWithLogo(this)'>
        </div>

    </div>
    <div>
        <img id='cupcategory-productname-fronte-fade' src='".$file."' alt='Candia Image' style='width:100%' class='image-one'>
    </div>
</div>

此代码由PHP生成。

这是CSS：

.image-wrapper {
            /*position: relative;*/
            z-index: 1;
            /*cursor:pointer;*/
            background-size:contain;

            background-repeat:no-repeat;
            display:inline-block;
            /*width:200px;height:140px;*/
            -webkit-transition: all 100ms ease-in;
               -moz-transition: all 100ms ease-in;
                    transition: all 100ms ease-in;
            -webkit-filter: brightness(1) grayscale(.5) opacity(1);
               -moz-filter: brightness(1) grayscale(.5) opacity(1);
                    filter: brightness(1) grayscale(.5) opacity(1);
        }
.image-wrapper .image-one {
            /*border: 1px solid black;*/
            /*position: relative;*/
            width: 100%;
        }

        .image-wrapper .image-fronte {
            /*width:151px;height:113px;*/
            /*width: 15%; height: 15%;*/
            /*width: 65px; height: 65px;*/
            /*border: 1px solid black;*/
            position: absolute;
            top: 53%;
            left: 50%;
            transform: translate(-50%, 0);
        }

        .image-wrapper .logo {
            /*width:151px;height:113px;*/
            /*width: 15%; height: 15%;*/
            /*width: 65px; height: 65px;*/
            /*border: 1px solid black;*/
            position: absolute;
            top: 53%;
            left: 50%;
            transform: translate(-50%, 0);
        }
.mydiv {
            top: 50%;
            left: 50%;
            position: absolute;
            z-index: 9;
            text-align: center;
            /*border: 1px solid #d3d3d3;*/
        }

        .mydivheader {
            padding: 10px;
            height: 100px;
            width: 100px;
            cursor: pointer;
            z-index: 10;
            /*border: 1px solid black;*/

        }

这是JS：

function saveImageWithLogo(web_element)
        {
            var c=document.getElementById("myCanvas");
            var image1 = web_element;
            var image2 = document.getElementById(web_element.id + '-fade');
            console.log(image2);
            var ctx=c.getContext("2d");
            var imageObj1 = new Image();
            var imageObj2 = new Image();
            imageObj1.src = image1.src;
            imageObj1.onload = function() {
               ctx.drawImage(imageObj1, 0, 0, 100, 100);
               imageObj2.src = image2.src;
               imageObj2.onload = function() {
                  ctx.drawImage(imageObj2, 0, 0, 300, 300);
                  var img = c.toDataURL("image/png");
                  image1.src = img;
                  //document.write('<img src="' + img + '" width="328" height="526"/>');
               }
            };
        }

image1是杯子，它来自我的服务器，image2是重叠的图像，应该是我的用户的徽标。现在，场景是这样的：用户看到杯子，上传他的徽标，并想继续购买带有徽标的杯子。我的问题是在摘要页面上显示带有徽标的杯子，但是由于其他原因，我还需要将其保存在服务器上。

我该怎么办？我尝试用画布绘制从坐标0、0开始的两个图像，但image2覆盖了image1。

修改

我试图这样做：

var image_wrapper = document.getElementsByClassName('image-wrapper')[0];
                console.log(image_wrapper);
                html2canvas(image_wrapper, {
                    onrendered: function (canvas) {
                        console.log('saving...');
                        console.log(canvas);
                      var myImg = new Image();
                      myImg.src = canvas.toDataURL();
                      document.getElementById("gardenia-mug-fronte-fade").appendChild(myImg);

                      $('#hidden_input').val(myImg.src);
                    },
                });

但是任何事情发生，该功能都无法启动。我错了吗？

编辑2

好了，现在我已经解决了：

var image_wrapper = document.getElementsByClassName('image-wrapper')[0];
            console.log(image_wrapper);
            html2canvas(image_wrapper).then(function(canvas) {
                    console.log(canvas);
                  var myImg = new Image();
                  myImg.src = canvas.toDataURL();
                  document.getElementById("gardenia-mug-fronte-fade").appendChild(myImg);
                  $('#hidden_input').val(myImg.src)
            });

但是我得到的是一张白色的图像。我需要使用“ image-wrapper”类在div中获取这两个图像，当然我必须按照上图所示获取它们

Answer 1

我以前和朋友一起做过，但是在上传用户图像的过程中没有进行任何设置，然后将其捕获为base：64新图像，然后他负责将输出存储在服务器中。

我使用了html2canvas

一个不错的javascript库，可将任何html内容捕获到图像中，并且其中有很多good options

这是我们所做的逻辑的一个示例：-

捕获html内容
然后将其另存为base：64
在隐藏的输入中打印图像链接
用户可以提交表格，最后您收到该数据

这是我为捕获图像并在隐藏的输入中打印输出链接而编写的一段代码

html2canvas($('.imgs_wrapper'), {

    onrendered: function (canvas) {
      var myImg = new Image();
      myImg.src = canvas.toDataURL();
      document.getElementById("image_reply").appendChild(myImg);

      $('.hidden_input').val(myImg.src)
    },
  });

将多个重叠的图像另存为单个图像

1 个答案: