1

我有一个页面，我正在获取动态生成的 html 部分。

$viewData['html'] = '<div class="row martop26"><div class="col-xs-12 co.... </div>';
$this->load->view('advertise/advertise_preview',$viewData);

这个“Advertise_preview”是一个 html 页面，我在其中单独获取该 html 部分。

$viewData['html'] 是巨大的 html 部分。几乎就像存储在变量中的另一个页面。

现在我想要做的是，我想将客户端的那个 html 部分转换为图像，而不是将其存储到数据库中，我想在一个框中显示生成的图像。

在那个盒子上，我正在应用 jquery.zoom.js来缩放悬停时的图像。

我已经使用过 html2canvas。这还不够我的要求。

html2canvas的问题如下：

  1. 我必须隐藏我想要截图的 html 部分。其中html2canvas不接受隐藏部分将其转换为画布
  2. 第二个问题是它生成的图像具有黑色背景或透明。

如果以上两个问题都解决了，那么我的工作就完成了。否则，请给我一些其他的 JS 或任何其他转换的想法。

我从 html 转换为画布的代码如下：

$(document).ready(function()
{
var hello = $("#none"); // Whole html part in hello variable
html2canvas(hello, {
      onrendered: function(canvas) {
        // hello.hide();            
        // document.body.appendChild(canvas);
        // var cc = canvas.getImageData();
        // var can = document.getElementById('canvas1');
        /*var ctx = canvas.getContext('2d');

        ctx.fillRect(50,50,50,50);*/

        var img = new Image();
        img.src = canvas.toDataURL();
        // document.body.appendChild(img);
        // var jpegUrl = canvas.toDataURL("image/jpeg");
        // console.log(jpegUrl);

        $("#zoom").children().attr({
            src: img.src
        });
        $('.zoom').zoom();
      }
    });
});

你们一直对我很有帮助。所以非常感谢。

4

0 回答 0