运动10，本地svg，drawHitFromCache，Internet 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

小提琴：http://jsfiddle.net/5cpyj/ -但它不会工作，因为当地的图像需要。

因此，我只更改了src到svg图像，并添加了'drawHitFromCache'，它在chromefirefox中工作得很好，但在互联网浏览器中我得到：

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

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

Answer 1

jq.browser -从jquery中移除，它现在是jquery的插件，+您需要画布库才能做到这一点。对于拉票，你需要至少207修订与固定的抽签错误。https://code.google.com/p/canvg/source/detail?r=207，可以下载最新安装的svn (http://canvg.googlecode.com/svn/trunk/)

解决各种浏览器( IE10+、Safari、Ipad等)中的安全错误问题，解决方案使用画布从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;
};