context.draw canvasImmagini differenze tra i browser?

Sto affrontando un problema davvero bizzarro quando provo a ridimensionare e ritagliare un'immagine utilizzando l'API canvas HTML5 tra i vari browser.context.draw canvasImmagini differenze tra i browser?

In particolare, sto lavorando con il tentativo di trovare il centro di un'immagine e ritagliare un quadrato in base alla sua larghezza e l'altezza usando questi parametri come specified dal contesto API

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Ecco un esempio della codice che sto usando:

<!DOCTYPE html> 
<html> 
<body> 

<p>Image to use:</p> 
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream"> 

<p>Canvas:</p> 
<canvas id="myCanvas" width="150" height="150" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag. 
</canvas> 

<script> 
window.onload = function() { 
    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 
    var img = document.getElementById("scream"); 
    ctx.drawImage(img, 0, 25, 220, 277, 0, 0, 150, 188); 
} 
</script> 

</body> 
</html>

È possibile provare la demo qui: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage2

il c l'ode non mostra nulla sulla tela in Safari, tuttavia ridimensiona e ritaglia correttamente le immagini in Chrome.

Vorrei caricare le immagini ma StackOverflow ha una regola arbitraria che non mi consente di postare immagini finché non avrò una reputazione più alta!

Qualsiasi pensiero qui sarebbe apprezzato!

fonte

2015-04-14 Nitya Oberoi

E qual è la differenza, in quali browser? – adeneo

Su Chrome viene visualizzato correttamente e mi mostra l'immagine ritagliata/tagliata, ma su Safari e Firefox mostra un quadrato vuoto sulla tela. –

Ecco i collegamenti alle due immagini: Safari: http://cl.ly/image/3e051H2s2l0b Chrome: http://cl.ly/image/2M3H2J1U0X15 Ancora, non riesco ad aggiungerli al post , perché non ho abbastanza reputazione. –

Il problema in Safari potrebbe essere la sensibilità alle dimensioni dell'origine, l'area specificata come sorgente rispetto alla bitmap disponibile.

Ad esempio, la fonte nell'esempio dice:

//  source: x, y , w , h 
ctx.drawImage(img, 0, 25, 220, 277, ...

Questo significherà la bitmap deve essere di 25 + 277 pixel in altezza che ovviamente non è il caso come l'immagine in ingresso è solo 277 pixel in altezza.

Prova regolazione regione di source di essere all'interno dell'immagine, in questo caso riducendo l'altezza con y offset:

ctx.drawImage(img, 0, 25, 220, 277-25, 0, 0, 150, 188);

Per ritagliare sempre assicurarsi che la regione di source è all'interno dell'immagine, f.ex. se si desidera ritagliare 10 pixel da tutti i lati:

var iw = img.naturalWidth; 
var ih = img.naturalHeight; 
var crop = 10; 

ctx.drawImage(img, crop, crop, iw - crop*2, ih - crop*2, 0, 0, 150, 188);

fonte

2015-04-14 17:25:12 K3N

Ah, l'ha fatto! Ho solo dovuto ridurre l'altezza per l'offset che ho creato $ ctx.drawImage (img, 0, 25, 220, 252, 0, 0, 150, 188); e quello ha funzionato. Grazie! –

@NityaOberoi nessun problema! :) – K3N

context.draw canvasImmagini differenze tra i browser?

risposta

Problemi correlati