在html2canvas

时间:2017-03-15 15:46:11

标签: javascript canvas html2canvas

我有一个很大的问题,我用html2canvas保存了一张图片但是在我的图片中有几个元素(文本)在旋转但是它在画布中不起作用。

这是我生成画布的代码:

    finalImgSrc = html2canvas($("#bou12"), {
         onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
             $('#img_val').val(canvas.toDataURL("image/png"));

        }

} 

这是我在屏幕上的照片

http://hpics.li/648c063

这是我的画布图片

http://hpics.li/050aa24

我真的需要帮助。

--------- ---------- EDIT

我保存在变量中因为我使用此代码放入php中的tcpdf

var urlwrite = $('#img_val').val();

           $.ajax({
                        type: "POST",
                        async: false,/
                        data: { urlwrite: urlwrite },
                        dataType: 'json', // dire que le type est en json
                        url: url+'/FunctionAdd/CSV2/PDFTest.php',
                        success:
                                function(data)
                                {

                                },

                    error: function(s){


                        alert("error")

                    }

                }, "json");

只是垂直文字不起作用

这是我的ID =“#bou12”

的html代码
<div id="bou12" style="height:500px;"><div id="imageParent" style="position:absolute;">

<img src="http://mad.cerp.be/cerp/V14/wp-content/uploads/2016/12/ACCROCHE-CANNE-GRENOUILLE-OA889-631135.jpg" class="attachment-200x200 size-200x200 img-responsive" alt="SONY DSC" srcset="http://mad.cerp.be/cerp/V14/wp-content/uploads/2016/12/ACCROCHE-CANNE-GRENOUILLE-OA889-631135.jpg 1205w, http://mad.cerp.be/cerp/V14/wp-content/uploads/2016/12/ACCROCHE-CANNE-GRENOUILLE-OA889-631135-263x300.jpg 263w, http://mad.cerp.be/cerp/V14/wp-content/uploads/2016/12/ACCROCHE-CANNE-GRENOUILLE-OA889-631135-768x875.jpg 768w, http://mad.cerp.be/cerp/V14/wp-content/uploads/2016/12/ACCROCHE-CANNE-GRENOUILLE-OA889-631135-899x1024.jpg 899w" sizes="(max-width: 1205px) 100vw, 1205px" style="max-height: 500px;" height="1373" width="1205">

</div>
<div>
</div>
<div class="element1" style="position: absolute; margin-left: 85%; margin-top: 50%; writing-mode: vertical-lr; letter-spacing:  -3px; text-orientation: upright;" id="elementimg1">ezrezrezrez</div>
<div class="element2" style="position: absolute; margin-left: 1%; margin-top: 50%; writing-mode: vertical-lr; letter-spacing:  -3px; text-orientation: upright;" id="elementimg2">ezrzerezrezr</div>
</div>

0 个答案:

没有答案