Question

实际上我的网格div元素包含许多html标签，如<div>，<p>, <img>并将其转换为画布，然后 base64 ，以便通过php保存在服务器上。

任何人都可以帮助我摆脱这个问题。 here是我的代码https://jsfiddle.net/manish1706/ujx6rh5j/3/

我无法拥有<img />标记中的图片。

Answer 1

来自here：

脚本使用的所有图像都需要位于same origin
下

因此，由于您的图像是跨源的，因此Html2Canvas无法访问它。

Here为此撰写了proxy用法。

Answer 2

首先感谢@Justinas指出交叉问题，我用了

html2canvas($(".frameGrid"),
        {
            useCORS: true,
            "proxy":"http://xxxxxx.com/xxxx/timthumb.php", // optional (and if you are not writing this so have to all origin by server side)
            onrendered: function(canvas) {
            var img = canvas.toDataURL("image/png");
            $('#img-out').append('<img src="'+img+'"/>');
        }
    });

以及将来使用

header('Access-Control-Max-Age:' . 5 * 60 * 1000);
header("Access-Control-Allow-Origin: *");
header('Access-Control-Request-Method: *');
header('Access-Control-Allow-Methods: OPTIONS, GET');
header('Access-Control-Allow-Headers: *');
header("Content-Type: application/javascript");

在我的跨服务器端php文件中。

从canvas转换为png <img/>或base64不起作用

2 个答案: