展示图片

import cv2
image=cv2.imread('red_panda.jpg')
gray_img=cv2.cvtColor(image,cv2.COLOR_BGR2GRAY)
cv2.imshow('Gray panda',gray_img)
cv2.imshow('Red panda',image)
cv2.waitKey(0)
cv2.destroyAllWindows()

Line1：导入opencv

Line2：载入图片，将其定义为变量image。

如果图片就在python文件里，路径形式为（‘example.jpg’）

如果图片在桌面上或别的地方，路径形式为（‘C:\users\myusername\Desktop\red_panda.jpg’）

Line3：将原本的图片变成由黑白构成的图，即灰度图。

Line4和Line5：展示了灰度图和原图。

Line6：等待用户键入一个键后窗口才消失，不然图片会一闪而过。

Line7：在这个简单的代码里没有影响，但是好像在较大的程序里会有影响，一般看到的代码最后都加了这个。

最后显示

保存图片

import cv2
image = cv2.imread("red_panda.jpg")
gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
cv2.imwrite("gray_panda.jpg", gray_image)

之前都是用截图的，终于学到了我可以看得懂的保存。

最后一行的imwrite最为关键，总共需要输入两个参数。

第一个参数，是保存的图片标题。

想要png格式的只要将上面的jpg改成png即可。

第二个参数，是想要保存的图片，上面的例子中想要保存的是灰度图。

原来文件夹里

保存后的文件夹

 学习的原文链接：Loading images - OpenCV 3.4 with python 3 Tutorial 1 - Pysource

更新展示图片 value传值即可显示

<div class="layui-input-block">
   <input name="application" type="hidden" value="{$data.application}">
    <script>$('[name="application"]').uploadMultipleImage()</script>
    <p class="help-block"><span style="color: #d43f3a">*注</span>&nbsp;上传图片的最佳尺寸：200像素*640像素，格式png，jpeg，jpg，gif；大小不超过 <5Mb</p>
</div>

多图片显示

<div class="layui-input-block" style="margin: 30px 0">
    {foreach $application as $key=>$value}
    <img data-tips-image style="top: 0;left: 130px; width:126px;height:126px" src="{$value}" class="margin-right-5 text-top">
    {/foreach}
</div>

效果图

以模态框形式的展示写法

<a data-title="合同扫描件预览" data-tips-text="合同扫描件预览"
  data-modal="{:url('PurchaseContract/scanning_file')}?id={$vo['id']}"
  class="layui-badge layui-bg-green margin-left-5">
   合同扫描件
</a>

前端代码

<style type="text/css">
    .form_left{text-align: left;}
</style>
<form onsubmit="return false;" action="{:request()->url()}" data-auto="true" method="post" class='layui-form layui-card' autocomplete="off" id="file">
    <div class="think-box-shadow">
        <div class="layui-row margin-bottom-15">
            <label class="layui-col-xs12" style="text-align: right">
                {notempty name='$id'}<input type='hidden' value='{$id}' name='contract_id'>{/notempty}
                <button class="layui-btn layui-btn-warm layui-icon layui-icon-console" type='button' id="submit">上传合同扫描件</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </label>
        </div>
        <div class="hr-line-dashed"></div>
        <div class="layui-form-item">
            <label class="layui-form-label">合同扫描件<br><span class="nowrap color-desc">效果图</span></label>
            <div class="layui-input-block">
                <input name="design_pic" type="hidden" value="">
                <script>$('[name="design_pic"]').uploadMultipleImage()</script>
                <p class="help-block"><span style="color: #d43f3a">*注</span>&nbsp;上传图片的最佳尺寸：200像素*640像素，格式png，jpeg，jpg，gif；大小不超过 <5Mb</p>
            </div>
        </div>
    </div>
</form>
<script>
    window.form.render();
    //获取点击事件
    $('#submit').on('click',function(){
        var design_pic = $('input[name="design_pic"]').val();
        if($.trim(design_pic)==''){
            layer.msg('请选择扫描图片');
            return false;
        }
        $.post("{:url('PurchaseContract/signingPic')}",$('#file').serialize(),function(data){
            if(data.status==1){
                layer.msg(data.info);
                setTimeout(function(){
                    $('.layui-layer-close ').click();
                },5000);//1秒后可点击
                //刷新当前页
                window.location.reload();
            }
        })
    });
</script>

多图片上传显示结果页

多图片的展示html代码

<div class="layui-form-item">
    <label class="layui-form-label">合同扫描件<br>
        <span class="nowrap color-desc">
            效果图
        </span>
    </label>
    <div class="layui-input-block">
        <input name="design_pic" type="hidden" value="{$vo.scanning_copy}">
        <script>$('[name="design_pic"]').uploadMultipleImage()</script>
    </div>
</div>

多图片展示显示结果页

1. 请求方法加上responseType：‘blob’

2. 将图片流转成blob格式，通过window.URL.createObjectURL方法获取图片路径并展示