7
Esistono software/servizi per la conversione automatica di un formato di immagine tipico (png, bmp, jpg/gif pari) su Canvas/HTML5?Immagine su Canvas/Conversione HTML5
A
risposta
9
Non hai bisogno di alcuna conversione, basta usare l'immagine (sia nuovo, URL o uno nel DOM) di
canvas.drawImage(image, dx, dy)
canvas.drawImage(image, dx, dy, dw, dh)
canvas.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
(tratto da here).
Vedere il tutorial su developer.mozilla.org.
12
Ecco uno strumento che genera codice JavaScript per disegnare l'immagine su tela: http://lab.abhinayrathore.com/img2canvas/
+2
Grazie per aver effettivamente risposto alla domanda dell'OP. Le altre risposte su questa pagina sono irrilevanti. –
+1
Questo strumento fa il lavoro, ma è anche davvero inefficiente. Fa un fillRect per ogni pixel e non riconosce linee continue o caselle affatto, molto meno cerchi o altre forme. –
1
È possibile utilizzare il sito di cui sopra, ma qui è il codice corrispondente:
function convertImage(canvas, callback) {
var image = new Image();
image.onload = function(){
callback(image);
}
image.src = canvas.toDataURL("image/png");
}
Inoltre, ho mettere insieme un working jsfiddle demo.
+1
Converte una tela in un'immagine, ma la domanda era di convertire un'immagine in una tela. –
0
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// draw cloud
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = '#0000ff';
context.stroke();
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
</script>
</body>
</html>
1
W3School ha la risposta: http://www.w3schools.com/tags/canvas_drawimage.asp
window.onload = function() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
};
s/tela/contesto –
cosa succede se si desidera modificare i dati dei pixel dell'immagine utilizzando tela? – ina