<!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. webpack优化以及node版本

    最近做的这个项目webpack用的是1.X的版本,真的非常多的坑,然后最近在疯狂的做优化: 事情的起因是每次我npm run dev的时侯都需要5分钟+,这个速度真的是难以忍受,然后就尝试去做项目的优 ...

  2. Unity Awards 2018最佳资源

    好的工具与资源,将帮助你的开发,达到事办功倍,今天我们将为大家介绍荣获Unity Awards 2018最佳资源的获奖作品. 最佳艺术工具:Aura - Volumetric Lighting Aur ...

  3. Python开发【第十一篇】：Python操作MySQL

    本篇对于Python操作MySQL主要使用两种方式: 1.原生模块pymsql. 2.ORM框架SQLAchemy. pymsql pymsql是Python中操作MySQL的模块,其使用方法和MyS ...

  4. SQLServer 中有五种约束， Primary Key 约束、 Foreign Key 约束、 Unique 约束、 Default 约束和 Check 约束

    一直在关注软件设计方面,数据库方面就忽略了很多,最近在设计数据库时遇到了一些小麻烦,主要是数据库中约束和性能调优方面的应用,以前在学习 Sql Server 2000,还有后来的 Sql Server ...

  5. ASP.NET Core 添加NLog日志支持(VS2015update3&VS2017)

    1.创建一个新的ASP.NET Core项目 2.添加项目依赖 NLog.Web.AspNetCore 3.在项目目录下添加nlog.config文件: <?xml version=" ...

  6. 3D 数据

    1.3D 图 首先在进行 3D Plot 时除了导入 matplotlib ,还要额外添加一个模块,即 Axes 3D 3D 坐标轴显示: import numpy as np import matp ...

  7. JS学习记录------JS基本指令

    对未来的恐慌,和想成为一名自由开发的梦想.让我觉得应该点亮一个新的技能:WEB前端开发. 重新学习JS以及jQuery,让我在日常code的过程中可以更得心应手,毕竟,我爱代码. 这篇文章主要记录的内 ...

  8. mac电脑使用技巧和相关快捷键

    移动与选取 1. 光标移动 刚从 Windows 转过来的时候可能会发现,Mac 上没有 Home 和 End 键.其实,直接这样就好了: Cmd + ←  移至行首 (Home)Cmd + →  移 ...

  9. [精华][推荐]CAS SSO实现单点登录框架学习源码

    1.通过下载稳定版本的方式下载cas的相关源码包,如下: 直接选择4.2.1的稳定代码即可 2.我们项目中的版本版本使用maven apereo远程库去下载 通过远程maven库下载cas-serve ...

  10. Numpy 线性代数

    Numpy 提供了线性代数库 linalg , 该库包含了线性代数所需的所有功能,可以看卡下面的说明: 函数 描述 dot 两个数组的点积, 即元素对应相乘 vdot 两个向量的点积 inner 两个 ...