Question

一旦我在响应式html页面中使用angularjs上传base64图像并动态嵌入img标签，就会出现水平滚动。除了iphone设备纵向模式外，它在每个设备上都能正常工作（在景观模式下工作正常）。我也使用了视口来避免水平滚动。我已经尝试了css中几乎所有可用的东西，包括图像上的内联css和它的父div，但似乎没有什么对我有效。

＆＃13;

(\(*[CDEFGAB](?:b|bb)*(?:#|##|sus|maj|min|aug|m|M|°|[0-9])*[\(]?[\d\/]*[\)]?(?:[CDEFGAB](?:b|bb)*(?:#|##|sus|maj|min|aug|m|M|°|[0-9])*[\d\/]*)*\)*)(?=[\s|$])(?! [a-z])

＆＃13;

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

＆＃13;

Answer 1

问题是画布大小，在将图像转换为base64水平滚动问题后，我将画布宽度缩小到250px。

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。

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

1 个答案: