相关疑难解决方法(0)

我有一个带有外部图像的HTML div.(以下是一个示例,但在实际情况下我使用的是Amazon S3,因此无法在同一台服务器上下载和存储图像)目前我正在使用html2canvas将div转换为图像.但是,外部图像始终由空格替换.

我用来捕获图像的代码:

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
}); 

编辑: jsfiddle:https : //jsfiddle.net/0y2zxxL8/3/

我可以使用其他图书馆.我也可以在后端做到这一点.(我使用PHP + laravel 5作为后端)有没有办法用外部图像生成HTML div的"屏幕截图"？

更新编辑后,当前答案正在运行.然而,对于我的实际使用,将有多个图像,其位置由用户通过拖放设置.我仍然可以获得这个位置,但如果不能具体设置位置,对我来说会更好.

我有一个问题,我完全绝望...... :(

我正在使用HTML2Canvas创建包含许多内容的div的屏幕截图.

我已经阅读了许多类似的问题:问题1和问题2,我发现另一个问题与我的问题非常相似:

缓存图像的CORS策略

在Firefox中,一切正常,但在Chrome中,我遇到了CORS问题.我有这个错误:

来自" http://files.domain.ly "的图像已被跨源资源共享策略阻止加载:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:58943 '访问.

我在S3 Bucket中以这种方式配置了CORS:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>localhost</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>localhost:58943</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>files.domain.ly</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

该files.domain.ly是CloudFront的的CNAME.

HTML2Canvas代码:

html2canvas(document.getElementById('zoom_container'), {
  useCORS: true
}).then(function (canvas) {
  canvas.id = "image_canvas_render";
  document.body.appendChild(canvas);
  var img = canvas.toDataURL();
  img.id = "image_render_canvas";
});

为什么它适用于Firefox但不适用于Chrome或Safari？

S3中的文件是公共的,我可以直接通过任何Web浏览器访问,没有任何问题.

我试过在img标签中使用属性crossorigin ="anonymous",但它没有用.

非常感谢!!

编辑:有时它工作,有时没有...缓存问题？