我正在使用asp.net-core和angular 4模板构建一个web应用程序,并使用svg edit允许用户在移动设备上绘制/加载/保存图像,特别是在ios设备/android设备上。svg编辑可以很好地满足我的需要,但是我在ios设备上遇到了一个问题,即生成/转换用户绘图(svg)为另一种格式(png base64),作为保存过程的一部分,该格式将发布到api。

我使用以下代码使用html画布将svg转换为png base64

SVG编辑器.js

editor.getDrawingPngBase64 = function (svgString) {

if (!$('#export_canvas').length) {

$('', { id: 'export_canvas' }).hide().appendTo('body');

}

var canvas = $('#export_canvas')[0];

canvas.width = $("#svgcanvas").width(); // svgCanvas.contentW;

canvas.height = $("#svgcanvas").height(); // svgCanvas.contentH;

var ctx = canvas.getContext("2d");

var promise = new Promise(function (resolve, reject) {

function drawInlineSVG(ctx, rawSVG, callback) {

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

domURL = self.URL || self.webkitURL || self,

url = domURL.createObjectURL(svg),

img = new Image;

img.onload = function () {

ctx.drawImage(this, 0, 0);

var base64 = canvas.toDataURL("image/png");

resolve(base64);

};

img.src = url;

}

drawInlineSVG(ctx, svgString);

});

return promise;

}

不过,这只适用于使用chrome或safari浏览器的ios设备。onload方法没有被调用。我猜svg图像可能太大,无法转换。

我也试过这种方法,但也不可靠…

editor.getDrawingPngBase64 = function (svgString) {

if (!$('#export_canvas').length) {

$('', { id: 'export_canvas' }).hide().appendTo('body');

}

var canvas = $('#export_canvas')[0];

canvas.width = svgCanvas.contentW;

canvas.height = svgCanvas.contentH;

var ctx = canvas.getContext("2d");

var promise = new Promise(function (resolve, reject) {

function webkitNamespaceBugWorkaround(pText) {

var lText = pText.replace(/\ xlink=/g, " xmlns:xlink=", "g");

lText = lText.replace(/\ href=/g, " xlink:href=", "g");

return lText;

}

canvg(canvas, webkitNamespaceBugWorkaround(svgString), {

renderCallback: function () {

var base64 = canvas.toDataURL("image/png");

resolve(base64);

}

});

});

return promise;

}

我也试过canvg库,但它也不可靠

这些方法由angular4组件调用。

public save() {

const svgString: String = svgEditor.getSvgString();

(window).svgEditor.getDrawingPngBase64(svgString).then(pngBase64: string) => {

// Call api and save the image

}

}

我在客户端将svg转换为png的原因是,我无法在dotnet核心解决方案上安装c svg呈现库(

https://www.nuget.org/packages/Svg/

)

请帮助!