css问题！如何提取图片中的一部分

Posted 2023-04-16

图片是圆角的左右两边，怎么写代码才能做到把图片区分开，左边的就用左边的圆角，右边的用右边的圆角。因为这张图片就整个是一幅图片。
高手帮帮忙
我就是想知道这个代码怎么写

用绝对定位..

background-position: -186px -22px; 定位背景的具体位置..

比如你这个整体图, 是一张背景 , 你就可以通过 background-position:XX
来定位 这个张背景图的具体显示那块内容.. 可以去试试..网上很多素材

光靠字面理解很难，最好自己动手实践
方法一：
<div style="width:600px;height:200px;background:url(路径图片中间部分切成1px宽) repeat-x">
<img src="路径图片左圆角" style="float:left"/>
<img src="路径图片右圆角" style="float:right"/>
</div>

方法二：
<div style="width:600px;height:200px;background:url(图片中间部分切成1px宽)">
<div style="background:url(路径图片左圆角) no-repeat;float:left;width:左圆角宽px;height:左圆角高px">
<div style="background:url(路径图片右圆角) no-repeat;float:right;width:右圆角宽px;height:右圆角高px">
</div>

注：切图时，圆角图片一定要连着圆角外的白色部分一起切，中间填充部分可以只切1px宽，实际高度进行填充 参考技术A 光靠字面理解很难，最好自己动手实践
方法一：
<div style="width:600px;height:200px;background:url(路径图片中间部分切成1px宽) repeat-x">
<img src="路径图片左圆角" style="float:left"/>
<img src="路径图片右圆角" style="float:right"/>
</div>

方法二：
<div style="width:600px;height:200px;background:url(图片中间部分切成1px宽)">
<div style="background:url(路径图片左圆角) no-repeat;float:left;width:左圆角宽px;height:左圆角高px">
<div style="background:url(路径图片右圆角) no-repeat;float:right;width:右圆角宽px;height:右圆角高px">
</div>

注：切图时，圆角图片一定要连着圆角外的白色部分一起切，中间填充部分可以只切1px宽，实际高度进行填充 参考技术B 最好分开来，一整个这样不好，用切图切就可以了，注意切图不要留空白。三个div，left right设置display:inline，这样三个div就可以在一行里了。然后用position:absolutive绝对定位 紧贴父div top:0 left设置left:0 right设置right:0 还有考虑浏览器兼容问题，看似小问题，实则不简单。代码自己写一下可以学很多东西，楼主试试吧。 参考技术C 用绝对定位..

background-position: -186px -22px; 定位背景的具体位置..

比如你这个整体图, 是一张背景 , 你就可以通过 background-position:XX
来定位 这个张背景图的具体显示那块内容.. 可以去试试..网上很多素材本回答被提问者采纳 参考技术D 用绝对定位..
background-position:
-186px
-22px;
定位背景的具体位置..
比如你这个整体图,
是一张背景
,
你就可以通过
background-position:XX
来定位
这个张背景图的具体显示那块内容..
可以去试试..网上很多素材
光靠字面理解很难，最好自己动手实践
方法一：
<div
style="width:600px;height:200px;background:url(路径图片中间部分切成1px宽)
repeat-x">
<img
src="路径图片左圆角"
style="float:left"/>
<img
src="路径图片右圆角"
style="float:right"/>
</div>
方法二：
<div
style="width:600px;height:200px;background:url(图片中间部分切成1px宽)">
<div
style="background:url(路径图片左圆角)
no-repeat;float:left;width:左圆角宽px;height:左圆角高px">
<div
style="background:url(路径图片右圆角)
no-repeat;float:right;width:右圆角宽px;height:右圆角高px">
</div>
注：切图时，圆角图片一定要连着圆角外的白色部分一起切，中间填充部分可以只切1px宽，实际高度进行填充

如何从图像中提取所需的文本部分，而不是使用 OCR 提取图像中的所有文本？

【中文标题】如何从图像中提取所需的文本部分，而不是使用 OCR 提取图像中的所有文本？

【英文标题】：How to extract the required parts of the text from the image instead of extracting all the text in an image using OCR?

【发布时间】：2021-12-18 23:59:25

【问题描述】：

以下是一些交易图像，我将它们从 PDF 文件转换为图像 (jpg)。

从 PDF 转换的图像

BCA Bank Maybank

现在，如何使用任何 OCR Python 包从图像（红色圆圈）中提取所需的文本部分，如下所示？

要提取的部分文本

BCA Bank Maybank

注意：我将 PDF 文件转换为图像 (jpg) 的原因是某些 PDF 文件是扫描的 PDF 文件，这意味着它们不是原生 PDF 文件。 我在上面展示的图像是从原生 PDF 文件转换而来的。

【参考方案1】：

好的，所以我建议删去上面图片中的银行数据（如果这些是公司/人的真实陈述......）。作为一个实验，我将图像的大小调整为 3 倍（因此调整了像素坐标），并在此处做了几个部分的示例。

#!/usr/bin/env python3
import pytesseract
from PIL import Image
from pprint import pprint

with Image.open("BCA_Bank.png") as img:
    img = img.resize((img.width*3, img.height*3))
    # Do a binary threshold on the image to make it solid black & white
    # the top two sections needed a different value than the bottom
    # because of font weight.
    topimg = img.convert("L").point(lambda p: 255 if p > 85 else 0).convert('1')
    bottomimg = img.convert("L").point(lambda p: 255 if p > 200 else 0).convert('1')

    sec1 = topimg.crop((29*3, 82*3, 358*3, 174*3))
    sec2 = topimg.crop((574*3, 83*3, 749*3, 163*3))
    tanggal = bottomimg.crop((41*3, 310*3, 86*3, 842*3))
    keterangan1 = bottomimg.crop((107*3, 291*3, 230*3, 757*3))
    keterangan2 = bottomimg.crop((239*3, 291*3, 388*3, 757*3))

    # This will open all 5 sections in temporary windows as image previews
    sec1.show()
    sec2.show()
    tanggal.show()
    keterangan1.show()
    keterangan2.show()

    # This could be abstracted so as not to be repetetive.
    sec1_text = pytesseract.image_to_string(sec1, config="--psm 6", lang="ind")
    sec2_text = pytesseract.image_to_string(sec2, config="--psm 6", lang="ind")
    tanggal_col = pytesseract.image_to_string(tanggal, config="--psm 4", lang="ind")
    keterangan1_col = pytesseract.image_to_string(keterangan1, config="--psm 4", lang="ind")
    keterangan2_col = pytesseract.image_to_string(keterangan2, config="--psm 4", lang="ind")

    headers = ["SEC1", "SEC2", "TANGGAL", "KETERANGAN1", "KETERANGAN2"]  #"CBG", "MUTASI", "SALDO"]
    col_data = [
        sec1_text.strip().splitlines(),
        sec2_text.strip().splitlines()
    ] + [
        [line.strip() for line in col.splitlines() if line]
        for col in [tanggal_col, keterangan1_col, keterangan2_col]
    ]
    pprint(dict(zip(headers, col_data)))

这只有在所有工作表的大小和结构几乎完全相同时才有效——因为.crop 调用专门从图像中选择框。

我不喜欢 pandas/numpy，所以我确信有一种更 Python 的方法可以使用这些库中的一个或两个来构造来自 tesseract 的解析数据。

*注意关于--psm 选项：

--psm 4 的意思是“假设有一列可变大小的文本。” --psm 6 表示“假设一个统一的文本块。”

在终端中，输入 tesseract --help-psm 了解更多信息。