Javascript 裁剪和调整图像大小会导致iOS上Phonegap应用程序中出现空白图像

我正在为Android和iOS编写一个Phonegap应用程序，其中包括一个上传图像的选项。上传之前，需要将文件裁剪成正方形（从原始图像的中间开始最大的正方形）。如果正方形的宽度/高度超过320px，那么它也应该缩小到320px

我编写了以下javascript函数，该函数获取数据URL，缩小图像（如果需要），裁剪图像并将结果数据URL放入img src属性中

它在Android上工作得非常好，但在iOS上（用iPhone4+iOS7测试）——我得到的不是黑色图像（如果生成JPEG），就是完全透明的图像（如果生成PNG）

函数dataUrlToPreview（dataURL）{ var img=新图像（）； img.onload=函数（）{ var params={}； 参数maxTargetSize=320； params.orientationLandspace=img.width>=img.height； params.originalSquareSize=params.orientationLandspace？img.height：img.width； params.CropFromOriginal=params.OrientionLandSpace？（img.width-params.originalSquareSize）/2:0； params.cropHfromOriginal=！params.orientationLandspace？（img.height-params.originalSquareSize）/2:0； params.targetSize=params.originalSquareSize>params.maxTargetSize？params.maxTargetSize:params.originalSquareSize； 参数resizeW=0； 参数resizeH=0； if（params.originalSquareSize>params.maxTargetSize）{ params.resizeRatio=params.orientationLandspace？params.maxTargetSize/img.height：params.maxTargetSize/img.width； params.resizeW=数学圆（img.width*params.resizeRatio）； params.resizeH=数学圆（img.height*params.resizeRatio）； }否则{ params.resizeW=img.width； params.resizeH=img.height； } 变量画布=$（“”） .hide（）.appendTo（“body”）； var ctx=canvas.get（0.getContext（'2d'）； ctx.drawImage（img，params.cropfromOriginal，params.cropfromOriginal，img.width，img.height，0，params.resizeW，params.resizeH）； var base64ImageData=canvas.get（0.toDataURL（“image/jpeg”）； $（“预览”）.attr（“src”，base64ImageData）； canvas.remove（）； } img.src=数据URL； } 我做了一些测试，发现如果不裁剪图像，问题就不会发生（因此，如果在调用drawImage函数时删除“params.cropFromoriginal、params.cropFromoriginal、img.width、img.height”部分）

正如我所提到的，这在Android和桌面浏览器（在Chrome和FF上测试）中都能很好地工作

任何想法都将在这里被欣赏

谢谢，

---

Joseph。

我猜它不喜欢从drawImage（）中的裁剪中获取不存在的像素。您可以尝试执行ctx.drawImage（img，params.cropFromOriginal，params.cropFromOriginal，img.width-params.cropFromOriginal，img.height-params.cropFromOriginal，0，params.resizeW，params.resizeH）？即使这会是一个错误，它不接受前者…这没有做的把戏。在iOS设备上，输出仍然是空的，在其他任何地方，它只是扭曲图像（拉伸图像）。。。不管怎样，我找到了一个可行的解决方法-我现在只调整图像的大小并将其上传到AWS S3，在那里Lambda函数进行裁剪。。。

function dataUrlToPreview(dataURL) {
    var img = new Image();
    img.onload = function(){
        var params = {};
        params.maxTargetSize = 320;
        params.orientationLandspace = img.width >= img.height;
        params.originalSquareSize = params.orientationLandspace ? img.height : img.width;
        params.cropWfromOriginal = params.orientationLandspace ? (img.width - params.originalSquareSize) / 2 : 0;
        params.cropHfromOriginal = !params.orientationLandspace ? (img.height - params.originalSquareSize) / 2 : 0;
        params.targetSize = params.originalSquareSize > params.maxTargetSize ? params.maxTargetSize : params.originalSquareSize;

        params.resizeW = 0;
        params.resizeH = 0;

        if (params.originalSquareSize > params.maxTargetSize) {
            params.resizeRatio = params.orientationLandspace ? params.maxTargetSize / img.height : params.maxTargetSize / img.width;
            params.resizeW = Math.round(img.width * params.resizeRatio);
            params.resizeH = Math.round(img.height * params.resizeRatio);
        } else {
            params.resizeW = img.width;
            params.resizeH = img.height;
        }

        var canvas = $("<canvas width=\"" + params.targetSize + "\" height=\"" + params.targetSize + "\"/>")
            .hide().appendTo("body");
        var ctx = canvas.get(0).getContext('2d');

        ctx.drawImage(img, params.cropWfromOriginal, params.cropHfromOriginal, img.width, img.height, 0, 0, params.resizeW, params.resizeH);
        var base64ImageData = canvas.get(0).toDataURL("image/jpeg");

        $("#preview").attr("src", base64ImageData);
        canvas.remove();
    }
    img.src = dataURL;
}