<!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. 用eclipse创建动态web项目手动生成web.xml方法

    建一个web项目,后来在用到web.xml文件时,才发现项目创建时没有自动创建web.xml文件. 在创建的项目上单击右键,然后单击java EE Tools下的用红线圈住的地方,然后查看你的WEB- ...

  2. OpenTSDB/HBase的调优过程整理

    背景 过年前,寂寞哥给我三台机器,说搞个新的openTSDB集群.机器硬件是8核16G内存.3个146G磁盘做数据盘. 我说这太抠了,寂寞哥说之前的TSDB集群运行了两年,4台同样配置的机器,目前hd ...

  3. layer is not defined

    项目中使用layui中,引入新旧版本出现的一个问题. 使用console.log(layer) 打印出来的,显示使用的版本是1.8.0 但是页面中引入的layui有好几个.就是不使用最新的. /*这里 ...

  4. vue全局API

    一.Vue.extend() 顾名思义  extend  继承,官方给出的解释是   (使用基础 Vue 构造器,创建一个“子类”.参数是一个包含组件选项的对象.) Vue构造器是指  vue是一个构 ...

  5. IDEA中，将项目加入maven管理。

    在项目上右键->Add Framework Support Choose Maven 生成pom.xml 在<project>下配置国内仓库 <properties>&l ...

  6. openstack系列文章(1)devstack安装测试Queens

    1.在OpenStack 圈子中,有这么一句名言:”不要让朋友在生产环境中运行DevStack.但是初学者在没有掌握OpenStack CLI的情况下用devstack安装测试环境还是不错的.本系列文 ...

  7. P2024 食物链

    题面:P2024 食物链 emmm其实不太难想 开三倍的数组 1~n:是当前动物的同类 n~2*n:是当前动物吃的动物 2*n~3*n:是吃当前动物的动物 emmmm #include<iost ...

  8. “天龙八步”细说浏览器输入URL后发生了什么

    本文摘要: 1.DNS域名解析: 2.建立TCP连接: 3.发送HTTP请求: 4.服务器处理请求: 5.返回响应结果: 6.关闭TCP连接: 7.浏览器解析HTML: 8.浏览器布局渲染: 总结 输 ...

  9. Java程序简介

    ---恢复内容开始--- java程序的基本构成: HelloDate.java package 语句 import 语句 类定义 -class 一个文件只能有一个public 类 (与文件同名) 类 ...

  10. java 基本原则

    开闭原则:当应用的需求改变时,在不修改软件实体的源代码或者二进制代码的前提下,可以扩展模块的功能,使其满足新的需求. 可以通过“抽象约束.封装变化”来实现开闭原则,即通过接口或者抽象类为软件实体定义一 ...