javascript - 在 javascript 中将 Canvas 保存为图像时颜色质量下降

Question

我正在实现一个图像裁剪工具(使用 Jcrop 库)，它可以上传图像、选择裁剪区域，然后通过单击按钮将图像保存到磁盘。

除了保存到磁盘的图像失去了色调和很少的细节外，所有的逻辑都有效。

左边是裁剪的，右边是原始的

我的 Canvas javascript 包含以下内容:

crop_canvas = document.createElement('canvas');
crop_canvas.width = width;
crop_canvas.height = height;

crop_2d = crop_canvas.getContext('2d');
crop_2d.imageSmoothingEnabled = false;
crop_2d.drawImage(image_target, left, top, parseInt(width), parseInt(height), 0, 0, parseInt(width), parseInt(height));

this.href = crop_canvas.toDataURL('image/png');

我是不是漏了什么？你看到什么不对了吗？

谢谢!

Answer 1

我相信，你的开发环境是基于Linux的系统？当我在 Canvas 上开发图像编辑应用程序时，我有过这种经历。我在 Ubuntu 16.04 上开发它，我怀疑这是 FabricJS 本身的问题。但事实并非如此。如果我在 Windows 或 Mac 上安装我的系统，它会根据我的需要生成非常漂亮和高质量的图像。可能众所周知，Linux 是应用程序开发的最佳平台。在这种情况下，我不敢说，我们必须摆脱 Linux。因为图像渲染工作在 Windows 和 Mac 平台上更好。不过，我不太确定其他 Linux 发行版。我专门介绍 Ubuntu。