Повысить качество и размер изображения с помощью Html2Image - PullRequest
Новая
       19

Повысить качество и размер изображения с помощью Html2Image

0 голосов
/ 01 мая 2019

, когда я пытаюсь преобразовать div в изображение, используя Html2Image, качество изображения будет очень плохим и нечетким. поэтому хочу повысить качество изображения

Я сделал несколько поисков в Интернете, чтобы найти решение этой проблемы, и я попытался дать максимальный размер качества в toDataURL, который имеет кольцо между 0 .. 1, но все еще не дал хорошего качества. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 400px; height: 250px;
        padding-left: 25px; padding-top: 10px;">
          <div class="col-lg-6 col-md-10 col-sm-12 portfolio-item" style="margin-left: auto; margin-right: auto">
                <div class="card">
                    <div class="card-body">
                        <asp:Image ID="Image1" ImageUrl="X7s53u.jpg" class="col-lg-3" runat="server" Width="100" Height="150" Style="margin-top: 10px; float: left; border: 1px solid #808080" />
                        <div style="float:right;width:70%">
                            <div style="margin-bottom:4px; color:red;text-align: right;">
                                <img src="Logo.png" style="height:50px; width:50px; float: right;" />
                                موسسه <br />
                                <span style="font-size:9px">Fellowship Fund For Employees of 000000 </span>
                            </div>
                            <div style="background-color:red;color:white; padding:2px 10px 2px 10px; margin-top:4px">
                                <b style="text-align: right;">بطاقة عضوية</b>
                                <b style="float: left;">Membership Card</b>
                            </div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
    </div>

    <input id="btn-Preview-Image" type="button" value="Preview" />
    <a id="btn-Convert-Html2Image" href="#">Download</a>

    <br />
    <h3>Preview :</h3>
    <div id="previewImage">
    </div>

 <script charset="utf-8" type="text/javascript">
$(document).ready(function () {
    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable

    $("#btn-Preview-Image").on('click', function () {
        html2canvas(element, {
            onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;

            }
        });
    });

    $("#btn-Convert-Html2Image").on('click', function () {
     //   var imgageData = getCanvas.toDataURL("image/png", 9.5);
        var imgageData = getCanvas.toDataURL("image/png");
        // Now browser starts downloading it instead of just showing it
        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
        $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
    });
});
</script>

Я хочу повысить качество и размер изображения, что мне делать?

...