Question

这是问题，

我需要使用.svg文件创建一个图像文件。我有一个应该绘制svg的函数，然后，我从画布中将它保存为图像文件。

我的绘图功能是：

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

ctx是画布2d上下文， rawSVG是svg的内容控制台提供了这样的网址：

blob:http://myWebsite.net/521a72ea-3156-4290-ae16-025a8f8275bc

但img ONLOAD永远不会触发...所以我没有回调和功能停止。我不是在本地工作，所以问题不在于获取本地文件...

感谢您的帮助！

Answer 1

使用addEventListener的{{1}} intead（错误输入的内容，请参见末尾）属性：

onLoad

您可以使用数据URL而不是blob，但这取决于您：

function drawInlineSVG(ctx, rawSVG, callback) {
    var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"});
    var domURL = self.URL || self.webkitURL || self;
    var url = domURL.createObjectURL(svg);
    var img = new Image();
    img.src = url;
    img.addEventListener('load', function () {
        console.log("image onload");
        ctx.drawImage(this, 0, 0);     
        domURL.revokeObjectURL(url);
        callback(this);
    });
}

http://jsfiddle.net/smkuLrbu/

如果它不能正常工作，则可能是您的SVG文件。它必须至少包含function drawInlineSVG(ctx, rawSVG, callback) { var img = new Image(); img.src = 'data:image/svg+xml;utf8,' + rawSVG; img.addEventListener('load', function () { console.log("image onload"); ctx.drawImage(this, 0, 0); domURL.revokeObjectURL(url); callback(this); }); }标记中的以下属性：

<svg>

如果您想坚持使用该属性，请使用不具有大写字母的正确版本：<svg xmlns="http://www.w3.org/2000/svg" ...，但您确实应该使用img.onload。

Answer 2

您需要在设置网址之前设置onload 。

否则，在您设置回调时，网址可能已经加载。

试试这个：

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

Answer 3

在此处查看演示：评论了一些我没有的内容。

  function drawInlineSVG(ctx) {
	   // var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"});
	    var domURL = self.URL || self.webkitURL || self;
	    var url = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
	    console.log("URL : "+url);
	    	var img = new Image();
	    	  img.onload = function(){
	    	    console.log("image onload");
                   alert('inside image onload');
		        ctx.drawImage(this, 0, 0);     
		        domURL.revokeObjectURL(url);
		        callback(this);
	    	  };
	    	  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';

	    console.log("URL : "+url);
	}

var canvas = document.getElementById('canvas');
	  var ctx = canvas.getContext('2d');
	  drawInlineSVG(ctx);

 <canvas id="canvas" width="500px" height="400px"></canvas>

图像onload不能与img和Blob一起使用

3 个答案: