我正在尝试使用javascript和canvas元素在客户端创建缩略图图像,但是当我缩小图像时,它看起来很糟糕.它看起来好像在photoshop中缩小了,重新采样设置为"最近邻"而不是Bicubic.我知道可以让它看起来正确,因为这个网站也可以使用画布做得很好.我尝试使用他们所做的相同代码,如"[Source]"链接所示,但它仍然看起来很糟糕.有什么我缺少的东西,一些需要设置的设置或什么？
编辑:
我正在尝试调整jpg的大小.我已经尝试在链接网站和photoshop中调整相同的jpg,并且在缩小尺寸时看起来很好.
这是相关代码:
reader.onloadend = function(e)
{
var img = new Image();
var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
var copyContext = canvasCopy.getContext("2d");
img.onload = function()
{
var ratio = 1;
if(img.width > maxWidth)
ratio = maxWidth / img.width;
else if(img.height > maxHeight)
ratio = maxHeight / 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); …我正在Node.js(+ express 4)上开发一个Web应用程序,用户可以通过将其上传到服务器来设置他们的个人资料图像.我们已经限制了文件mimetype和max filesize,因此用户无法上传超过200KB的png或jpeg图像.
问题是我们希望将上传的图像分辨率调整为(服务器端)为200x200,以改善页面加载并节省磁盘空间.经过一些研究,所有答案都指向使用基于ImageMagick或GraphicsMagick的任何模块.
但是,必须安装ImageMagick/GraphicsMagick进行简单的图像调整大小对我来说似乎太过分了,所以,Node.js还有除此之外的其他解决方案吗？
我一直在尝试使用gmNodeJS 的软件包创建一些缩略图,但我很幸运.我需要调整大于600x600的图像(可以是任何宽度/高度,从给定的一个开始)但是当我将大小传递给gm时,它会创建一个与我请求的大小不同的图像.
例如,鉴于此代码,我假设运行node app /path/to/image.png我将收到一个大小为200x100的图像,但我得到的是180x100或200x90的图像......
gm(fileLocation)
.thumb(200, 100, 'processed.' + process.argv[2].split('.').pop(), function() {
console.log("Done!");
});
我也尝试过调整大小选项.甚至有一个强制大小的选项,但输出的宽高比变得可怕......
gm('/path/to/image.jpg')
.resize(353, 257)
.write(writeStream, function (err) {
if (!err) console.log(' hooray! ');
});
我正在使用Python构建照片库,并希望能够快速生成高分辨率图像的缩略图.
为各种图像源生成高质量缩略图的最快方法是什么？
我应该使用像imagemagick这样的外部库吗？还是有一种有效的内部方式来做到这一点？
已调整大小的图像的尺寸将为(最大尺寸):
120x120
720x720
1600x1600
质量是一个问题,因为我希望保留尽可能多的原始颜色并最小化压缩工件.
谢谢.
Multer 已经有限制大小的属性。此属性仅限制图像。不调整图像大小。我的问题是假设图像大于“限制大小”，如何调整该图像的大小？
var storageOptions = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'useravatars/')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
});
var avatarUpload = multer({
storage: storageOptions,
limits: {
fileSize: 1000000
}
}).single("avatar");
从文件系统加载数据后，值得使用哪种模型来调整图像大小并返回客户端？
fs.readFile(process.env.OPENSHIFT_DATA_DIR + request.headers['filename'], function read(err, data) {
var w = request.headers['w']
var h = request.headers['h']
response.writeHead(200)
// CODE TO RESIZE DATA
response.write(data)
response.end()
})
使用nodejs和imagemagick我可以调整图像大小并将其发送到浏览器。
var http = require('http'),
spawn = require('child_process').spawn;
http.createServer(function(req, res) {
var image = 'test.jpg';
var convert = spawn('convert', [image, '-resize', '100x100', '-']);
convert.stdout.pipe(res);
convert.stderr.pipe(process.stderr);
}).listen(8080);
测试图像是从文件系统读取的，我想更改以便测试图像是二进制字符串。
var image = 'some long binray string representing an image.......';
我的计划是将二进制字符串存储在 Mongodb 中并动态读取它们。
我无法调整图像大小.我正在使用multer来获取文件,但是如何调整此图像的大小？我尝试过imagestick但fs没有保存它们.
router.post('/uploadAvatar',
multer({
dest: './public/uploads/images/avatars',
rename: function (fieldname, filename) {
return 'avatar'+Date.now();
}
}), function(req, res) {
// resize image
res.json(newPath);
});
我正在使用jimp来调整node.js中的图像大小,我成功地降低了图像质量,但是有点混淆了如何获得新图像的路径
Jimp.read("test.jpg", function (err, test) {
if (err) throw err;
test.resize(256, 256)
.quality(50)
.write("new.jpg");
});