Question

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

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

它完全适用于Android，但在iOS（使用iPhone 4 + iOS 7进行测试） - 我得到黑色图像（如果我生成JPEG）或完全透明图像（如果我生成一个PNG）。

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;
}

我做了一些测试，发现如果我不裁剪图像就不会发生问题（所以如果我删除＆＃34; params.cropWfromOriginal，params.cropHfromOriginal，img.width， img.height＆＃34;调用drawImage函数时的一部分。）

正如我所提到的，这适用于Android和桌面浏览器（在Chrome和FF上测试）。

任何想法都会在这里受到赞赏......

谢谢，约瑟夫。

裁剪图像并调整图像大小会导致iOS

0 个答案: