精华内容
下载资源
问答
  • 原生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

    展开全文
  • 本文主要分享了原生JS实现图片左右不停运动的完整示例代码,可直接保存到HTML文档打开可以查看效果。下面跟着小编一起来看下吧
  • 插件描述:支持图片预览、像素限制、大小限制、多图上传、更新模式下页面初始化加载图片更新时间:2020-09-2500:23:49更新说明:添加 删除时,同时删除服务器图片的功能,文档提供php实例。添加参数Url参数更新{ele:...

    30f0397fca834102eab8a71d07d50d09.png

    5b4b944461607cc871b1911f9854541f.png

    插件描述:支持图片预览、像素限制、大小限制、多图上传、更新模式下页面初始化加载图片

    更新时间:2020-09-25 00:23:49

    更新说明:添加  删除时,同时删除服务器图片的功能,文档提供php实例。添加参数Url参数更新 {

    ele: "#cupload", // 实例化的DOM对象,必需

    name: "image", // 图片input的name名,非必需,默认为image

    num: 1, // 可上传图片的数量,非必需,默认为1

    url: "./upload.php", // 异步上传url,非必需,无默认值

    deleteUrl: "./delete.php", // 删除url,删除时同时删除服务器图片,不写不删,非必需,无默认值

    width: 148, // 预览框的宽,单位为px,非必需,默认为148

    height: 148, // 预览框的高,单位为px,非必需,默认为148

    minSize: 1024, // 图片大小最小限制,单位为KB,非必需,无默认值

    maxSize: 2048, // 图片大小最大限制,单位为KB,非必需,无默认值

    limitedSize: 2048, // 图片大小要求,单位为KB,非必需,无默认值

    minWidth: 100, // 图片宽度最小限制,单位为px,非必需,无默认值

    minHeight: 100, // 图片高度最小限制,单位为px,非必需,无默认值

    maxWidth: 2000, // 图片宽度最大限制,单位为px,非必需,无默认值

    maxHeight: 2000, // 图片高度最大限制,单位为px,非必需,无默认值

    limitedWidth: 800, // 图片宽度要求,单位为px,非必需,无默认值

    limitedHeight: 800, // 图片高度要求,单位为px,非必需,无默认值

    data: ["1.png", "2.jpg"], // 编辑模式下初始显示的图片路径,非必需,无默认值

    }

    更新时间:2020/9/8 下午3:56:56

    更新说明:

    1. 优化部分细节

    2. 添加了Form表单提交的示例(需要在php环境下运行)

    3. 新增图片排序功能

    更新时间:2020-09-05 17:11:02

    更新说明:

    1. 添加多图选择,可同时选择多张图片添加到html

    2. 添加异步上传,新增url参数,用户添加图片后,可立即上传图片到url接口,并将接口返回的路径显示在html上。文档提供php实例

    参数更新:{

    ele: "#cupload", // 实例化的DOM对象id,必需

    name: "image", // 图片input的name名,非必需,默认为image

    num: 1, // 可上传图片的数量,非必需,默认为1

    url: './upload.php' //异步上传接口,非必需,无默认值。请保证接口的正确性

    width: 148, // 预览框的宽,单位为px,非必需,默认为148

    height: 148, // 预览框的高,单位为px,非必需,默认为148

    minSize: 1024, // 图片大小最小限制,单位为KB,非必需,无默认值

    maxSize: 2048, // 图片大小最大限制,单位为KB,非必需,无默认值

    limitedSize: 2048, // 图片大小要求,单位为KB,非必需,无默认值

    minWidth: 100, // 图片宽度最小限制,单位为px,非必需,无默认值

    minHeight: 100, // 图片高度最小限制,单位为px,非必需,无默认值

    maxWidth: 2000, // 图片宽度最大限制,单位为px,非必需,无默认值

    maxHeight: 2000, // 图片高度最大限制,单位为px,非必需,无默认值

    limitedWidth: 800, // 图片宽度要求,单位为px,非必需,无默认值

    limitedHeight: 800, // 图片高度要求,单位为px,非必需,无默认值

    data: ["1.png", "2.jpg"], // 编辑模式下初始显示的图片路径,非必需,无默认值

    }

    更新时间:2020-08-31 22:07:23

    更新说明:

    1. 修复部分bug

    2. 添加放大预览功能

    3. 介绍:该方法将图片转为base64格式存到了input中,用户只要使用普通form表单直接提交即可,其中 name参数可以设置提交的input的name值,后台接收form表单的参数后,该图片数据格式为数组,只要循环将base64数据转为图片存到本地即可。

    更新时间:2020-01-11 00:24:17

    使用方法

    引入js:

    在需要的位置添加html:

    实例化cupload对象:

    var cuploadCreate = new Cupload({

    ele: '#cupload-create',

    num: 3,

    });

    var cuploadUpdate = new Cupload({

    ele: '#cupload-update',

    num: 3,

    data: ["static/image/1.png", "static/image/2.png", "static/image/3.png"],

    });

    可选参数

    为方便比较和计算,部分参数为number型,已设置默认单位,不可再带单位。{

    ele: "#cupload", // 实例化的DOM对象id,必需,默认为cupload

    name: "image", // 图片input的name名,非必需,默认为image

    num: 1, // 可上传图片的数量,非必需,默认为1

    width: 148, // 预览框的宽,单位为px,非必需,默认为148

    height: 148, // 预览框的高,单位为px,非必需,默认为148

    minSize: 1024, // 图片大小最小限制,单位为KB,非必需,无默认值

    maxSize: 2048, // 图片大小最大限制,单位为KB,非必需,无默认值

    limitedSize: 2048, // 图片大小要求,单位为KB,非必需,无默认值

    minWidth: 100, // 图片宽度最小限制,单位为px,非必需,无默认值

    minHeight: 100, // 图片高度最小限制,单位为px,非必需,无默认值

    maxWidth: 2000, // 图片宽度最大限制,单位为px,非必需,无默认值

    maxHeight: 2000, // 图片高度最大限制,单位为px,非必需,无默认值

    limitedWidth: 800, // 图片宽度要求,单位为px,非必需,无默认值

    limitedHeight: 800, // 图片高度要求,单位为px,非必需,无默认值

    data: ["1.png", "2.jpg"], // 编辑模式下初始显示的图片路径,非必需,无默认值

    }

    展开全文
  • 原生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来延缓图片加载的时间,既可以更清楚的展现懒加载的效果,还能减少函数调用的频率。
    本人小白一个,也是参考了这位大佬的博客!大家多多支持原作者!点击此处前往

    展开全文
  • 我的思路是这样的,定义两个变量,一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小,如果$index大于$exdex,说明是朝左翻页,反之,就是朝右翻页。如果是朝左翻页,就把...
  • 在项目开发过程中,经常会有图片导出的需求。 实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法 实现代码: function ...
        

    在项目开发过程中,经常会有图片导出的需求。

    实现思路:需要创建a标签,然后把base64的图片转为为blob对象,再通过URL.createObjectURL方法复制给a标签的href属性,最后添加添加事件的方法

    实现代码:

    function downloadFile(content, fileName) { //下载base64图片
        var base64ToBlob = function(code) {
            let parts = code.split(';base64,');
            let contentType = parts[0].split(':')[1];
            let raw = window.atob(parts[1]);
            let rawLength = raw.length;
            let uInt8Array = new Uint8Array(rawLength);
            for(let i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], {
                type: contentType
            });
        };
        let aLink = document.createElement('a');
        let blob = base64ToBlob(content); //new Blob([content]);
        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型,是否冒泡,是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
        aLink.click();
    };

    使用:

    downloadFile('图片名称', 'data:image/png;base64,iVBORw0KGg....');
    展开全文
  • 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')"&...
  • Request消息分为三个部分: RequestLine:请求行 RequestHeader:请求头 RequestBody:请求正文 RequestLine:METHOD/path-to-resourceHTTP/Version-number 原生http模块请求图片保存到本地 ...
  • 原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> <head> <title>Title</title> <link rel="stylesheet" href="ht...
  • 混合开发 - 原生 js

    2020-02-14 09:26:08
    一、原生语言: 苹果手机:ios系统,由swift和c++/object-c语言编写,后缀名为 ipa(ios开发的安装包...[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FexkZS6h-1581643539945)(https://...
  • 原生JS基础知识 我的github 原型 定义 : 原型是function对象的一个属性 , 其值类型为对象 , 它定义了构造函数 new 出的所有对象的公共祖先 , 通过该构造函数产生的对象 , 可以继承该原型的属性和方法 [外链图片...
  • 最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以,有些...现在记录一下今天复习的原生js无缝轮播吧。 先上一张自拍镇楼,哈哈哈 首先先说一下思路吧,首先任意张图片以ul的形式保存显示...
  • 今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面。怎么个炫酷法呢,看看下面的图片大家就知道啦。 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity、...
  • 原地址,可以在线查看演示效果...原生js实现,打字小游戏。​fairysoftware.com完整代码,复制、保存为html即可使用,需要用一些图片,从上面的原地址获取。 <html> <head> <meta charset="utf-8"...
  • 原生JS 将数组的数据循环遍历到HTML中 html如下(图片地址为本地保存的) <div id="article"> <!-- <div class="info"> <div class="top"> <p class="shopName">第一烤场特色石棉烤肉&...
  • 上图为网易云盾的滑动拼图验证码,同一张图片裁剪的位置是固定的,猜想其应该有一个专门的图片库,保存了被裁剪的背景图和可移动的滑块。我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图。...
  • 文章主要由图片组成,看起来可能会不太方便,适合保存下来单张查看;既然来了,就看看在走吧,总会有些收获的;一、前端发展史二、JS基础入门1、认识浏览器2、JS基础知识初识JS-基础中的基础3、三大输出方式JS中的三...
  • 今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面。怎么个炫酷法呢,看看下面的图片大家就知道啦。 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity...
  • 文章主要由图片组成,看起来可能会不太方便,适合保存下来单张查看;既然来了,就看看在走吧,总会有些收获的;一、前端发展史二、JS基础入门1、认识浏览器2、JS基础知识初识JS-基础中的基础3、三大输出方式JS中的三...
  • 文章主要由图片组成,看起来可能会不太方便,适合保存下来单张查看; 既然来了,就看看在走吧,总会有些收获的; 一、前端发展史 二、JS基础入门 1、认识浏览器 2、JS基础知识 初识JS-基础中的基础 ...
  • 当点击选择对应的声音和图片时,保存对应的路径,在点击确定的时候,把对应的路径修改为保存的路径,可以修改背景音乐和图片了。 出牌规则点击出牌按钮的时候,触发牌类型判断的函数,判断牌类型是不是符合规则,
  • 原地址,可以在线查看演示效果...原生js实现,打字小游戏。​fairysoftware.com完整代码,复制、保存为html即可使用,需要用一些图片,从上面的原地址获取。 <html> <head> <meta charset="utf-8"...
  • 最精简的原生js开发,更方便扩展开发需要的业务 技术逻辑: 1.将div转为svg网络图片 2.将创建Canvas画布 3.将画布大小和div大小设置一样大 4.将svg img 画到Canvas的画布中 用方法 context.drawImage(img, 0,...
  • 文章主要由图片组成,看起来可能会不太方便,适合保存下来单张查看;既然来了,就看看在走吧,总会有些收获的;一、前端发展史二、JS基础入门1、认识浏览器2、JS基础知识初识JS-基础中的基础3、三大输出方式JS中的三...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 124
精华内容 49
关键字:

原生js保存图片