Question

我有这个代码可以正常工作一个块并将div元素保存为图像。我正在使用html5画布。如果我有n个具有唯一ID的div这样的div，我如何实现将id和其他变量传递给jquery。

以下是我的代码： -

<body>
<div class="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>

    </div>
    <input class="btn-Preview-Image" type="button" value="Preview"/>
    <a class="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div class="previewImage">
    </div>

<div class="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>

    </div>
    <input class="btn-Preview-Image" type="button" value="Preview"/>
    <a class="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div class="previewImage">
    </div><div class="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>

    </div>
    <input class="btn-Preview-Image" type="button" value="Preview"/>
    <a class="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div class="previewImage">
    </div><div class="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>

    </div>
    <input class="btn-Preview-Image" type="button" value="Preview"/>
    <a class="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div class="previewImage">
    </div><div class="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>

    </div>
    <input class="btn-Preview-Image" type="button" value="Preview"/>
    <a class="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div class="previewImage">
    </div><div class="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>

    </div>
    <input class="btn-Preview-Image" type="button" value="Preview"/>
    <a class="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div class="previewImage">
    </div><div class="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>

    </div>
    <input class="btn-Preview-Image" type="button" value="Preview"/>
    <a class="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div class="previewImage">
    </div><div class="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>

    </div>
    <input class="btn-Preview-Image" type="button" value="Preview"/>
    <a class="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div class="previewImage">
    </div><div class="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>

    </div>
    <input class="btn-Preview-Image" type="button" value="Preview"/>
    <a class="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div class="previewImage">
    </div>


<div class="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>

    </div>
    <input class="btn-Preview-Image" type="button" value="Preview"/>
    <a class="btn-Convert-Html2Image" href="#">Download</a>
    <br/>
    <h3>Preview :</h3>
    <div class="previewImage">
    </div>



<script>
$(document).ready(function(){
var getCanvas; // global variable
 $(".btn-Preview-Image").on('click', function () {
    element=$('.html-content-holder');
//  getCanvas;
    preview= element.find(".previewImage");
     html2canvas(element, {
     onrendered: function (canvas) {
                $(".previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });

    $(".btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $(".btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});

});

</script>
</body>

Answer 1

<强>标记：您必须为每个重复的组添加父div并将ID更改为class，并使用<div class="block-holder"> <div class="html-content-holder" style=""> <strong>Codepedia.info</strong> <hr/> <h3 style="color: #3e4b51;"> Html to canvas, and canvas to proper image </h3> </div> <input class="btn-Preview-Image" type="button" value="Preview" /> <a class="btn-Convert-Html2Image" href="#">Download</a> <br/> <h3>Preview :</h3> <div class="previewImage"> </div> </div>进行查询。

$(document).ready(function() {
    $(".btn-Preview-Image").on('click', function() {
    parent = $(this).closest('.block-holder');
    element=parent.find('.html-content-holder')
    //  getCanvas;
    console.log(parent,element);
    preview = element.find(".previewImage");
    html2canvas(element, {
      onrendered: function(canvas) {
        $(".previewImage").html(canvas);

      }
    });
  });

  $(".btn-Convert-Html2Image").on('click', function() {
   parent = $(this).closest('.block-holder');
   getCanvas = parent.find('canvas')[0];
   console.log(parent,getCanvas)
    var imgageData = getCanvas.toDataURL("image/png");
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $(".btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
  });

});

<强>脚本

preview= element.find(".previewImage")

您可以看到getcanvas，对{{1}}变量使用相同的技巧，否则。

这是小提琴https://jsfiddle.net/5cfz2ufp/10/

将锚点ID和按钮ID传递给jquery

1 个答案: