Question

首先会描述应用程序。

我有画画区。我可以添加不同的图像并对它们应用少量滤镜（亮度，色调旋转等）。编辑完成后，我应该将结果保存为服务器作为图像。

在调查期间，我发现了一些可能的解决方案

使用fabricjs过滤器。问题是性能不如我所需，特别是在移动设备上。
使用css3过滤器。我们的想法是使用css3过滤器作为接口，然后在渲染最终结果时使用fabricjs过滤器。这个想法被拒绝了，因为无论如何我们需要为其他浏览器提供另一种解决方案，并且很难使过滤器的工作方式相同。
使用svg过滤器。我在下一个实现中停止了svg过滤器：

3.1我在绘图区域添加svg元素并对其应用svg过滤器。

3.2当用户尝试保存结果时，我生成svg xml并创建base64图像
```
'data:image/svg+xml;base64,' + window.btoa(this.getSvg());
```
3.3我在画布上画这个svg。并尝试保存结果
```
resultCanvas.toDataURL()
```

此解决方案几乎适用于所有具有良好性能的现代浏览器。但它不适用于ios safari，因为canvas在绘制svg后才会写入，我收到安全错误，DOM异常18。

为了防止这种情况，我想将svg保存到服务器，并从画布上的服务器中绘制图像。但它也行不通。

我写了一个小测试：

Tests.supportSvgToPng = function(){
    var canvas = document.createElement('canvas'),
        svgSrc = 'images/facebook.svg',
        support = true;

    var image = new Image();
    image.src = svgSrc;

    document.body.appendChild(canvas);
    context = canvas.getContext("2d");

    try {
        context.drawImage(image, 0, 0);
        canvas.toDataURL();
    } catch(e) {
        console.log(['supportSvgToPng', e.message]);
        support = false;
    }

    canvas.parentNode.removeChild(canvas);

    return support;
}

我如何规避这一限制？

html5 canvas只有在ios safari中绘制svg后才能写入

0 个答案: