7
Czy istnieje oprogramowanie/usługi do zautomatyzowanej konwersji typowego formatu obrazu (png, bmp, jpg/gif even) na Canvas/HTML5?Konwersja obrazu na płótno/HTML5
A
Odpowiedz
9
Nie trzeba żadnej konwersji, wystarczy użyć obrazu (zarówno nowych, przez URL lub któregokolwiek z DOM) przez
canvas.drawImage(image, dx, dy)
canvas.drawImage(image, dx, dy, dw, dh)
canvas.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
(wzięte z here).
Zobacz samouczek na stronie developer.mozilla.org.
12
Tutaj jest narzędziem, które generuje kod JavaScript, aby narysować obraz na płótnie: http://lab.abhinayrathore.com/img2canvas/
+2
Dziękuję za odpowiedź na pytanie OP. Pozostałe odpowiedzi na tej stronie są nieistotne. –
+1
To narzędzie wykonuje zadanie, ale jest również naprawdę nieefektywne. Wykonuje fillRect dla każdego piksela i nie rozpoznaje ciągłych linii lub pól w ogóle, o wiele mniej okręgów lub innych kształtów. –
1
można korzystać z witryny wymienione powyżej, ale tutaj jest odpowiedni kod:
function convertImage(canvas, callback) {
var image = new Image();
image.onload = function(){
callback(image);
}
image.src = canvas.toDataURL("image/png");
}
Również ja złożyć working jsfiddle demo.
+1
Powoduje to konwersję obrazu na obraz, ale pytanie dotyczyło konwersji obrazu na płótno. –
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 ma odpowiedź: 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/płótno/kontekst –
co jeśli chcesz manipulować danymi piksela obrazu przy użyciu płótna? – ina