javascript - 添加base64图像后，水平滚动仅出现在iphone中

Question

一旦我在响应式 html 页面中使用 angularjs 上传 base64 图像并动态嵌入 img 标签，就会出现水平滚动。除了 iphone 设备肖像模式(在横向模式下工作正常)之外，它在所有设备上都运行良好。我还使用视口(viewport)来避免水平滚动。我已经尝试了 css 中几乎所有可用的东西，包括图像上的内联 css 和它的父 div，但似乎对我没有任何作用。

body {
    overflow-x: hidden;
}

.upload_image_gallery {
    display: inline-block;
    position: relative;
    max-width: 470px;
    overflow: hidden;
}

.upload_image_gallery img {
    max-width: 80px;
    max-height: 50px;
    margin: 5px 10px 0px 0px;
    border-radius: 4px;
}

.upload_image_gallery .upload_image_item {
    position: relative;
    margin-top: 5px;
    margin-right: 12px;
    float: left;
}

.upload_image_gallery i.fa-close {
    color: #fff;
    background: #a94442;
    border-radius: 50%;
    padding: 2px 3px;
    font-size: 11px;
    position: absolute;
    right: 2px;
    top: -5px;
    cursor: pointer;
}

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="upload_image_gallery">
        <div class="upload_image_item" ng-repeat='image in images'>
            <i class="fa fa-close" ng-click="remove_gallery_img($index)"></i>
            <img ng-show="image" ng-src="{{ image.resized.dataURL}}" />
    </div>
</div>

Answer 1

问题是 Canvas 大小，在将图像转换为 base64 水平滚动问题后，我将 Canvas 宽度的大小缩小到 250 像素后，问题就解决了。

var limit_val = 250;
var cust_ratio = Math.min(limit_val / width, limit_val / height);

if (width > height) {
    if (width > limit_val) {
        width = limit_val;
        height = height * cust_ratio;
    }
} else {
    if (height > limit_val) {
        height = limit_val;
        width = width * cust_ratio;
    }
}


canvas.width = width;
canvas.height = height;

var ctx = canvas.getContext("2d");
ctx.drawImage(origImage, 0, 0, width, height);
return canvas.toDataURL(type, quality);

为了获得图像的实际大小，我必须创建单独的函数来保留原始大小，以便我可以将其发送到 api。