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

javascript - How to save an image in its original size in a canvas after scaled the canvas - Stack Overflow

programmeradmin3浏览0评论

I have a canvas used to photo editing. I want to save the photos in Full HD. Canvas size is well below this resolution for viewing on small screen. So I apply a scaling on canvas to see the whole picture.

How can I save after editing, the image visible in the canvas in Full HD?

Example: Edit an image size QHD (2560x1440) in a canvas size SVGA (800x600) and produce a picture Full HD (1920x1080)

I have a canvas used to photo editing. I want to save the photos in Full HD. Canvas size is well below this resolution for viewing on small screen. So I apply a scaling on canvas to see the whole picture.

How can I save after editing, the image visible in the canvas in Full HD?

Example: Edit an image size QHD (2560x1440) in a canvas size SVGA (800x600) and produce a picture Full HD (1920x1080)

Share Improve this question edited Mar 13, 2014 at 18:34 howderek 2,24415 silver badges24 bronze badges asked Mar 13, 2014 at 18:25 ScandinaveScandinave 1,4381 gold badge19 silver badges42 bronze badges 2
  • 1 What resolution do you want it (1920x1080 I assume)? Can you show your code? – howderek Commented Mar 13, 2014 at 18:29
  • 1 I Haven't codes yet. I don't know how to start with. I just want an idea to do so. I would manage with the code. I think, i can't use var data = canvas.toDataURL(); :) – Scandinave Commented Mar 13, 2014 at 18:31
Add a ment  | 

1 Answer 1

Reset to default 9

The size you set with the width and height properties will be the image's final size.

canvas.width = 1920;              // actual size given with integer values
canvas.height = 1080;

If you need to scale down while on screen you need to use CSS (one of those special cases):

canvas.style.width = '960px';     // show at 50% on screen
canvas.style.height = '540px';

Alternatively have your actual image as an off-screen canvas and copy regions from that to the on-screen canvas depending on scale etc.

If you edit your image at a lower than the actual resolution then the point of HD etc. is gone as you need to scale up a lower resolution image to a bigger one which will make it appear more blurry due to the introduced interpolation. Always work at the actual target resolution when working with digital images (or video).

Then use toDataURL() to get the image:

var dataUri = canvas.toDataURL(); // saves a PNG at 1920x1080

for JPEG:

var dataUri = canvas.toDataURL('image/jpeg', 0.8);  // last = quality

Just be aware of that your mouse positions will have to be scaled the opposite way as they are relative to the canvas element and not its bitmap.

发布评论

评论列表(0)

  1. 暂无评论