Chrome Rendern Canvas-Daten wie erwartet [JS/Canvas API]

Ich habe eine Funktion, die ich von einer Antwort auf Codegolf geändert habe (da die ursprüngliche Antwort nicht wirklich funktioniert).Chrome Rendern Canvas-Daten wie erwartet [JS/Canvas API]

Im Grunde nimmt es nur die Pixel eines Bildes, verwürfelt sie und gibt dann das verschlüsselte Bild auf die Seite aus.

Hier ist mein Code, wie es steht:

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
    <style> 
 
    img { 
 
     min-width: 500px; 
 
     min-height: 500px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <img src="test.jpg" alt="" /> 
 
    <script> 
 
    function scramble(el) { 
 
     "use strict"; 
 
     var V = document.createElement('canvas'); 
 
     var W = V.width = el.width, 
 
     H = V.height = el.height, 
 
     C = V.getContext('2d'); 
 

 
     C.drawImage(el, 0, 0); 
 

 
     var id = C.getImageData(0, 0, W, H), 
 
     D = id.data, 
 
     L = D.length, 
 
     i = L/4, 
 
     A = []; 
 

 
     for (; --i;) A[i] = i; 
 

 
     function S(A) { 
 
     var L = A.length, 
 
      x = L >> 3, 
 
      y, t, i = 0, 
 
      s = []; 
 

 
     if (L < 8) return A; 
 

 
     for (; i < L; i += x) s[i/x] = S(A.slice(i, i + x)); 
 

 
     for (i = 4; --i;) y = [6, 4, 7, 5, 1, 3, 0, 2][i], t = s[i], s[i] = s[y], s[y] = t; 
 

 
     s = [].concat.apply([], s); 
 

 
     return s; 
 
     } 
 
     var N = C.createImageData(W, H), 
 
     d = N.data, 
 
     A = S(A); 
 

 
     for (var i = 0; i < L; i++) d[i] = D[(A[i >> 2] * 4) + (i % 4)]; 
 

 
     C.putImageData(N, 0, 0); 
 

 
     el.src = C.canvas.toDataURL("image/jpeg", 1.0); 
 
    } 
 

 
    scramble(document.querySelector("img")); 
 
    </script> 
 
</body> 
 

 
</html>

nun das Problem mit Chrom ist, im Gegensatz zu FF, Kanten- und IE, die alle Display wie erwartet, Chrom eine gerade zeigt schwarzes Quadrat, wo das Bild sein sollte.

Ich kann nicht für das Leben von mir herauszufinden, warum, vor allem da alle anderen Browser funktionieren wie erwartet.

Hier ist ein Screenshot der anderen Browser zeigt feine und Chrom mit dem schwarzen Quadrat.

Wie Sie sehen können, alle anderen Browser sind in Ordnung, Chrom jedoch einfach nicht tun, wie erwartet, noch keine Konsole Fehler wirft oder sichtbaren verräterischen Grund für nicht funktioniert, das ist frustrierend.

Wie auch immer, Fragen, fragen Sie unten in den Kommentaren.

Quelle

2016-08-13 SkullDev

Es gibt keine CORS-Daten aber es ist ein lokales Bild geladen ...? – SkullDev

Haben Sie versucht, "scramble" beim "load" -Ereignis des '' -Elements aufzurufen? – guest271314

Es funktioniert! ... Warum zum Teufel muss das Onload-Ereignis jedoch ausgelöst werden, sollte der Parser das Bild in das DOM rendern, bevor das Skript ausgeführt wird, nein? – SkullDev

Versuchen scramble bei load Fall <img> Element Aufruf

document.querySelector("img").onload = function() { 
     scramble(this) 
    };

Quelle

2016-08-13 23:06:46 guest271314

@SkullDev plnrr http://pnnr.co/edit/1xVEBirVcro5kufVDfCU?p=preview – guest271314

Chrome Rendern Canvas-Daten wie erwartet [JS/Canvas API]

Antwort

Verwandte Themen