kineticjs, local svg, drawHitFromCache, Internet Explorer 10 SecurityError

Question

I took standard drawHitFromCache demo (http://www.html5canvastutorials.com/kineticjs/html5-canvas-pixel-detection-with-kineticjs/) , and replaced one of images with .svg image (gray polygon) .

live demo : http://preview.yw.sk/kineticDrawHit/

source : http://preview.yw.sk/kineticDrawHit/kineticDrawHitSvg.rar

fiddle : http://jsfiddle.net/5cpyj/ - but it will not work since of local images need.

So only thing i changed is src to svg image and added 'drawHitFromCache', it works good in chromefirefox, but in internet explorer i get :

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

but i use local image (monkey.svg) no external resource, why it pops SecurityError ? Since of error image is drawn but does not react on mouse enter. With png files its all right.

well same problem on Ipad Safari, from issue https://github.com/ericdrowell/KineticJS/issues/950 its clear this is ie problem and will be not implemented, adviced is to use png instead of svg. An idea is to redraw svg (colors) then draw it to hidden canvas next generate an png from it, and this process repeat on any resize. Not sure with performance speer or implementation for now thought. — Jiro Matchonson, Jun 19 '14 at 17:22

score 0 · Accepted Answer · answered Jul 01 '14 at 12:39

jq.browser - was removed from jquery, its now as plugin to jquery , + you need canvg library fo do the magic . For canvg you need at leat 207 revision with fixed draw bug . https://code.google.com/p/canvg/source/detail?r=207 , can download latest with svn installed (http://canvg.googlecode.com/svn/trunk/)

Solution to security error in warious browsers IE10+ , Safari, Ipad etc, solution use canvg to make png images for current resolution from svg images .

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;
};

kineticjs, local svg, drawHitFromCache, Internet Explorer 10 SecurityError

1 Answers1