精华内容
下载资源
问答
  • 原生js 保存图片到本地

    千次阅读 2018-03-20 11:55:00
    <template> <div> <!--创建一个cavas 用来存放图片--> <canvas id="cavasimg" width="607" height="367" ></canvas>...-- 声明一个按钮 用来触发下载图片到...
    <template>
        <div>
            <!--创建一个cavas  用来存放图片-->
            <canvas  id="cavasimg" width="607" height="367"  ></canvas>
    
            <!--        声明一个按钮  用来触发下载图片到本地-->
            <input type="button" id="btnsavaImg" value="保存图片到本地" @click="Download()"/>
        </div>
    
    </template>
    <script> 
        export default {
            data () {
                return {
    
                }
            },
            methods:{
                Download(){
                    //cavas 保存图片到本地  js 实现
                    //------------------------------------------------------------------------
                    //1.确定图片的类型  获取到的图片格式 data:image/Png;base64,......
                    var type ='jpg';//你想要什么图片格式 就选什么吧
                    var d=document.getElementById("cavasimg");
                    var imgdata=d.toDataURL(type);
                    //2.0 将mime-type改为image/octet-stream,强制让浏览器下载
                    var fixtype=function(type){
                        type=type.toLocaleLowerCase().replace(/jpg/i,'jpeg');
                        var r=type.match(/png|jpeg|bmp|gif/)[0];
                        return 'image/'+r;
                    };
                    imgdata=imgdata.replace(fixtype(type),'image/octet-stream');
                    //3.0 将图片保存到本地
                    var savaFile=function(data,filename)
                    {
                        var save_link=document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                        save_link.href=data;
                        save_link.download=filename;
                        var event=document.createEvent('MouseEvents');
                        event.initMouseEvent('click',true,false,window,0,0,0,0,0,false,false,false,false,0,null);
                        save_link.dispatchEvent(event);
                    };
                    var filename=''+new Date().getSeconds()+'.'+type;
                    //我想用当前秒是可以解决重名的问题了 不行你就换成毫秒
                    savaFile(imgdata,filename);
                }
            },
            mounted () {
                $loading.hide()
    
                //canvas 绘制图片    支持手机端
    //            var canvas = document.getElementById('cavasimg');
    //            var ctx = canvas.getContext('2d');
    //            ctx.fillRect(0, 0, canvas.width, canvas.height);
    //            ctx.fillStyle = "red";
    //            ctx.font = 'italic bold 30px Helvetica ';
    //            ctx.fillText('楷体', 50, 50); 
                // canvas 插入图片   手机端点击没反应
                //获取canvas元素
                var cvs = document.getElementById("cavasimg");
                //创建image对象
                var imgObj = new Image();
                imgObj.src = "http://10.20.11.202:7099/file/readImage?basePath=/sys/201803/8c7d8835de18452695fad2f328c0680efile.jpg";
                imgObj.setAttribute("crossOrigin",'Anonymous')
                //待图片加载完后,将其显示在canvas上
                imgObj.onload = function(){
                    var ctx = cvs.getContext('2d');
                    ctx.drawImage(this, 0, 0);//this即是imgObj,保持图片的原始大小:470*480
                    //ctx.drawImage(this, 0, 0,1024,768);//改变图片的大小到1024*768
                } 
     
            }
        }

     

    转载于:https://www.cnblogs.com/web-fusheng/p/8608430.html

    展开全文
  • ②IE浏览器图片保存(IE其实用的就是window.open) function SaveAs5(imgURL) { var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000" ); for (; oPop.document.readyState != ...

    点击下载,则可下载上级兄弟节点

    <div class="form-group">
          <div>
               <h3>申请人信息</h3>
               <div class="sq_info">
                     <ul>
                          <li><span>姓名:</span><p>张三</p></li>
                          <li><span>姓名:</span><p>张三</p></li>
                          <li><span>本人照片:</span><img src="http://pic.pptbz.com/201506/2015070581208537.JPG" alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a></li>
                          <li><span>护照首页:</span><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=302701032,2300144492&fm=27&gp=0.jpg" alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a></li>
                           <li><span>价格:</span><p class="price">500元</p></li>
                        </ul>
                   </div>
              </div>
         <div>
    <script>
    function myBrowser() {
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if(isOpera) {
    return "Opera"
    }; //判断是否Opera浏览器
    if(userAgent.indexOf("Firefox") > -1) {
    return "FF";
    } //判断是否Firefox浏览器
    if(userAgent.indexOf("Chrome") > -1) {
    return "Chrome";
    }
    if(userAgent.indexOf("Safari") > -1) {
    return "Safari";
    } //判断是否Safari浏览器
    if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
    return "IE";
    }; //判断是否IE浏览器
    if(userAgent.indexOf("Trident") > -1) {
    return "Edge";
    } //判断是否Edge浏览器
    }
    
    //②IE浏览器图片保存(IE其实用的就是window.open)
    function SaveAs5(imgURL) {
    var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");
    for(; oPop.document.readyState != "complete";) {
    if(oPop.document.readyState == "complete") break;
    }
    oPop.document.execCommand("SaveAs");
    oPop.close();
    }
    
    //④点击事件下载(只需更改图片路径即可)
    function down_img(a){
    var osb = a;
    var sb = a.previousSibling.src;
    // console.log(sb)
    if(myBrowser() === "IE" || myBrowser() === "Edge") {
    //IE (浏览器)
    SaveAs5(sb);
    } else {
    //!IE (非IE)
    osb.href = sb;
    osb.download = "";
    }
    }
    </script>

    注意:previousSibling取上级兄弟节点,要注意标签之间不能有空格,否则会出现未定义

    转载于:https://www.cnblogs.com/xiaokele1314/p/9262632.html

    展开全文
  • 我的思路是这样的,定义两个变量,一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小,如果$index大于$exdex,说明是朝左翻页,反之,就是朝右翻页。如果是朝左翻页,就把...
  • 本文主要分享了原生JS实现图片左右不停运动的完整示例代码,可直接保存到HTML文档打开可以查看效果。下面跟着小编一起来看下吧
  • 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta .../t

    代码

    HTML5 视频音频参考文档:https://www.runoob.com/tags/ref-av-dom.html

    HTML5 视频参考文档:https://www.runoob.com/html/html5-video.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>摄像头拍照</title>
    </head>
    
    <body>
    	<div style="display: flex;">
    		<video id="video" width="480" height="320" controls></video>
    		<div style="margin: 30px;">
    			<button style="width: 100px;height: 30px;" id="capture">拍照</button>
    		</div>
    		<div style="margin: 30px;">
    			<button style="width: 100px;height: 30px;" onclick="clickBtn()">刷新页面</button>
    		</div>
    		<canvas id="canvas" width="480" height="320"></canvas>
    	</div>
    
    
    
    	<script>
    		function clickBtn() {
    			// history.go(0)
    			location.reload()
    		}
    
    		//访问用户媒体设备的兼容方法
    		function getUserMedia(constraints, success, error) {
    			if (navigator.mediaDevices.getUserMedia) {
    				//最新的标准API
    				navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    			} else if (navigator.webkitGetUserMedia) {
    				//webkit核心浏览器
    				navigator.webkitGetUserMedia(constraints, success, error)
    			} else if (navigator.mozGetUserMedia) {
    				//firfox浏览器
    				navigator.mozGetUserMedia(constraints, success, error);
    			} else if (navigator.getUserMedia) {
    				//旧版API
    				navigator.getUserMedia(constraints, success, error);
    			}
    		}
    
    		let video = document.getElementById('video');
    		let canvas = document.getElementById('canvas');
    		let context = canvas.getContext('2d');
    
    		function success(stream) {
    			//兼容webkit核心浏览器
    			let CompatibleURL = window.URL || window.webkitURL;
    			//将视频流设置为video元素的源
    			console.log(stream);
    
    			//video.src = CompatibleURL.createObjectURL(stream);
    			video.srcObject = stream;
    			video.play();
    		}
    
    		function error(error) {
    			console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    		}
    
    		if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    			//调用用户媒体设备, 访问摄像头
    			getUserMedia({ video: { width: 480, height: 320 } }, success, error);
    		} else {
    			alert('不支持访问用户媒体');
    		}
    
    		document.getElementById('capture').addEventListener('click', function () {
    			context.drawImage(video, 0, 0, 480, 320);
    		})
    	</script>
    </body>
    
    </html>
    
    展开全文
  • 原生JS实现图片懒加载 目录原生JS实现图片懒加载实现原理HTML 和CSS部分JS 实现原理 预先将图片的url保存在ing 的 data-src属性之中,通过js判断图片是否在浏览器的窗口之中,如果在便将data-src的值赋给src. HTML ...

    原生JS实现图片懒加载

    实现原理

    预先将图片的url保存在ing 的 data-src属性之中,通过js判断图片是否在浏览器的窗口之中,如果在便将data-src的值赋给src.

    HTML 和CSS部分

    这两部分比较简单,直接上代码:

    <!DOCTYPE html>
    <html>
        <head>
            <title>图片懒加载</title>
            <meta charset="utf-8">
            <style>
                ul{
                    margin:0;
                    padding: 0;
                    list-style: none;
                }
                ul li{
                    width: 500px;
                    height: 309px;
                }
                ul li img{
                    width: 100%;
                    height: 100%;
                }
            </style>
        </head>
        <body>
            <ul id="pictures">
                <li>
                    <img src="image/1.jpg" alt="" data-src="image/1.jpg">
                </li>
                <li>
                    <img src="" alt="" data-src="image/2.jpg">
                </li>
                <li>
                    <img src="" alt="" data-src="image/3.jpg">
                </li>
                <li>
                    <img src="" alt="" data-src="image/4.jpg">
                </li>
                <li>
                    <img src="" alt="" data-src="image/5.jpg">
                </li>
            </ul>
        </body>
    </html>
    

    JS

    如何判别图片是否在可视区是关键,由于浏览器窗口大小有限,一般无法显示整个HTML页面,所以页面大致被分为三个部分:处于浏览器窗口上面的部分(即被遮挡的部分),处于可视窗口内(即我们能看到的部分),处于浏览器窗口下面的部分(还未出现的部分)。
    先介绍几个函数:
    1、offsetTop:返回本元素上边框与父元素边框之间的距离,这里的父元素指的是非static定位元素(static定位即默认定位)。如果父元素(这里其实说祖先元素更合适),均为static定位,那么则返回和body的距离。
    2、documentElemet.scrollTop:返回页面的顶部scroll的长度,即页面上部被遮挡的长度。
    3、window.innerHeight:返回浏览器窗口的长度。
    由于CSS部分均未设置定位,此时img.offsetTop即返回到body的距离,即到HTML页面顶部的距离。
    因此只要img.offsetTop>scrollTop(即大于页面上部被遮挡的部分的长度),并且img.offsetTop<scrollTop+window.innerHeight(即图片还未处于页面下部被隐藏的部分),那么图片便全部或者部分出现在浏览器窗口之中。

     const pictures=document.getElementById("pictures");
                var len=pictures.children.length;
                var timer=null;
    
                window.addEventListener('scroll',function()
                {
                    if(timer)
                    {
                        clearInterval(timer);
                    }
                    timer=setInterval(()=>{
                            lazyloading();
                        },300)
                });
                function lazyloading()
                {
                   for(var i=0;i<len;i++)
                   {
                       var scrollTop=document.documentElement.scrollTop;
                       var height=window.innerHeight;
                       var offsetTop=pictures.children[i].offsetTop;
                       if(offsetTop>=scrollTop&&offsetTop<scrollTop+height)
                       {
                            var img=pictures.children[i].firstElementChild;
                            if(img.getAttribute("src")!==img.getAttribute("data-src"))
                            {
                                img.setAttribute("src",img.getAttribute("data-src"));
                            } 
                       }
                   }
              lazyloading()     
    

    上面的代码在window监听器中设置了定时器timer来延缓图片加载的时间,既可以更清楚的展现懒加载的效果,还能减少函数调用的频率。
    本人小白一个,也是参考了这位大佬的博客!大家多多支持原作者!点击此处前往

    展开全文
  • 原生JS实现切换图片demo 一个小小的学习页面,运用html、css、js基本知识,做一个切换图片的页面。
  • js 保存图片到本地

    万次阅读 2018-09-10 16:34:42
    原生js中: &lt;img src="./boy.png" class="img1"&gt;&lt;/img&gt; &lt;input type="button" value="下载" onclick="down('img1')"&...
  • // 保存上传图片的路径 if ( urls != null && urls . size ( ) > 0 ) { String url = "" ; for ( String s : urls ) { if ( url == null || url == "" ) { ...
  • 在项目开发过程中,经常会有图片导出的需求。 实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法 实现代码: function ...
  • // 传入路径,功能为本页面下载文件 function download(src: string) { var $a = document.createElement('a'); $a.setAttribute("href", src); $a.setAttribute("download", 'test.jpg'); ...
  • 注意的点二、微信原生保存图片到手机1. 解决说明2. 代码 前言 做了下保存图片的功能,记录一下吧 主要还是看开发文档吧,学会看文档比较重要 一、UNI-APP保存图片到手机 1. 需求描述 点击保存,将图片保存到手机上...
  • JS实现页面保存图片

    千次阅读 2020-09-16 14:43:30
    今天项目遇到一个需求为将一个页面中的某一部分DOM转为一张图片保存和上传到服务器的需求 这里我们需要使用到一个JS插件:dom-to-image,Github链接:https://github.com/tsayen/dom-to-image 这个插件可以使...
  • 点击上传后,读取上传的文件 // 点击上传图片 function uploadImg(){ let file = document.getElementById('uploadFile').files[0]; let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = ...
  • 最近在做公司项目的时候,有个小功能需要将图片存入数据库。可能大家觉得奇怪,还有人把图片存入数据库。当时我接受这个需求的时候也快疯了,一般都是只存图片路径的,但是人家这么要求只能照办了。当时在网上找了...
  • 一:图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中二:将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使用) blob (binary large object)二进制大...
  • 最精简的原生js开发,更方便扩展开发需要的业务 技术逻辑: 1.将div转为svg网络图片 2.将创建Canvas画布 3.将画布大小和div大小设置一样大 4.将svg img 画到Canvas的画布中 用方法 context.drawImage(img, 0,...
  • 使用原生js实现element-ui的message组件

    千次阅读 2021-06-07 19:33:29
    使用vue的朋友应该或多或少都知道element-ui组件吧,这篇博客我将使用原生js实现一个“低配”版本的message组件。 开始前先给出element-ui message组件的网址链接,不论是否有使用过,大家都可以参照的对比。 目标...
  • 原生js购物车

    2019-09-02 21:23:10
    原生js购物车 商品名称 数量 单价 小计 操作 西瓜 -0+ 单价:10 小计:0 操作: 木瓜 -0+ 单价:13 小计:0 操作...
  • 长按保存图片是现在一些宣传页H5中很常见的需求,但是js没有这样的能力,所以要么借助android或ios的原生能力,要么用canvas自己画一个(截屏),相比较原生成本太高,且必须依赖于app,相对于流传性很广且跨平台的H5...
  • 需求:移动端输入祝福内容和签名之后,点击生成图片的按钮,生成一张带有制定背景图片的明信片,明信片上带有输入框内容和签名。并自动保存。 关键字:canvas图文合成 图片生成 前端生成图片
  • PHP+js完美实现生成签名自动保存图片(支持多种图片格式)路径并下载下来,附带php原生代码和方法注释,简单明了。支持各种逻辑嵌入。
  • android原生js互调

    千次阅读 2018-01-19 22:30:13
    2.让webview支持js webView.getSettings().setJavaScriptEnabled(true); 3.加载网页 webView.loadUrl(url); 4.让webview加载网页 id_webview.setWebChromeClient(new WebChromeClient()); 2.原
  • 要求:原生js渲染,所以我们不能用v-for,只能用字符串拼接或者模版字符串来写 难点:如何获取到我点击了哪一行元素,我想有很多小伙伴最大的难点就是这个了。 如何去改变表格的内容,原生js没有vue那样的机制,数据...
  • 使用原生JS将html表格保存为excel

    千次阅读 2019-01-20 10:06:07
    < div id = " table_wrapper " > ... 后,每当点击这个链接,就会将 Blob 对象保存为指定类型的文件。 Demo体验地址: https://liuyib.github.io/blog/demo/blog/c-html-to-excel/ 以上 ?
  • 第一件事首先是微信的选择图片功能,就是微信发朋友圈选择图片的时候那个界面 //调用微信拍照功能 wx.chooseImage({ count: 1, // 默认9 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,882
精华内容 8,752
关键字:

原生js保存图片