首页 > 其他分享 >图片预览

图片预览

时间:2023-06-26 19:56:57浏览次数:43  
标签:FR 预览 let imgEle document myimg 图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" name="" id="myimg"><button>上传</button>
    <script>
        // 图片预览 
        let myimg = document.querySelector("#myimg");
        myimg.onchange = function(){
            // 获取文件对象 
            console.log(this.files[0]);
            let file = this.files[0]
            // 把文件对象转成base64格式 
            let FR = new FileReader();
            FR.readAsDataURL(file);  // 把 文件作为 url读取出来
            FR.onload = function(){
                // 获取读取的结果 
                console.log(this.result);
                let imgEle = document.createElement("img");
                imgEle.src = this.result;
                document.body.appendChild(imgEle);
            }
        }


    </script>
</body>
</html>

  

标签:FR,预览,let,imgEle,document,myimg,图片
From: https://www.cnblogs.com/wh024/p/17506568.html

相关文章

  • 通过Python的fitz库提取PDF中的图片——(邓棋文)
    我来自广东工业大学的邓棋文,作为一个Python初学者,我们经常会遇到需要从PDF中提取信息的情况。今天,我要分享的是如何使用fitz库(它是PyMuPDF的一个别名)从PDF文件中提取图片。PyMuPDF是一个强大的PDF处理库,它的功能包括文本提取、图片提取、分割和合并等。安装fitz库首先,我们需要安......
  • 基于Java+selenium+Chrome,实现截取html页面内容并保存为图片
    1、需求实现Java程序发送邮件,并将输入的多个页面转为pdf类型附件一同发送出去。而页面如何转为pdf呢?其中的一个方案就是先将html页面转为图片,再将图片合并为pdf。此文记录的是html=>png过程。2、开发主要依赖<!--html2image--><dependency><groupId>org.seleniumhq.se......
  • node服务 图片合并echarts图表,绘制方框
    效果图:环境及依赖配置node版本参考:v14.18.3npm版本参考:6.14.15环境安装Mac系统需要先将Homebrew升级到与系统匹配的版本系统命令MacOSXbrewinstallpkg-configcairopangolibpngjpeggifliblibrsvgpixmanUbuntusudoapt-getinstallbuild-essentia......
  • C#图片旋转
    这里以Bitmap为例说明问题。可以看到,旋转方法需要传入一个参数,而这个参数是一个枚举类型,RotateFlipType。系统提供了两大类型的旋转,1.旋转后不翻转。2.旋转后接着翻转。翻转的轴可以为X和Y,对应为水平和垂直。经测试,它们的这样分的,如图所示,3代表水平的轴,2代表垂直的轴。 ......
  • IE7下图片缩放失真fix
    此篇主要是介绍ie7下图片被拉伸导致的锯齿 解决方法: 增加这个样式规则  -ms-interpolation-mode:bicubic语法: -ms-interpolation-mode  nearest-neighbor   ------usenearestneighborinterpolationmodebicubic            ------use......
  • RoundedImageView 图片圆角
    先插入第三方库:implementation'com.makeramen:roundedimageview:2.3.0'之后<com.makeramen.roundedimageview.RoundedImageView    android:id="@+id/iv_beauty"    android:layout_width="120dp"    android:layout_height=&qu......
  • 帝国CMS 复制word里面带图文的文章,图片可以直接显示
    ​ 1.编辑器修改(可选)1.1在 ueditor/config.json 中添加代码块    /* 上传word配置 */    "wordActionName":"wordupload",/* 执行上传视频的action名称 */    "wordFieldName":"upfile",/* 提交的视频表单名称 */    "wordPathFormat":"/p......
  • 动易CMS 复制word里面带图文的文章,图片可以直接显示
    ​图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM.plugins['autoupload'],然后找到autoUploadHandler方法,注释掉其中的代码。加入下面的代码://判断剪贴......
  • 超简约前端点击图片弹窗放大(手机端)
    .markImg{width:100%;height:100%;position:fixed;left:0;right:0;bottom:0;top:0;background:rgba(0,0,0,0.5);padding:15px;box-sizi......
  • Nginx https配置http的图片服务
    1.在Nginx配置网站的https服务#HTTPSserver#server{listen443ssl;server_namelocalhost,10.11.1.68;ssl_certificateca.crt;ssl_certificate_keyca.key;ssl_session_cacheshared:SSL:1m;......