<!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. 转载：IIS 之 连接数、并发连接数、最大并发工作线程数、队列长度、最大工作进程数

    一.IIS连接数 一般购买过虚拟主机的朋友都熟悉购买时,会限制IIS连接数,顾名思义即为IIS服务器可以同时容纳客户请求的最高连接数,准确的说应该叫“IIS限制连接数”. 客户请求的连接内容包括: [ ...

  2. pyautogui 文档（一）：简介

    PyAutoGUI 可实现控制鼠标.键盘.消息框.截图.定位等功能,最近做了个自动化需要这些,故了解并记录下 自动化需要操作win7上的一个app,用PyAutoGUI做的,定位坐标,点击鼠标等,但是 ...

  3. centos7 端口3306无法连接问题

    MySQL建用户的时候会指定一个host,默认是127.0.0.1/localhost,那么这个用户就只能本机访问,其它机器用这个用户帐号访问会提示没有权限,host改为%,表示允许所有机器访问. G ...

  4. 20175234 2018-2019-2 《Java程序设计》第七周学习总结

    目录 20175234 2018-2019-2 <Java程序设计>第七周学习总结 教材学习内容总结 String类常用用法 Date类与Calendar类常用用法 Math类的常用方法 ...

  5. windows 下安装redis

    https://github.com/MicrosoftArchive/redis/releases redis 服务安装到系统 redis-server.exe --service-install ...

  6. VirtualBox CentOS7 Mini 安装增强工具

    安装相关依赖 # yum install vim gcc kernel kernel-devel bzip2 -y # reboot 点击虚拟机菜单栏 => 设备 => 安装增强功能 # ...

  7. CSS定位网页中的元素

    relative相对定位 偏移设置:left.right.top.bottom 值单位:px 元素的规律: 相对定位元素的规律 设置相对定位的盒子会相对它原来的位置通过指定偏移,到达新的位置. 设置相 ...

  8. 关于签名sign的坑

    在有些支付文档或其他文档都会要求签名验证 /** * description:签名 * function name:sign * @param $data * @return string */fun ...

  9. 给pdf添加导航目录

    给pdf添加导航目录 我们下载pdf书籍经常需要以下导航功能,没有导航的pdf根本看不下,接下来会分享我添加导航的方法 首先需要下载工具软件,链接: http://t.cn/Exyss1G 打开软件, ...

  10. C# 互通操作 （二）基础知识1

    [DllImport("user32.dll", EntryPoint = "MessageBox")] public static extern int De ...