Question

我正在尝试构建一个简单的页面，用户可以在其中创建电子贺卡。所以我有textarea和图像。当用户开始在textarea中键入时，文本将出现在图像上。这很有效。但现在我不想把这个文字和图像转换成一张图片（电子贺卡）。我试过了：

将html代码转换为canvas（但是span元素转换为block，这是不行的）
从头开始使用画布（但文字和颜色的质量很糟糕，在画布中按ENTER键在画布中被忽略）
将html转换为pdf然后转换为图像（绝对位置被忽略）

有没有更好的方法将HTML转换为图片？

HTML：

<div class="primer-1">
  <div class="slika-1">
    <img src="https://www.prophotoshow.net/blog/wp-content/uploads/2010/03/Doorway-to-Winter-600x400.jpg">
    <div>
      <span class="besedilo"></span>
    </div>
  </div>    

  <form>
    <div>Text:</div>
    <textarea rows="10" name="besedilo" id="besedilo"></textarea>
    <br>
    <input type="submit" name="potrditev" value="Generate image">
  </form>
</div>

JQUERY：

function primer_1_generate(){
    $('.primer-1 span.besedilo').removeAttr('style');
    visinaTeksta = $('.primer-1 span.besedilo').height();
    visinaParent = $('.primer-1 .slika-1 div').height();
    //we scale font size to fit parent
    if(visinaTeksta>visinaParent){
        do{
            f_size = $('.primer-1 span.besedilo').css('font-size');
            f_size = f_size.replace('px','');
            l_height = $('.primer-1 span.besedilo').css('line-height');
            l_height = l_height.replace('px','');
            f_size = f_size-1;
            l_height = f_size * 1.5714;
            $('.primer-1 span.besedilo').css({'font-size':f_size+'px','line-height':l_height+'px'});
            visinaTeksta = $('.primer-1 span.besedilo').height();
            visinaParent = $('.primer-1 .slika-1 div').height();
        }
        while (visinaTeksta>visinaParent);
    }
}

$(document).ready(function(){
    primer_1_generate();    
    $('.primer-1 textarea').on('keyup', function(e) {                       
        vrednost = $('.primer-1 textarea').val();
        vrednost = vrednost.split(' ').join('&nbsp;');
        vrednost = vrednost.split('\n').join('<br>');
        $('.primer-1 span.besedilo').html(vrednost);
        primer_1_generate();
    });
});

请参阅小提琴：https://jsfiddle.net/3357Ljxj/14/

从HTML创建电子贺卡

0 个答案: