svgの背景イメージとしてのデータuriがサファリライブサイトのキャンバスに変換されていない

Question

base64 pngデータURIを持つ1つのsvgを背景イメージに変換したいと思います。

ローカルマシン上のfirefox、chrome & safariで作業しています。 しかし、ライブサイトでのサファリでは動作しません。

サファリがデータを許可していないライブサイトに問題はありますか？

助けてください。

var svgContainer = d3.select('#chart') 
        .append("svg") 
        .attr("width", 500) 
        .attr("height", 500) 
        .attr("style", "background-color: #f6f6f6;background-image: url('" + stress_shifter.chart_background_image_base64 + "');background-repeat: no-repeat;background-position: 50%;") 
        .attr("id", "stress_shifter_svg"); 
var svgString = new XMLSerializer().serializeToString(document.querySelector('svg')); 

     var canvas = document.getElementById("canvas"); 
     var ctx = canvas.getContext("2d"); 
     var DOMURL = self.URL || self.webkitURL || self; 
     var img = new Image(); 
     //var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); 
     var svg = new Blob([svgString], {type: "image/svg+xml"}); 

     var url = DOMURL.createObjectURL(svg); 

Answer 1

このソリューションは、あなたの質問に欠けているいくつかのコードは、おそらくあり

var svgString = new XMLSerializer().serializeToString(document.querySelector('svg')); 

    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    var DOMURL = self.URL || self.webkitURL || self; 
    var img = new Image(); 
    //var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"}); 
    var svg = new Blob([svgString], {type: "image/svg+xml"}); 
    var url = DOMURL.createObjectURL(svg); 

    var png = ''; 
    var emailConfirmationMessage = ''; 
    var img1 = new Image(); 

    img.onload = function() { 
     ctx.drawImage(img1, 136, 136); 
     ctx.drawImage(img, 0, 0); 

     sendEmail(canvas,DOMURL); 

    }; 

    img1.onload = function(){ 
     img.src = url; 
    }; 
    img1.src = 'chart1.png';