Javascript 下载画布图像Png Chrome/Safari

可以在Firefox中使用，但不能在Safari或Chrome中使用

 function loadimage()
    {
    var canvas = document.getElementById("canvas");

    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
       xmlhttp2=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
    }
       xmlhttp.onreadystatechange=function()
    {

    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    rasterizeHTML.drawHTML(xmlhttp.responseText, canvas);
    var t=setTimeout(function(){copy()},3000)
    }
  }
  xmlhttp.open("GET","/sm/<?=$sm[0];?>",true);
  xmlhttp.send();
}

function copy()
{
var canvas = document.getElementById("canvas");
var img    = canvas.toDataURL("image/png");

document.getElementById('dl').href = img;
document.getElementById('dl').innerHTML = "Download";
}

函数loadimage（）
{
var canvas=document.getElementById（“canvas”）；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
xmlhttp2=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
xmlhttp2=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
drawHTML（xmlhttp.responseText，canvas）；
var t=setTimeout（函数（）{copy（）}，3000）
}
}
open（“GET”，“/sm/”，true）；
xmlhttp.send（）；
}
函数副本（）
{
var canvas=document.getElementById（“canvas”）；
var img=canvas.toDataURL（“image/png”）；
document.getElementById（'dl'）。href=img；
document.getElementById（'dl'）.innerHTML=“下载”；
}

现在我没有写这个，所以我不知道太多的JavaScript。但是这个脚本在Firefox中可以运行。在Chrome中，getting:Uncaught安全错误：试图突破用户代理的安全策略。对于

toDataURL（“image/png”）

假设服务器上正确预处理了

，以下操作也应执行相同的操作，但可以跨浏览器工作：

function loadImage() {
    $.get("sm/<?=$sm[0];?>", function (data) {
        rasterizeHTML.drawHTML(data, $('#canvas')[0]);
        setTimeout(copy, 3000);
    });
}

function copy() {
    var $canvas = $("#canvas");
    var img = $canvas[0].toDataURL("image/png");
    $('#dl').attr('href', img).text("Download");
}

函数loadImage（）{
$.get（“sm/”，函数（数据）{
drawHTML（数据，$（'#canvas'）[0]）；
设置超时（复制，3000）；
});
}
函数副本（）{
var$canvas=$（“#canvas”）；
var img=$canvas[0].toDataURL（“image/png”）；
$（'#dl'）.attr（'href'，img）.text（“下载”）；
}

您是否通过使用本地文件进行测试？您是否愿意使用jQuery简化AJAX代码？Evan，对不起，我不知道您的意思。呃,对，sure@DerFlatulator是的，请尝试从服务器托管它，或者使用ip地址，而不是通过本地主机或文件协议访问它。嗯，我改为这样，下载是空白的。我看你有“sm/所以我创建了根url/sm/并且变量是正确的。这是一个HTML文件。但是在纠正路径时：我确保sm文件中没有任何错误，只添加了一些基本的html，但仍然无法工作。只是javascript不太好。我道歉。它确实有效。我刚在Firefox上测试过，但没有Chrome。仍然出现错误：请看这里的屏幕截图：图像存储在同一台服务器上吗？是的，它存储在同一台服务器上