<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <script type="text/javascript">

        window.onload = function() {

            draw();

            var dlButton = document. getElementById ("baocun");

            bindButtonEvent (dlButton, "click", saveAsLocalImage);

        };

        function draw() {

            var canvas = document. getElementById ("thecanvas") ;

            var ctx = canvas.getContext("2d") ;

            ctx.fi11Style = "red";

            ctx.fillRect(20,20,100,100);

        }

        function bindButtonEvent (element, type, handler){

            if(element.addEventListener) {

                element. addEventListener (type, handler, false) ;

            }

            else{

                element.attachEvent('on'+type, handler) ;

            }

        }      

        function saveImageInfo(){

            var mycanvas = document. getElementById("thecanvas") ;

            var image  = mycanvas . toDataURL ("image/png") ;

            var w=window. open('about:blank', 'image from canvas') ;

            w.document.write("<img src=' "+image+"' alt='from canvas'/>") ;

        }

        function saveAsLocalImage () {

            var myCanvas = document .getElementById ("thecanvas") ;

            var image = myCanvas. toDataURL ("image/png") . replace ("image/png", "image/ octet-stream");

            window.location.href=image;

        }

    </script>

    <div>

        <canvas width="100" height="100" id="thecanvas"></canvas>

        <button id="baocun" atyle= "position: absolute;top: 120px:left: 33"></button>

    </div>

</body>

</html>

JS 将canvas画布保存到本地的更多相关文章

  1. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  2. Canvas保存图片保存到本地

    使用Canvas绘图,将图片保存到本地方法 一.使用HTML5 a标签的download属性,将图片保存到本地,不需要链接服务器 关于download属性:HTML5 <a>标签downl ...

  3. node.js抓取网上图片保存到本地

    用到两个模块,http和fs var http = require("http");var fs = require("fs"); var server = h ...

  4. [技术博客]海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

  5. 微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)

    最近在学小程序,在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了. 这里用到的方法是: wx.canvasToTempFilePath(),该方法作用是把当前画布指定区域的内容导出 ...

  6. 【亲测可用网上的不靠谱居多】一个完整的用canvas画内容然后保存到本地的例子

    涉及好多个问题 比如保存到本地有黑色背景 怎么用把文字和图 画到画布上 腾讯的东西就是坑多了 直接上代码吧 啥也不说额 pic.wxml <view class='container'> ...

  7. js截图及绕过服务器图片保存至本地（html2canvas）

    今天要分享的是用html2canvas根据自己的需求生成截图,并且修复html2canvas截图模糊,以及绕过服务器图片保存至本地. 只需要短短的几行代码,就能根据所需的dom截图,是不是很方便,但是 ...

  8. 转载：将画布(canvas)图像保存成本地图片的方法

    之前我曾介绍过如何将HTML5画布(canvas)内容转变成图片形式,方法十分简单.但后来我发现只将canvas内容转变成图片输出还不够,如何能将转变后的图片保存到本地呢? 其实,这个方法也是非常简单 ...

  9. canvas生成二维码，并下载保存为本地的图片

    function getTicket(id,salt){//qrcode生成canvas二维码 $(".zc-mask").show(); $(".edit-box&qu ...

随机推荐

  1. ES6学习笔记（函数）

    1.函数参数的默认值 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log(' ...

  2. DIV+CSS详解

    DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...

  3. [剑指Offer]29-顺时针打印矩阵-Java

    题目链接 https://www.nowcoder.com/practice/9b4c81a02cd34f76be2659fa0d54342a?tpId=13&tqId=11172&t ...

  4. project6 PIT游戏

    [理解知识] 说了半天,得在有source的地方stop. 之前没参与,现在marker从某渠道中进来了.就记录. 每个过程表格中记录的渠道都是进入的渠道. 记录的是没见过marker的.进入的渠道. ...

  5. 解决了好几天的关于django xadmin后台增加链接并执行函数的问题

    由于xadmin后台封装的完整性,想要在后台做一些改动对于新手来说还是有点困难,目前解决的第一个问题: 在admin后台增加链接,使其改变上级签收状态 如图 点击签收按钮之后,改变其状态 代码展示: ...

  6. 防火墙配置（CiscoPT&GNS3）

    第一部分:扩展ACL 拓扑图 地址表 Device Interface IP address R1 F 0/0 172.16.19.1 F 0/1 10.3.19.1 S 0/0/1 10.1.19. ...

  7. Java并发编程之同步

    1.synchronized 关键字 synchronized 锁什么?锁对象. 可能锁对象包括: this, 临界资源对象,Class 类对象. 1.1 同步方法 synchronized T me ...

  8. STL基础复习

    stl容器:vector,deque,list,map/multimap,set 特殊容器:stack,queue,priority_queue 通用操作 size()  返回当前容器元素数量 emp ...

  9. Centos7下面配置客户端OpenVPN

    安装 openvpn yum install -y openvpn vim 配置默认的 daemon 文件 vim /usr/lib/systemd/system/openvpn@.service [ ...

  10. Quartz.Net进阶之六：详述 JobStores

    一.介绍 今天开始学习 JobStore,别的先不说,也不用翻译软件来翻译,直接从字面意思看来理解一下.我第一眼的感觉就是 job 是任务的意思,Store 是商店的意思,连起来就是可以存储 Job ...