有bug哎，在chrome的模拟器里面生成的图片是正常的。到了手机里面就不行了。生成的图片错位

[Gala-1024]

测试设备是iphone6s plus，还是有合成图片错误的bug哎，
有bug哎，在chrome的模拟器里面生成的图片是正常的。到了手机里面就不行了。生成的图片错位

[pwstrick]

1）快速解决方法，先把html中将hidpi-canvas.js去除，再将pixelRatio返回为1。或者直接去除pixelRatio方法。

pixelRatio: function(ctx) {
        return 1;
        //var backingstore = ctx.webkitBackingStorePixelRatio|| 1;
        //return (window.devicePixelRatio || 1) / backingstore;
}

2）另外一种方法是filterImage方法内else的宽高设置为画布的宽高。再修改$('#btnRotate')中旋转的事件，错位是由于filterImage中每次都会除以pr，这样的话，画布的宽高就会缩小，导致图片只能显示部分。

if(deg) {
            ctx.rotate(deg * Math.PI / 180);
            ctx.drawImage(image, 0, -canvas.width);
}else {
            ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
}

img.onload = function() {
            var width = $frameImg.data('height'),
                height = $frameImg.data('width');
            //此处图片需跨域
            var src = poster.filterImage(this, width, height, 90);
            var realImg = new Image();
            realImg.onload = function() {
                rotates[direction] = {src:src, width:width, height:height, image:realImg};//缓存
                $frameImg.data('width', width);
                $frameImg.data('height', height);
                $frameImg.attr('src', realImg.src);
                endLoading();
            };
            realImg.src = src;
};

代码我已经上传到Github上了

[Gala-1024]

谢谢。我晚些试试

[Gala-1024]

貌似还是有bug，图一是我编辑时候的图片，图二是生成后的图片

[Gala-1024]

我测试的设备是iphone6s plus

[Gala-1024]

解决了。按照方法1

[ifmein]

方法1 的原理? 不考虑hidpi的问题了么?

[pwstrick]

方法1是忽略了hidpi

[blueIce525]

按照方法1，安卓机dpr >= 2 的情况，生成的图片模糊，怎么解决呢

[blueIce525]

我已经找到方案解决，使用方法1，因为用flexible适配，ios的逻辑1px等于物理1px，所以不需要hidpi方案，canvas的width和height逻辑与物理匹配，不会出现模糊问题。安卓机的dpr被统一设置为1,获取frame的width和height直接设置给canvas就会出问题，因为获取到的frame的width实际上对应的物理像素是w = width＊window.devicePixelRatio ,canvas的width要设置为w,裁剪函数最后两个参数也要乘以window.devicePixelRatio。height的设置同理

[blueIce525]

如何不按照以上设置，比如dpr为3的小米，裁剪出来的图片相当于要缩小3倍来看，就会很模糊。所以要把画布乘以3倍，参见的缩放也是3倍

[gogoBBBoy]

两种方法我都试过 好像都没用诶

[gitzjw]

裁减函数你指的是那个

[chenhub]

貌似还是有bug，图一是我编辑时候的图片，图二是生成后的图片

后来您解决了这个问题吗