JavaScript Canvas Bilder werden Komisch angezeigt, Lösung?

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

tavkomann

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

21.03.2018, 21:47

diese habe ich mit CSS angegeben.

Und genau das ist das Problem: Die CSS-Eigenschaften geben lediglich die Breite und Höhe des Canvas-Elements an. Du musst aber die Breite und Höhe des Koordinatensystems des Canvas-Elements setzen, siehe:

The canvas element has two attributes to control the size of the element's bitmap: width and height. [...] If an attribute is missing, or if parsing its value returns an error, then the default value must be used instead. The width attribute defaults to 300, and the height attribute defaults to 150.

https://html.spec.whatwg.org/#attr-canvas-width, zul. abgerufen 2018-03-21T21:43+01:00

D. h., wenn du diese Angaben auslässt, wird die Standard-Größe (300x150 Pixel) verwendet. Live-Beispiel: https://jsfiddle.net/73eqqtpc/

Wie du siehst, ist das Bild abgeschnitten. Nun streckst du das abgeschnittene Bild mit CSS, sodass es unscharf wird. Live-Beispiel: https://jsfiddle.net/cnqepa1g/

Stattdessen musst du die HTML-Attribute width und height benutzen. Live-Beispiel: https://jsfiddle.net/mbjg0xav/

Bertigerwolfram

Beitragsersteller

22.03.2018, 19:15

Danke, ich habe nämlich vorher immer von alle höhe und breite in CSS angegeben

tavkomann

22.03.2018, 19:17

@Bertigerwolfram

Gerne :) Ja, das ist beim canvas-Element leider etwas verwirrend.

verreisterNutzer

21.03.2018, 20:20

Wenn das Bild verschwommen ist, dann ist die Auflösung des Bildes zu gering.

Ich würde dir aber, sofern du sehr viel mit dem Canvas vor hast, das KonvaJS Framework empfehlen, damit arbeite ich derzeit recht viel.

https://konvajs.github.io/docs/

Es nimmt der sehr viel Arbeit ab, vorallem was das Neuzeichnen des Canvasses angeht. Außerdem bietet es viele Möglichkeiten was z.B. Animationen angeht.

Ähnliche Beiträge

CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

...zum Beitrag

Javascript canvas, unerwarteter Fehler?

Hi! Derzeit entwickle ich wieder ein game mit dem js canvas. Allerdings hab ich jetzt einen drawImage bug, den davor noch nie so hatte. Als ich dann zum Test ein Bild im main loop gezeichnet habe wurd das Bild immernoch nicht richtig gezeichnet. Der Code:

Und obwohl die dx and dy Parameter 100 sind wird das Bild nur so klein auf den Canvas produziert:

Die Bildgrösse selbst ist richtig. Es ist ein 15*15 px großes von mir gepixeltes Bild.

Das komische ist aber, sobald ich dx und dy auf zb 500 stelle verschwindet das Bild komplett und es wird gar nichts mehr gezeichnet.

Mfg Weißbrot

...zum Beitrag

JavaScript: Wie kann ich ein Bild in mein Canvas einfügen?

Servus!

Ich möchte gerne ein Bild in mein Canvas einfügen. Es klappt aber nicht und die Konsole zeigt auch keine Fehlermeldungen an.

Ich habe folgenden Code:

var canvas = document.getElementById("gameScreen");
var context = canvas.getContext("2d");
var imgBall = document.getElementById('img_ball');

function make_ball() {
  imgBall = new Image();
  imgBall.onload = function() {
    context.drawImage(imgBall, 10, 10);
  }
}

make_ball();

In der HTML-Datei habe ich noch src und die id (img_ball) in das img-Tag geschrieben.

Vielleicht findet ja von euch jemand den Fehler.

Dankeschön.

...zum Beitrag

Wie für responsive Website Bild skalieren und zentral ausrichten?

Hallo,

wie kann ich es realisieren, ein IMG für die mobile Darstellung in X-Richtung zu skalieren/stretch und gleichzeitig das Bild horizontal auszurichten(siehe Bild, blau=IMG)? Zudem soll das Bild ab einer Mindestbreite nicht mehr skaliert werden und nur noch horizontal zentriert werden.

Für die Vertikale wäre so etwas wie object-position: top sehr gut, schließt sich aber mit display: flex wohl gegenseitig aus.

.page {
   display: flex; 
   justify-content: center; 
   align-items: center; 
}
.page img-a {
   object-fit: cover;
   object-position: top; 
}
@media only screen and (max-width: 800px) {
  .page .img-a {
     object-fit: fill;
     min-width: 700px; 
   }
}

...zum Beitrag

Wieso funktioniert array.push() nicht?

Bei folgendem Code funktioniert die array.push-Funktion nicht.

let XArray = [];

function Xcoordinate() {
  for (let i = 0; i <= width; i+= 30) {
    XArray.push(i);
  }
}
//width ist die breite des Canvas

Das Array füllt sich nicht.

Ich arbeite mit p5.js.

Kann mir jemand helfen?

VG Finja

...zum Beitrag

Websocket und MySQL-Datenbank?

Hallo zusammen,

