我正在我的应用程序中实现Fabricjs
编辑工具。我需要在画布中设置高分辨率图像。如果我使用setBackgroundImage
方法,它只适用于小尺寸(尺寸非常小于画布)图像。所以我需要减小图像的大小(但需要保持比例)才能看起来很漂亮。
我的第一个想法是下采样,适用于某些图片但不适用于所有图片。这是代码:
方法1)
var steps = 2;
var imgAspect = img.width / img.height;
var oc = document.createElement('canvas');
octx = oc.getContext('2d');
for(var i = 0; i < steps; i++){
if(i == 0){
oc.width = img.width * 0.5;
oc.height = img.height * 0.5;
octx.drawImage(img, 0, 0, oc.width, oc.height);
}
else{
octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);
}
}
_w = canvas.width;
_h = canvas.height;
ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5, 0, 0, _w, _h);
var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
var c = document.createElement('canvas');
c.setAttribute('id', '_temp_canvas');
c.width = canvas.width;
c.height = canvas.height;
c.getContext('2d').putImageData(data, 0, 0);
var img = fabric.Image.fromURL(c.toDataURL(), function(img) {
img.left = 00;
img.top = 00;
img.isFixed = true;
img.selectable = false;
canvas.add(img);
c = null;
$('#_temp_canvas').remove();
canvas.renderAll();
});
我的第二个想法,我跟随here看起来非常简单
var canvasCopy = document.createElement("canvas")
var copyContext = canvasCopy.getContext("2d")
var ratio = 1;
if(img.width > canvas.width){
ratio = canvas.width / img.width;
}
else if(img.height > canvas.height){
ratio = canvas.height / img.height;
}
canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);
canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
问题是它们都没有产生良好的分辨率。方法1适用于某些图片,但很少有图片失败。如果我尝试方法2,那么它可以用于方法1中的失败图片。有人可以帮助解决有关分辨率的问题吗?
查看带有2个不同图像的fiddle1和fiddle2。您可以通过调用method1
函数中的method2
和_img.onload
来查看差异。
我不知道这是不是你的情况,但对我来说,工作imageSmoothingEnabled=false
喜欢
var canvasCopy = document.createElement("canvas")
var copyContext = canvasCopy.getContext("2d")
copyContext.imageSmoothingEnabled = false;