html2canvas 调整图片大小并下载

Posted 2023-03-10

【中文标题】html2canvas 调整图片大小并下载

【英文标题】：html2canvas resize image and download

【发布时间】：2021-05-15 21:31:42

【问题描述】：

我有下面的代码，我需要这个生成的图像，在 1080x1080 中生成，我该如何继续，然后以 1080x1080px 下载图像，如何增加我的代码来实现它? 目前它生成 537x537px 的画布，然后以该尺寸下载，但我希望它以 1080x1080 和出色的屏幕截图质量完成

<div class="formulario">
    <form id="geradorPublicacao" name="geradorPublicacao">
        <label for="frase">Escreva aqui o que é liberdade para você e gere seu próprio pensamento para compartilhar nas
            redes sociais:</label>
        <textarea id="input-frase" name="frase" rows="4" cols="50" maxlength="150"></textarea>

        <label for="nome">Nome</label>
        <input type="text" id="input-nome" placeholder="Seu nome" required>

        <label for="email">Email</label>
        <input type="email" id="email" placeholder="[e-mail]" required>

        <label for="select">Você já conhece a Sankhya?</label>
        <select name="select" id="select">
            <option value="Sim, sou colaborador">Sim, sou colaborador(a)</option>
            <option value="Sim, sou cliente">Sim, sou cliente</option>
            <option value="Não, mas quero conhecer">Não, mas quero conhecer</option>
        </select>

        <button id="btn-Preview-Image" type="submit">Criar publicação</button>
    </form>

    <div id="teste-imagem">
        <span id="input-nome"></span>
        <span id="input-frase"></span>
    </div>
    <div id="previewImage" style="display:none;"></div>

</div>

<script src="https://www.sankhya.com.br/wp-content/themes/understrap-child/html2canvas.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"-->
<!--    integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="-->
<!--    crossorigin="anonymous"></script>-->

<script>

jQuery(function($)

    var element = $("#teste-imagem"); // global variable
    var getCanvas; // global variable
    
    $('#geradorPublicacao').submit(function(e)
        e.preventDefault();
        
        var inputNome = $('#input-nome').val();
        var inputFrase = $('#input-frase').val();
        var scrollPos = document.body.scrollTop;
        

        $("#conteudo-nome").html(inputNome);
        $("#conteudo-frase").html(inputFrase);

        html2canvas(element, 
            onrendered: function (canvas) 
                $("#previewImage").append(canvas);
                getCanvas = canvas;
            
        );
        // return false;
    )

    // $("#btn-Preview-Image").on('click', function (e) 
    //     e.preventDefault();

    // );
    
    $("#btn-Convert-Html2Image").on('click', function (e) 
        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", "liberdade.png",).attr("href", newData);
    );

);

</script>

【参考方案1】：

html2canvas 有一组选项。见http://html2canvas.hertzen.com/configuration/

目前您设置的唯一选项是在画布完成渲染时运行的函数。您没有设置宽度或高度或给它一个画布，所以它正在为您创建一个。

您可以尝试为选项集添加高度和宽度：

html2canvas(element,  width: 1080, height: 1080,
    onrendered: function (canvas) 
        $("#previewImage").append(canvas);
        getCanvas = canvas;
    

【讨论】：

你好，你好吗？我只添加了返回空屏幕截图的选项，它会与 div 的大小有关吗？因为我的 div 我做的截图小于 1080x1080