Wenn ich mit Javascript (zum Beispiel ein HTML5/Canvas-) Spiel programmieren will, sollte das auch sicher sein. Wie realisiere ich es also, dass z. B. bei jeder Positionsänderung des Spielers per Javascript die neue Position in eine auf dem Server liegende Datenbank eingetragen wird und bei jeder weiteren Änderung dieser Wert in der Datenbank verändert und der Spieler an der neuen Position angezeigt wird? (Hauptsächlich weiß ich nicht, wie das mit den Websockets und der Datenbank geht, aber auch der Javascript-Teil ist für mich schwierig - in PHP und ohne Websockets könnte ich's...)

Danke schon mal!

...zum Beitrag

AttributeError: type object 'Image' has no attribute 'open' Was Tun (Python, PIL)?

Ich habe ein Kleines Programm begonnen aber wen ich ein Bild einfügen möchte kommt immer diese Fehlermeldung:

AttributeError: type object 'Image' has no attribute 'open'

Hier ist mein Script(Alle Module sind auf dem neusten stand.):

from PIL import Image, ImageTk
import tkinter as tk
from tkinter import *

root = tk.Tk()

root.title("Ein Fenster")

canv = Canvas(root, width=80, height=80, bg='white')
canv.grid(row=2, column=3)
img = ImageTk.PhotoImage(Image.open("logo.png"))  # PIL solution
canv.create_image(20, 20, anchor=NW, image=img)

...zum Beitrag

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Bild-Direktlink Größe ändern in der URL?

An die Nerds :P

Wie ändert man in der URL eines Bildes die Anzeigegröße? Beispielsweise habe ich eine URL die so aussieht: www.example.com/bild.jpg

Ich glaube shconmal URLs gesehen zu haben, bei denen noch so Art "Befehle" hinten dran standen, z.B. um die Größe zu ändern

In etwa www.example.com/bild.jpg&width=100&height=100 (das ist sicher Falsch, aber so in etwa muss das gehen, denke ich?)

Grüße

...zum Beitrag

Wie löse ich das Problem mit dem Bildaustausch (hover, etc.)?

Hallo,

ich versuche in CSS ein Hintergrundbild auszutauschen bei hover, active, etc.
Leider klappt es aber nicht, da bei besuchten Links dennoch das Hintergrundbild angezeigt wird, welches aber nur angezeigt werden soll, wenn der Link noch nicht geöffnet wurde.

So sieht der Code aus (body):

<div>
      <ul>
        <li><a href="xyz" class="img-link" title="xyz">xyz</a><br/></li>

Bei der Klasse in css habe ich es dann so probiert:

a.img-link{
  display: inline-block;
  background: url(../img/li-button-blue.png);
  margin: 0 auto;
  text-align: center;
}
a.img-link:visited {
  background: url(../img/li-button-yellow.png);
}
a.img-link:hover {
  background: url(../img/li-button-red.png);
}
a.img-link:active {
  background: url(../img/li-button-lightblue.png);
}
a.img-link:focus {
  background: url(../img/li-button-green.png);

Vielleicht kann ja jemand helfen, ist wahrscheinlich total einfach.

Vielen Dank.

...zum Beitrag

Wie schreibe ich eine Funktion welche eine absteigende Diagonale zeichnet?

Hallo!

Ich soll für einen Canvas eine Funktion schreiben, wo der ersten Pixel der ersten Reihe oben links schwarz gefärbt werden soll, dann in der zweiten Reihen die ersten zwei, in der dritten die ersten drei und so weiter bis zum Ende des Canvas. Der Canvas ist 200x200 Pixel groß.

Ich weiß das die Position Links obere Ecke diese Position ist: (0, height - 1), rechts obere Ecke: (width - 1, height - 1)links untere: (0, 0) und rechts untere (width -1, 0).

Wenn ich also c = canvas_set_black(c, 0, 0); durchführe, würde das den Pixel der linken untere Ecke Schwarz färben.

Auf jeden Fall macht mein Code ungefähr was er soll, aber nicht an der richtigen Position. Hier mein Code (Bild 1) und das Ergebnis (Bild 2). Im zweiten 2 ist das obere Bild das Ergebnis meines Canvas und das untere Bild, das erwartete Ergebnis des Canvas. Wie man sehen kann färbt es zwar eine absteigende Diagonale, aber nicht an der Ecke die ich eigentlich möchte. Irgendeinen Tipp?

...zum Beitrag

Warum funktioniert mein Websockets- Server nicht?

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed:

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

...zum Beitrag

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zum Beitrag

Python,Tkinter, Wie kann man die weiße Umrandungslinie entfernem?

Hallo.

Heute habe ich Tkinter ausprobiert.

Jedoch bin ich auf das Problem gestoßen, dass ich beim Canvas oder Rechteck eine weiße Umrandungslinie habe. Die "outline" auf 0 zu setzen habe ich schon probiert, das hat jedoch nichts gebracht.

Das ist der Code mit dem ich die einzelnen Rechtecke zeichne:

#create canvas
canvas = Canvas(screen, width= width, height= height)

#sidebar
canvas.create_rectangle(sidebar_coord,sidebar_size, fill=sidebar_color,outline="")

#mainscreen
canvas.create_rectangle(mainscreen_coord,mainscreen_size, fill=mainscreen_color,outline="")

#tobar
title_bar = Frame(canvas, bg=topbar_color, height=43, width=1200)
title_bar.place(x=0, y=0)
title_bar.bind('<B1-Motion>', move_app)

Die Canvas größe ist (1200,850). Gleich groß wie mein Tkinter Fenster

Die "sidebar" startet bei (0,43) und geht bis (199,850)

Der "mainscreen" startet bei (199,43) und geht bis (1200,850)

Der schwarze Hintergrund gehört nicht zum Fenster. Ist nur mein Bildschirmhintergrund.

Ich habe nicht herausgefunden, was die weiße Umrandungslinie verursacht.

Villeicht kann ja hier mir jemand helfen.

Danke, schonmal im Voraus.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen