预览图片_ranger预览图片 - CSDN
精华内容
参与话题
  • 预览图片的两种方法

    2011-08-11 15:02:05
    function ShowImage(path){  document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;  }  function t
     <html> 
    <head></head>
    <BODY>
      <script language="javascript">
      function ShowImage(path){
      document.all.divShow.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
      }
      function test(){
      document.all.showimg.src=document.all.file1.value;
      }
      </script>
      <INPUT style="Z-INDEX: 101; LEFT: 232px; POSITION: absolute; TOP: 272px" type="file"οnchange="ShowImage(this.value)">
      <div id="divShow" style="FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);WIDTH:274px;HEIGHT:100px">
      <input type="file" id="file1" οnchange="test()"><br/>
      <img id="showimg" style="width:200px;height:200px;">
      </BODY>
    </html>
    展开全文
  • 浏览器下载文件主要还是看文件保存的时候有没有设置正确的conten-type,有的话浏览器访问url时会自动打开该文件将内容显示在页面上,前提时浏览器本身能识别这个文件类型,比如图片/文档/文本等,否则浏览器则会默认...

    浏览器下载文件主要还是看文件保存的时候有没有设置正确的conten-type,有的话浏览器访问url时会自动打开该文件将内容显示在页面上,前提时浏览器本身能识别这个文件类型,比如图片/文档/文本等,否则浏览器则会默认直接下载该文件。。。当然如果后端能直接返回文件流(bolb类型)的话就好处理了)

    用js实现强制下载图片(经测试IE全版本不支持):

    downloadIamge(imgsrc, name) {//下载图片
       let image = new Image();
       image.src = imgsrc;
       // 解决跨域 Canvas 污染问题
       image.setAttribute("crossOrigin", "anonymous");
       image.onload = function() {
           let canvas = document.createElement("canvas");
           canvas.width = image.width;
           canvas.height = image.height;
           let context = canvas.getContext("2d");
           context.drawImage(image, 0, 0, image.width, image.height);
           let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
           let a = document.createElement("a"); // 生成一个a元素
           a.download = name; // 设置图片名称
           a.href = url; // 将生成的URL设置为a.href属性
           a.click()
       }
    }

    预览PDF(此链接也是pdf.js实现):

    let a = document.createElement('a')
    a.target = "_blank"
    a.href = 'http://mozilla.github.io/pdf.js/web/viewer.html?file='+fileUrl
    document.body.appendChild(a)
    a.click()

    预览文档(利用微软提供的方案):

    let a = document.createElement('a')
    a.target = "_blank"
    a.href = 'https://view.officeapps.live.com/op/view.aspx?src='+fileUrl
    document.body.appendChild(a)
    a.click()
    /*这个文件地址需满足以下几个条件:
    (1)在浏览器是可以访问的;
    (2)需域名访问,IP无效;
    (3)访问端口为80;*/

    html内容导出为PDF:

    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    import moment from 'moment'
    export default (title, id)=> {
        var element = document.getElementById(id)
        element.scrollIntoView(true)
        window.scrollTo(0, 0);
        setTimeout(() => {
          html2Canvas(element).then(function(canvas) {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
    
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            var padding = 10
            //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 592.28 / contentWidth * contentHeight;
    
            var pageData = canvas.toDataURL('image/jpeg', 1.0);
    
            var pdf = new JsPDF('', 'pt', 'a4');
    
            //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围,无需分页
            if (leftHeight < pageHeight) {
              pdf.addImage(pageData, 'JPEG', padding, padding, imgWidth-padding*2, imgHeight);
            } else {
              while (leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', padding, position, imgWidth-padding*2, imgHeight)
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if (leftHeight > 0) {
                  pdf.addPage();
                }
              }
            }
            pdf.save(title + moment(Date.now()).format('YYYY-MM-DD') + '.pdf');
          });
        }, 0);
    }

    流预览、流转base64预览

    后端直接返回文件类型,前端请求加一个responseType: 'blob',得到blob对象:

    callback: (res)=>{
       if(res){
              let blob = new Blob([res], {type: "application/pdf"})
              //1.将blob转base64通过内嵌iframe预览
              var reader = new FileReader()
              reader.readAsDataURL(blob);
              reader.onload = function(){
                 console.log(reader.result); 
                 sessionStorage.PDF = reader.result
                 window.open('/PDFviewer')
              };
              //2.直接预览
              if (window.navigator && window.navigator.msSaveOrOpenBlob){
                  window.navigator.msSaveOrOpenBlob(blob,'');
              }else{
                  window.open(window.URL.createObjectURL(blob))
              }
        }else{
            message.warning(res.msg)
        }
    }

     

    展开全文
  • 图片预览

    2020-10-20 17:06:39
    使用原生JS的图片预览(仅有简单的点击放大功能) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #containerId { position:fixed; z-index:...

    使用原生JS的图片预览(仅有简单的点击放大功能)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
        #containerId {
    	  position:fixed;
    	  z-index:2000;
    	  left:50%;
    	  top:50%;
    	  transform:translate(-50%,-50%);
        }
        #bigImgId {
    	  width:1000px;
    	  height:500px;
        }
    </style>
    
    <script >
        function viewImg(){
    	  let smallImg = document.getElementById('smallImgId'),
    		  bigImg = document.getElementById('bigImgId'),
    		  container = document.getElementById('containerId'),
    		  imgSrc = smallImg.getAttribute('src');
    	  bigImg.setAttribute('src',imgSrc);
    	  container.style.display = "block";
        }
        function closeViewImg(){
    	  let container = document.getElementById('containerId');
    	  container.style.display = "none";
        }
    </script>
    </head>
    <body>
        <img id="smallImgId" onclick="viewImg()" src="本地图片路径\dog.png"/>
        <div style="display:none;" id="containerId" >
    	    <img onclick="closeViewImg()" src="" id="bigImgId" />
        </div>
    </body>
    </html>


    图片预览插件v-viewer(用于 Vue 的图像查看器)---可放大、缩小、旋转等

    v-viewer官网地址:https://mirari.cc/v-viewer/

    1、npm install v-viewer;

    2、import 'viewerjs/dist/viewer.css';

          import Viewer from 'v-viewer';

          Vue.use(Viewer);

    3、使用:

    1)以指令的形式使用:v-viewer(可以在任意标签上使用,该标签下的img元素即具有预览功能)。设置配置项(option):

         v- viewer="{movable: false}"。

     2)以组件的形式使用:使用插槽放置图片

    <viewer :options="options" :images="images" @inited="inited" class="viewer" ref="viewer">
       <template slot-scope="scope">
         <img v-for="src in scope.images" :src="src" :key="src">
         {{scope.options}}
       </template>
    </viewer>
    
    <script>
    import 'viewerjs/dist/viewer.css'; //引入样式
    import Viewer from "v-viewer/src/component.vue"; //引入组件
    
    // component中引入
        components: {
          Viewer
        },
        methods: {
            inited(viewer) {
              this.$viewer = viewer;
            }
        }
    </script>

     

    展开全文
  • 图片点击预览

    2020-07-16 23:30:03
    本人成功运行DEMO并且把图片隐藏起来,通过点击链接或者图片进行图片放大预览
  • 上传和预览图片

    2020-07-30 23:31:23
    ASP .Net Mvc、这是一个基础、但全面的项目源码,作者在利用空余时间慢慢整理归纳出来。
  • JS - 图片预览

    2019-12-12 21:04:42
    File​Reader File​Reader文档,FileReader对象用于读取计算机上的文件,使用File​Reader​.read​AsDataURL()将读取的内容转化为base64编码URL字符串 <input type="file" id='myFile' multiple="multiple"&...

    File​Reader

    File​Reader文档FileReader对象用于读取计算机上的文件,使用File​Reader​.read​AsDataURL()将读取的内容转化为base64编码URL字符串

    <input type="file" id='myFile' multiple="multiple">
    <img id='myImg' src="" alt="">
    document.querySelector('#myFile').onchange = function () {
      var read = new FileReader()
      read.readAsDataURL(this.files[0])
      read.onload = function () {
        url = read.result
        document.querySelector('#myImg').src = url
      }
    }

    URL.create​ObjectURL()

    URL.create​ObjectURL()文档,用于返回本地图片的资源地址

    参考博客:细说Web API中的BlobBlob

    <input type="file" id='myFile' multiple="multiple">
    <img id='myImg' src="" alt="">
    document.querySelector('#myFile').onchange = function () {
      let file = this.files[0]
      let URL = window.URL || window.webkitURL
      let imgURL = URL.createObjectURL(file)
    
      document.querySelector('#myImg').src = imgURL
    }

     

    展开全文
  • 预览图片

    2019-01-24 18:34:05
    let upLoadpic=$('#upLoadpic'); const fleReader = new FileReader(); let file=null upLoadpic.change(()=&gt;{ file=upLoadpic.prop('files')[0] fleReader.readAsDataURL(file) fleReader.onload = ...
  • uniapp预览图片预览图片列表并保存到手机 uniapp给我们提供很多现成的接口,这篇讲解一下图片预览接口 - uni.previewImage(OBJECT) 文章目录uniapp预览图片预览图片列表并保存到手机OBJECT 参数说明...
  • layui 预览图片

    千次阅读 2019-05-21 15:37:16
    预览图片显示原始大小 function previewImg(obj) { var img = new Image(); img.src = obj.src; var height = img.height + 50; //获取图片高度 var width = img.width; //获取图片宽度 va...
  • uni-app点击预览图片

    千次阅读 2020-01-13 21:57:46
    <image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFix" > _previewImage(image) { var imgArr = [];... //预览图片 uni.previewImage({...
  • 微信公众号:预览图片

    千次阅读 2018-05-12 09:12:55
    其实也没啥。。就一段代码:wx.previewImage({ current: '', // 当前显示图片的http链接 urls: [] // 需要预览图片http链接列表 });当然。是在微信公众号上抄袭的
  • 微信小程序wx.previewImage预览图片

    万次阅读 热门讨论 2017-05-25 13:18:21
    (1)网络的图片 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left; width:45%; height:200px; margin:2%; } .previewimg image{ width:100
  • 点击HTML的图片来预览图片

    千次阅读 2016-12-13 15:35:24
    转载自:PPHTMLImagePreviewDemo概述该DEMO主要用于演示iOS APP中点击HTML的图片来实现本地预览,如下是演示图 原理阐述1. 背景知识在了解该原理之前,需要知道如下内容: html中的点击动作一般都是通过javascript...
  • 小程序预览图片

    千次阅读 2019-02-16 11:49:28
    小程序实现预览图片:官方提供api接口 -- wx.previewImage 官方地址:https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html &lt;!-- wxml --&gt; &lt;view class='itme-img-...
  • APICloud(三):预览图片

    千次阅读 2017-04-21 15:38:00
    上一篇说的选择图片,且显示图片的img标签的父级A标签每个都添加了onclick事件previewThePic,该事件用来预览图片。且所有的A标签都添加在picList的div中。(PS:先说好层级关系,代码中获取img的src就不会晕了) ...
  • 界面选择图片后如下显示: 点击每张图片的时候,放大预览 var upload = layui.upload; 关键代码:选择图片后 choose: function (obj) { //将每次选择的文件追加到文件队列 var files = obj....
  • 在微信公众号开发 图片预览功能,例如 多张产品图片浏览 ,微信JSSDK 已经提供了 预览图片接口。效果图如下: 点击上面图片,弹出以下(这两张图,只是类似示例) 方案思路 wx.previewImage({ current: '', // ...
  • java实现预览图片,点击实现下一张

    千次阅读 2018-12-29 15:26:16
    项目上需要实现图片预览功能,页面展示图片预览小图,点击时弹出层展示原图,可以点击上一张和下一张等效果 1.本文将简单具体介绍实现的全过程,前后台代码和需要用到的插件 2.先上效果图 加载页面的效果 设置每...
  • uniapp点击预览图片

    2020-06-12 14:09:07
    photoClick(index) { let arr = []; arr.push(this.root... urls: arr //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以 }); } this.rootUrl :服务器地址 this.dataList[index].ImgP
  • 另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存。 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源;方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低...
1 2 3 4 5 ... 20
收藏数 130,368
精华内容 52,147
关键字:

预览图片