最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to draw image from URL on canvas with original quality - Stack Overflow

programmeradmin0浏览0评论

I want to load an image from url and draw it on my canvas. My canvas takes full window size and I only want the image to be shown on the mouse position with a size of 100x100. Below is my code:

drawImage(imageUrl) {
    const ctx = this.canvas.getContext('2d');
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    const image = new Image();
    image.onload = () => {
      ctx.imageSmoothingEnabled = false;
      ctx.drawImage(image, this.state.mousePos.x, this.state.mousePos.y,
        100, 100);
    };
    image.src = '.png';

  }

the image can be drawn on the web page but the quality is pretty low. Below is the orianl image from above link:

below is the image is shown on my canvas:

You can pare two images and their quality is quite different. How can I draw a high quality of the image on canvas?

I want to load an image from url and draw it on my canvas. My canvas takes full window size and I only want the image to be shown on the mouse position with a size of 100x100. Below is my code:

drawImage(imageUrl) {
    const ctx = this.canvas.getContext('2d');
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    const image = new Image();
    image.onload = () => {
      ctx.imageSmoothingEnabled = false;
      ctx.drawImage(image, this.state.mousePos.x, this.state.mousePos.y,
        100, 100);
    };
    image.src = 'https://cdn.sstatic/stackexchange/img/logos/so/so-icon.png';

  }

the image can be drawn on the web page but the quality is pretty low. Below is the orianl image from above link:

below is the image is shown on my canvas:

You can pare two images and their quality is quite different. How can I draw a high quality of the image on canvas?

Share Improve this question edited Oct 26, 2017 at 6:12 Nirav Joshi 1,72315 silver badges28 bronze badges asked Oct 26, 2017 at 6:04 Joey Yi ZhaoJoey Yi Zhao 42.7k87 gold badges353 silver badges659 bronze badges 3
  • the width and height of image is well defined? – Álvaro Touzón Commented Oct 26, 2017 at 6:05
  • make it 158 X 158 to avoid resample jaggies. might also play with the aliasing settings if you have no subtle color gradations. – dandavis Commented Oct 26, 2017 at 6:07
  • 1 The width and height applied to the canvas from CSS would stretch it, but you didn't provide that information. – kamoroso94 Commented Oct 26, 2017 at 6:09
Add a ment  | 

1 Answer 1

Reset to default 6

let canvas = document.getElementById('c'),ctx = canvas.getContext('2d');
const image = new Image();
image.onload = () => {
  ctx.imageSmoothingEnabled = false;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(image, 50, 50,500,500);
};
image.src = 'https://cdn.sstatic/Sites/stackoverflow/pany/img/logos/so/so-icon.svg?v=6e4af45f4d66';
canvas{
 border : 2px solid black;
}
<canvas id='c' width=500 height=500/>

Use svg if you relay on image quality.

发布评论

评论列表(0)

  1. 暂无评论