Question

我正在使用html2canvas捕获特定div的屏幕截图，它工作正常但不能捕获该div中的图像

我的脚本代码如下：

<script type="text/javascript">

var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable

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

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

这是我面临的现场问题的链接，通过点击页面上出现的预览按钮来检查是否向下滚动了一点点 https://www.citystatebeads.com/pages/example-page

Answer 1

直接html2canvas上的README：

它也不会神奇地规避任何浏览器内容政策限制，因此渲染跨源内容需要proxy才能将内容传送到same origin。

由于您的图片位于https://cdn.shopify.com且原作为https://www.citystatebeads.com，因此无法呈现图片。

html2convas没有捕获图像，版本4.1

1 个答案: