kineticjs，本地 svg，drawHitFromCache，Internet Explorer 10 SecurityError

Question

我使用了标准的 drawHitFromCache 演示 (http://www.html5canvastutorials.com/kineticjs/html5-canvas-pixel-detection-with-kineticjs/)，并将其中一张图像替换为 .svg 图像（灰色多边形）。

现场演示：http://preview.yw.sk/kineticDrawHit/

来源：http://preview.yw.sk/kineticDrawHit/kineticDrawHitSvg.rar

fiddle : http://jsfiddle.net/5cpyj/ - 但由于需要本地图像，因此无法正常工作。

所以我唯一改变的是 src 到 svg 图像并添加了“drawHitFromCache”，它在 chromefirefox 中运行良好，但在 Internet Explorer 中我得到：

Kinetic warning: Unable to draw hit graph from cached scene canvas. SecurityError 

但我使用本地图像 (monkey.svg) 没有外部资源，为什么它会弹出 SecurityError ？由于错误图像被绘制但对鼠标输入没有反应。使用 png 文件就可以了。

Answer 1

jq.browser - 已从 jquery 中删除，它现在作为 jquery 的插件，+ 你需要 canvg 库来发挥作用。对于 canvg，您至少需要 207 修订版并修复绘制错误。 https://code.google.com/p/canvg/source/detail?r=207 , 可以下载最新安装的svn (http://canvg.googlecode.com/svn/trunk/)

警惕浏览器IE10+、Safari、Ipad等安全错误的解决方案，解决方案使用canvg从svg图像制作当前分辨率的png图像。

var pngFallbackEnabled = null;
Project.pngFallBackCheck = function () {
    if (pngFallbackEnabled == null) {
        if (typeof enableSvgPngFallback != 'undefined' && enableSvgPngFallback == true && typeof jq.browser != 'undefined' && (jq.browser.mobile == true || jq.browser.msie == true || jq.browser.mozilla == true)) {
            pngFallbackEnabled = true;
            console.log('Png fall-back enabled');
        } else {
            pngFallbackEnabled = false;
        }
    }
    return pngFallbackEnabled;
};


var cachedPngImages = [];
var currentGameCanvasRatio = null;
/** Require Canvg library*/
Project.createPngImageFromSvgImage = function (svgLink, width, height, cacheIndex) {

    var extension = svgLink.split('.').pop();
    if (extension == "png" || extension == "jpg" || extension == "gif" || extension == "jpeg" || extension == "gif") {
        return svgLink;
    }

    if (typeof cacheIndex != 'undefined' && typeof cachedPngImages[cacheIndex] != 'undefined') {
        return cachedPngImages[cacheIndex];
    }

    var canvas = document.getElementById("pngDrawerCanvas");
    var canvasContext = canvas.getContext('2d');

    if (canvas == null) {
        var canvasElement = document.createElement('canvas');
        canvasElement.setAttribute("id", "pngDrawerCanvas");
        canvasElement.setAttribute("width", "200");
        canvasElement.setAttribute("height", "200");
        canvasElement.setAttribute("style", "display: none");
        document.body.appendChild(canvasElement);
        canvas = document.getElementById("pngDrawerCanvas");
    }

    if(currentGameCanvasRatio == null){
        currentGameCanvasRatio = window.module.canvas.getCurrentRatio(); /*custom function for ratio by current screen resolution*/
    }

    var imageWidth = Math.floor(width * currentGameCanvasRatio);
    var imageHeight = Math.floor(width * currentGameCanvasRatio);

    canvas.width = imageWidth;
    canvas.height = imageHeight;
    jq('#pngDrawerCanvas').css('width', imageWidth);
    jq('#pngDrawerCanvas').css('height', imageHeight);

    //canvg('pngDrawerCanvas', svgLink, 0, 0);
    canvasContext.drawSvg(svgLink, 0, 0, imageWidth, imageHeight);

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

    if (typeof cacheIndex != 'undefined') {
        cachedPngImages[cacheIndex] = img;
    }

    return img;
};