canvas.toDataURL（）不除Mozilla瀏覽器正常工作的Firefox

我已經開發了網站的優惠券發生器模塊創建HTML格式的優惠券，並使用JavaScript函數是canvas.toDataURL（）不除Mozilla瀏覽器正常工作的Firefox

function checkcanvas(id) { 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var data = "<svg xmlns='http://www.w3.org/2000/svg' width='437' height='262'>" 
     + "<foreignObject width='100%' height='100%'>" 
     + "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" 
     + $("#coupon_td").html() 
     + "</div>" 
     + "</foreignObject>" 
     + "</svg>"; 

    var DOMURL = self.URL || self.webkitURL || self; 
    var img = new Image(); 
    var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); 
    var url = DOMURL.createObjectURL(svg); 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
     DOMURL.revokeObjectURL(url); 
    }; 
    img.src = url; 

    if(id == 2) { 
     document.getElementById('base_64_img').value = canvas.toDataURL(); 
    } 
}

填充畫布HTML值

base_64_img只是一個隱藏的元素，所以我可以將數據發佈到我的php代碼中，並使用base64代碼創建圖像。

我面臨的最大問題是，這段代碼在Mozilla Firefox幾乎每個版本都能正常工作，但在Google Chrome瀏覽器中無法正常工作。

來源

2013-01-02 Mohammad Fakira

您是否收到任何錯誤？發生什麼事情不應該發生？（或什麼不應該發生？） – Cerbrus

嗨，我想重現你的錯誤，請檢查此網址http://jsfiddle.net/n3qSs/5/你的代碼在這裏工作。你的代碼有什麼不同嗎？ – thomasbabuj

@Cerbrus yess我的代碼只在Mozilla Firefox中工作，不在谷歌瀏覽器或任何其他瀏覽器中 –

在你的代碼中，你正在生成一個「SVG IMAGE」並試圖轉換成toDataURL（）。

var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});

這是問題所在，從這個URL toDataURL：

如果所請求的類型不是圖像/ PNG，返回的值開始與數據：圖像/ PNG，則所請求的類型不受支持。

在此fiddlecode如果您看到打印的輸出「data：image/png; base64」。它應該是「data：image/svg; base64」。

而不是創建svg圖像，使用canvas element and javascript to draw相關的橫幅圖像，如果你把輸出，然後嘗試複製&粘貼在您的瀏覽器。（它可能工作）。

檢查這個js插件叫SVG.toDataURL

希望這有助於。

來源

2013-01-02 11:44:39 thomasbabuj

canvas.toDataURL（）不除Mozilla瀏覽器正常工作的Firefox

回答

相關問題