toDataURL() 从 iOS 设备返回空白图像

Posted 2023-03-25

【中文标题】toDataURL() 从 iOS 设备返回空白图像

【英文标题】：toDataURL() return blank image from iOS devices

【发布时间】：2016-08-07 20:39:54

【问题描述】：

我使用以下代码裁剪图像并保存

this.crop = function(width, height, type) 
            var imgInfo = this.imgInfo,
                c = this.eles.container,
                img = this.eles.img,
                original = new Image(),
                canvas = document.createElement('canvas');
            original.src = img.attr('src');
            canvas.width = width;
            canvas.height = height;

            var w = Math.round(c.width() * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
                h = Math.round(c.height() * (imgInfo.ah / (imgInfo.h * imgInfo.s))),
                x = Math.round(-parseInt(img.css('left')) * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
                y = Math.round(-parseInt(img.css('top')) * (imgInfo.ah / (imgInfo.h * imgInfo.s)));
            canvas.getContext('2d').drawImage(original, x, y, w, h, 0, 0, width, height);
            return 
                width: width,
                height: height,
                type: type || 'jpeg',
                string: canvas.toDataURL("image/" + type || 'jpeg'),
            ;
        ;

但是当我将其转换为图像然后上传到服务器时。上传的图片是空白的。

为此，我使用 save.php 文件中的以下代码

<?php
if($_SERVER['REQUEST_METHOD'] == "POST") 
    define('UPLOAD_DIR', 'img/catalog/');

    $base64 = base64_decode(preg_replace('#^data:image/[^;]+;base64,#', '', $_POST['string']));
    $stamp = imagecreatefrompng('img/water.png');
    $im = imagecreatefromstring($base64);
    ob_start();

    $marge_right = 10;
    $marge_bottom = 10;
    $sx = imagesx($stamp);
    $sy = imagesy($stamp);

    imagecopy($im, $stamp, imagesx($im) - $sx - $marge_right, imagesy($im) - $sy - $marge_bottom, 0, 0, imagesx($stamp), imagesy($stamp));

    $file = UPLOAD_DIR . uniqid() . '.jpg';
    header('Content-type: image/');
    $success = imagejpeg($im, $file, 100);
    imagedestroy($im);
    echo "$file";

    

?>

从 PC 一切正常，但是当我从任何移动设备上传图像时，图像是空白的。当我将它放大到最大尺寸时，一切正常。

你能告诉我哪里错了吗？

【问题讨论】：

我猜源矩形计算不正确或需要额外的钳位，因为 ios 似乎对此和 drawImage 有问题。尝试使用固定的已知有效尺寸进行测试，看看问题是否消失。

是的，如果“任何移动设备”只是 ios 设备，this 可能会有所帮助。您也可以尝试将画布附加到文档中而不是上传它，因为问题来自drawImage，而不是来自toDataURL。

是的，iOS 和 drawImage 的问题。

【参考方案1】：

我已经更改了我的脚本。

this.data = function(width, height, filetype) 

            var self = this,
                imgInfo = self.imgInfo,
                c = self.eles.container,
                img = self.eles.img;

            var original = new Image();
                original.src = img.attr('src');

            // draw image to canvas
            var canvas = document.createElement('canvas');
                canvas.width = width;
                canvas.height = height;

            var w = Math.round((c.width() - (0 * 2)) * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
                h = Math.round((c.height() - (0 * 2)) * (imgInfo.ah / (imgInfo.h * imgInfo.s))),
                x = Math.round(-(parseInt(img.css('left')) - 0) * (imgInfo.aw / (imgInfo.w * imgInfo.s))),
                y = Math.round(-(parseInt(img.css('top')) - 0) * (imgInfo.ah / (imgInfo.h * imgInfo.s)));

            canvas.getContext('2d').drawImage(original, x, y, w, h, 0, 0, width, height);

            data = 
                width: width,
                height: height,
                image: canvas.toDataURL("image/"+filetype),
                filetype: filetype
            ;

            return data;
        ;

现在它适用于 iOS，但我还有另一个问题。当我从相机上传照片时，它会自动旋转。

【讨论】：

iOS 以横向存储纵向图像，并在 EXIF 中将图像标记为旋转。您可以使用 exiftool 或 exif-js 找到并修复它。