我正在尝试通过 JavaScript 缩放本地镜像,如下所示:
function resizeImage(file, func){
var canvas = document.createElement('canvas');
var img = new Image();
img.onload = function () {
var factor = img.width/800;
canvas.width = 800;
canvas.height = img.height/factor;
ctx = canvas.getContext('2d');
ctx.scale(factor, factor);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
func(canvas.toDataURL());
}
img.src = file.dataload; //file is an json-Object and dataload a dataURI
}
不知何故,canvas.toDataURL() 返回的数据不会以任何方式调整大小。 我仔细检查了 canvas.width 和 canvas.height 是否是正确的计算尺寸。
知道出了什么问题吗?
最佳答案
尝试删除 scale()
方法,因为它只影响绘制到 Canvas 位图的内容,而不影响位图本身(drawImage()
在任何情况下都会影响正确缩放图像)。
您需要使用 width
和 height
属性缩放 Canvas 。这些是使用 toDataURL()
获得的维度的基础。
var factor = img.width/800;
var scale = 2;
canvas.width = 800 * scale;
canvas.height = img.height/factor * scale;
如果您需要 Canvas 元素在屏幕上保持不变,也可以对其应用CSS:
canvas.style.width = 800 + 'px';
canvas.style.height = img.height/factor + 'px';
关于javascript - HTML Canvas Img 缩放以某种方式不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21223932/