javascript - 将多个重叠图像保存为单个图像

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 是杯子，它来 self 的服务器，image2 是重叠的图像，应该是我用户的 Logo 。现在，场景是这样的:用户看到杯子，上传了他的标志，并想继续购买带有他标志的杯子。我的问题是在回顾页面中显示带有 Logo 的杯子，但由于其他原因我还需要将其保存在服务器上。

我该怎么办？我尝试用 Canvas 从坐标 0、0 开始绘制两个图像，但图像 2 覆盖图像 1。

编辑

我试过这样做:

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

我之前和一个 friend 一起做过，但是idid了上传用户图片的部分，然后将其捕获为base:64新图片，他负责将输出存储在服务器中。

我用过html2canvas

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

这是我们所做逻辑的一个例子:-

1. 抓取html内容
2. 然后保存为base:64
3. 在隐藏的输入中打印图像链接
4. 用户可以提交表单，最后你会收到数据

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

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