Bir kanvasın arka plan görüntüsünün bir .png dosyasına nasıl ayarlanmasının mümkün olduğunu bilmek isterim. Resmi tuvalin arkasına eklemek ve tuvali saydamlaştırmak istemiyorum.Bir html 5 tuvalinin arka plan görüntüsünün .png resmine nasıl ayarlanacağı
Kullanıcının çizdiği çizim ile daha sonra bir .png olarak daha sonra ayıklayabilmem için, kullanıcının arka plandaki .png resmiyle tuvalin üzerine çizim yapabilmesini istiyorum.
Resmi tuval üzerine çizebilir ve kullanıcının bunun üzerine çizim yapmasını sağlayabilirsiniz.
drawImage() işlevi CSS yoluyla bir canvas elemana bir arka plan uygulayabilirsiniz, this example gösterildiği gibi https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
bkz konuda size yardımcı olacaktır ve bu arka plan parçayı görüntüsünü, örneğin dikkate alınmayacaktır İçeriği toDataURL()'dan getirirken. İşte
<!DOCTYPE HTML>
<html><head>
<meta charset="utf-8">
<title>Canvas Background through CSS</title>
<style type="text/css" media="screen">
canvas, img { display:block; margin:1em auto; border:1px solid black; }
canvas { background:url(lotsalasers.jpg) }
</style>
</head><body>
<canvas width="800" height="300"></canvas>
<img>
<script type="text/javascript" charset="utf-8">
var can = document.getElementsByTagName('canvas')[0];
var ctx = can.getContext('2d');
ctx.strokeStyle = '#f00';
ctx.lineWidth = 6;
ctx.lineJoin = 'round';
ctx.strokeRect(140,60,40,40);
var img = document.getElementsByTagName('img')[0];
img.src = can.toDataURL();
</script>
</body></html>
CSS arka planının ** görüntünün bir parçası ** olarak değerlendirilebilmesi için bir yol var mı? CSS ile değil, bu [arkadaş taşması] (http://stackoverflow.com/a/21835070/607874) –
@JoseRuiSantos No'ya yardım etmeye çalışıyordum. Bunun bir parçası olması için tuvale “drawImage()” gerekir. – Phrogz
Ne düşündüğümü. Bağlantıda gördüğünüz gibi, çalışma zamanı tarafından oluşturulan içerik -moz-elementi ile uğraşıyorum, bu yüzden bu görüntüyü "almam" ın bir yolu yok, korkarım. Yardımlarınız için teşekür ederim. –
Sen css arka plan resmi verebilir:
#canvas { background:url(example.jpg) }
Eğer zemin görüntüsünü
geri tuval gösterecektirBu eklentiyi kullanabilirsiniz, ancak yazdırma amacıyla <button onclick="window.print();">Print</button> gibi bir kod ekledim ve görüntü kaydetmek için <button onclick="savePhoto();">Save Picture</button>
function savePhoto() {
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
window.location = img;}
çıkış bu eklenti http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app
Bu backgroundless sonuçlarını ayıklamak için boş bir tuval üzerine çizim kullanıcının komutlarını ve 'tekrar oynatma' onlara kaydetmek için kullanıcı gerektirir. İlk başta arka plan resmini çizmemek çok daha kolaydır, böylece sonucu sorunsuz bir şekilde çıkarabilirsiniz. – Phrogz
gerçekten olurdu. Bir şekilde onun sorusunun son cümlesini özledim mi yoksa ekledi mi? – oberhamsi