Tôi đang cố gắng vẽ một hình ảnh 300dpi vào đối tượng canvas nhưng trong Chrome nó hiển thị ở chất lượng rất kém. Khi tôi sử dụng mã dưới đây, nó không cải thiện nhưng đó là vì devicePixelRatio giống với backingStoreRatio (cả hai đều là 1).Cách vẽ ở độ phân giải cao đến canvas trên Chrome? Và tại sao nếu devicePixelRatio === webkitBackingStorePixelRatio làm rộng gấp 2 lần để cải thiện độ phân giải?
sau đó tôi đã cố gắng để buộc một số thay đổi tỷ lệ và thấy như sau:
- nếu tôi thay đổi
ratiolà2và buộc mã mở rộng quy mô để chạy, sau đó nó lôi kéo vào khung ở độ phân giải tốt hơn. - Nếu tôi thay đổi
ratiobất cứ điều gì lớn hơn2(ví dụ3,4,5,6, vv) sau đó nó có độ phân giải nghèo!
Điều này được thực hiện trên máy tính để bàn.
Làm cách nào để đảm bảo canvas vẽ với độ phân giải cao?
(Mã số từ: http://www.html5rocks.com/en/tutorials/canvas/hidpi/)
/**
* Writes an image into a canvas taking into
* account the backing store pixel ratio and
* the device pixel ratio.
*
* @author Paul Lewis
* @param {Object} opts The params for drawing an image to the canvas
*/
function drawImage(opts) {
if(!opts.canvas) {
throw("A canvas is required");
}
if(!opts.image) {
throw("Image is required");
}
// get the canvas and context
var canvas = opts.canvas,
context = canvas.getContext('2d'),
image = opts.image,
// now default all the dimension info
srcx = opts.srcx || 0,
srcy = opts.srcy || 0,
srcw = opts.srcw || image.naturalWidth,
srch = opts.srch || image.naturalHeight,
desx = opts.desx || srcx,
desy = opts.desy || srcy,
desw = opts.desw || srcw,
desh = opts.desh || srch,
auto = opts.auto,
// finally query the various pixel ratios
devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1,
ratio = devicePixelRatio/backingStoreRatio;
// ensure we have a value set for auto.
// If auto is set to false then we
// will simply not upscale the canvas
// and the default behaviour will be maintained
if (typeof auto === 'undefined') {
auto = true;
}
// upscale the canvas if the two ratios don't match
if (auto && devicePixelRatio !== backingStoreRatio) {
var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
// now scale the context to counter
// the fact that we've manually scaled
// our canvas element
context.scale(ratio, ratio);
}
context.drawImage(pic, srcx, srcy, srcw, srch, desx, desy, desw, desh);
}
Making kết quả chỉ là những thay đổi dưới đây trong hình ảnh vải có độ phân giải cao (tại sao?):
//WE FORCE RATIO TO BE 2
ratio = 2;
//WE FORCE IT TO UPSCALE (event though they're equal)
if (auto && devicePixelRatio === backingStoreRatio) {
Nếu chúng ta thay đổi trên là một tỷ lệ 3, nó không còn có độ phân giải cao nữa!
EDIT: Một thêm quan sát - ngay cả với tỷ lệ 2x, trong khi nó là độ phân giải đáng chú ý hơn, nó vẫn không sắc nét như hiển thị hình ảnh trong thẻ img)
Xem này: http://stackoverflow.com/a/15666143/3655 – Aardvark
@Aardvark Như tôi đã đề cập trong bài viết của tôi , Tôi đã thử mã từ bài viết đó (HTML5Rocks) mà là những gì mà bài tham khảo, và nó không hoạt động bởi vì nó luôn luôn cho thấy tỷ lệ là '1', mà không có gì. –
Bạn đã nhầm lẫn với imageSmoothingEnabled chưa? – Aardvark