关于大图在较小的canvas画布中失真的问题！

羽灵光

发现一个问题：
1、在canvas中引用大图片（如1500*900）在390*240的canvas中使用drawImage绘制，图片会有严重的锯齿和失真。
2、使用DOM直接放img标签（width：100%）：
   在IE浏览器下，会有失真效果。
   在chrome、firefox浏览器中图片表现良好。

如果不使用后台技术（如java 的 drawImage API中有对图片质量的处理），前端如何能够较好地对图片进行缩放而不产生图片严重的失真，lufylegend引擎有这样的处理方式么？
如下图：
上面图片是想要的效果（显示平滑），下面图片是实际效果（有严重的失真）。

lufy

这个基本解决不了
你可以试一下这个
https://developer.mozilla.org/ja ... ageSmoothingEnabled
但是效果不明显

xiaopang125

lufy 发表于 2015-11-2 15:38
这个基本解决不了
你可以试一下这个
https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingConte ...

真解决不了么？因为iphone高清的分辨率 图都做的很大，结果在安卓自适应，锯齿严重

lufy

xiaopang125 发表于 2015-11-2 15:57
真解决不了么？因为iphone高清的分辨率 图都做的很大，结果在安卓自适应，锯齿严重 ...

一般也不至于缩小3，4倍那么多吧
正常的话也不会碰到这个问题

xiaopang125

lufy 发表于 2015-11-2 16:06
一般也不至于缩小3，4倍那么多吧
正常的话也不会碰到这个问题

.imageSmoothingEnabled = false;
这个在哪里写呢？我是小白

这样不对；
//LGlobal.canvas.getContext("2d").imageSmoothingEnabled = false;

羽灵光

lufy 发表于 2015-11-2 15:38
这个基本解决不了
你可以试一下这个
https://developer.mozilla.org/ja/docs/Web/API/CanvasRenderingConte ...

试了一下，基本没效果~ 感谢回复~

lufy

xiaopang125 发表于 2015-11-2 16:23
.imageSmoothingEnabled = false;
这个在哪里写呢？我是小白

如果用lufylegend的话，CanvasRenderingContext2D对象就是LGlobal.canvas
但是实际上，引擎使用硬件缩放，只要不是太离谱的话，一般是不会失真的，
大多数情况下，都是由于LInit参数设置过小，然后再通过设置scaleX等属性进行了二次缩放导致失真
但是像本帖中的情况，是将图片缩小了4倍多，而实际上imageSmoothingEnabled的效果并不明显，尤其是你的图片里还有很多文字，这个就真不好解决了

xiaopang125

<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
设备分辨率有效果

羽灵光

xiaopang125 发表于 2015-11-5 21:59
设备分辨率有效果

PC端就悲剧了~
而且图片巨大，手机端加载也会很慢的~