canvas绘制SVG文字转图片后转码报错

Question

以下代码，chrome正常，Safari报错

var canvas = document.createElement("canvas");
canvas.width = 750;
canvas.height = 440;
var ctx = canvas.getContext("2d");
ctx.fillStyle = '#FFF';
ctx.fillRect(0,0,750,440);
ctx.fillStyle = '#777';
ctx.fillRect(8,80,410,270);

var img = new Image();
img.src = "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='190'%20height='170'%3E%3CforeignObject%20width='100%25'%20height='100%25'%3E%3Cdiv%20xmlns='http://www.w3.org/1999/xhtml'%20style='font-size:16px;font-family:Helvetica'%3E%3Cp%20style=%22width:%20190px;font-size:%2021px;line-height:%2042px;padding:0px;margin:0px%22%3E这里测试输！！？。。，～＊∑♢%3C/p%3E%3C/div%3E%3C/foreignObject%3E%3C/svg%3E";


img.onload = function(){
    ctx.drawImage(img,0,0,300,300,0,0,300,300);
    setTimeout(function(){
        try{
            alert(canvas.toDataURL("image/jpeg"));
        }catch(err){
            alert(err);
        }
        console.log(canvas.toDataURL("image/jpeg"));
    },2000);
}

Answer 1

应该是你img.src后面字符串拼接错误，我看到的好像有些乱码

你这段代码，我粘下来试了一下，控制台并没有canvas元素，报错显示尺寸错误什么的可能和这个有关。
你把代码改一下，改成这种试一下
<canvas id="myCanvas" width="750" height="440"></canvas>

var canvas = document.getElementById("myCanvas");