<html>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<head>
<script>
window.onload = function () {
draw();
var saveButton = document.getElementById("saveImageBtn");
bindButtonEvent(saveButton, "click", saveImageInfo);
var dlButton = document.getElementById("downloadImageBtn");
bindButtonEvent(dlButton, "click", saveAsLocalImage);
};
function draw() {
var canvas = document.getElementById("thecanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(125, 46, 138, 0.5)";
ctx.fillRect(25, 25, 100, 100);
ctx.fillStyle = "rgba( 0, 146, 38, 0.5)";
ctx.fillRect(58, 74, 125, 100);
ctx.fillStyle = "rgba( 0, 0, 0, 1)"; // black color
ctx.fillText("Gloomyfish - Demo", 50, 50);
}
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");
// here is the most important part because if you dont replace you will get a DOM 18 exception.
// var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream;Content-Disposition: attachment;filename=foobar.png");
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = image; // it will save locally
}
</script>
</head>
<body bgcolor="#E6E6FA">
<div>
<canvas width=200 height=200 id="thecanvas"></canvas>
<button id="saveImageBtn">Save Image</button>
<button id="downloadImageBtn">Download Image</button>
</div>
</body>
</html>

canvas.toDataURL 画布导出图片的更多相关文章

  1. canvas画布导出图片并下载

    近期在学习关于画布知识,关于 画布导出图片, 在导出jpeg格式的图片时,会发现图片背景色变成了黑色,原因是画布透明的地方 默认转成了黑色,可以在绘制画布前设置透明处背景色为白色. // 背景色转换成 ...

  2. canvas toDataURL() 方法如何生成部分画布内容的图片

    HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI .可以使用 type参数其类型,默认为 PNG 格式.图片的分辨率为96dpi. 如果画布的高 ...

  3. 利用canvas 导出图片

    1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...

  4. 微信小程序--canvas画布实现图片的编辑

    技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--ca ...

  5. js 画布与图片的相互转化(canvas与img)

    使用js将图片拷贝进画布 //将图片对象转化为画布,返回画布function ImageToCanvas(image) { var canvas = document.createElement(&q ...

  6. html页面、canvas导出图片

    背景:项目现场提出将一个html做的图形页面导出为一张图片的需求,在网上搜了一下,发现都不是很全面,所以综合了很多大神的帖子,自己再次封装,以适用项目需求. 所需js库:html2canvas.js( ...

  7. 前端性能优化 —— 使用 BMP 图片代替 canvas.toDataURL

    前端开发中有时需要将 canvas 的内容导出成图片文件,例如供 CSS 使用,通常会使用 canvas.toDataURL,兼容性好并且简单. 不过 canvas.toDataURL 显然是非常低效 ...

  8. html dom 转化成图片踩坑记（canvas toDataURL）

    需求 在开发过程中遇到这么一个需求,h5页面需要将一个html dom转化成图片,便于用户保存. 面向百度搜索第三方得 html2canvas 和 dom-to-image 两者在写这篇笔记之前在gi ...

  9. 快速解决Canvas.toDataURL 图片跨域的问题

    出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...

随机推荐

  1. R语言实战（四）—— 基本数据管理

    一.基础操作 1.根据数据信息,创建数据框 > manager <- c(1,2,3,4,5) > date <- c("10/24/08","1 ...

  2. Ocelot中文文档-Route

    路由(Routing) Ocelot主要功能是接收即将发来的请求并转发它们至下游服务.与此同时,以另一个http请求的形式(在将来这可能是任何传输的机制) Ocelot将一个请求的路由描述为另一个路由 ...

  3. [日常] Go语言圣经-字节切片与字符串

    1.一个字符串是一个不可改变的字节序列2.文本字符串通常被解释为采用UTF8编码的Unicode码点(rune)序列3.内置的len函数可以返回一个字符串中的字节数目4.第i个字节并不一定是字符串的第 ...

  4. 以杨辉三角为例，从内存角度简单分析C语言中的动态二维数组

    学C语言,一定绕不过指针这一大难关,而指针最让人头疼的就是各种指向关系,一阶的指针还比较容易掌握,但一旦阶数一高,就很容易理不清楚其中的指向关系,现在我将通过杨辉三角为例,我会用四种方法从内存的角度简 ...

  5. 2018-02-18 Antlr4实现简单语言之条件语句

    本系列之前的文章: Antlr4的分析错误处理 Antlr4实现数学四则运算 Antlr4添加中文变量赋求值,括号,各种问题 Antlr4: 修改语法规则更接近普通BNF格式 Antlr4实现简单语言 ...

  6. Sharepoint 2013 Gatherer 数据库的架构版本低于此 Gatherer 应用程序支持的向后兼容的最低架构版本

    管理中心 ->升级和迁移 ->查看数据库状态 解决方法: 开始-运行(以管理员身份运行),输入如下命令. cd  C:\Program Files\Common Files\Microso ...

  7. 【转】解决configure: error: C++ compiler cannot create executables问题

    转自:http://www.coderbolg.com/content/83.html 啊……天啊,./configure时报错:configure: error: C++ compiler cann ...

  8. 什么是DDoS攻击？DDoS防御的11种方针详解

    对于遭受DDOS攻击的情况是让人很尴尬的,如果我们有良好的DDoS防御方法,那么很多问题就将迎刃而解,我们来看看我们有哪些常用的有效地方法来做好DDoS防御呢. 对于DDoS防御的理解: 对付DDOS ...

  9. nginx 配置简单网站项目（linux下）

    1.新建html2与html3两个网站项目测试,而html是本身就有,记得到/etc/hosts 添加dns记录 2.修改nginx.conf文件 3.测试访问 中间用到一些nginx的命令,就不截图 ...

  10. 【JS单元测试】Qunit 和 jsCoverage使用方法

          近日在网上浏览过很多有关js单元测试相关的文档,工具,但是,针对Qunit 和 jsCoverage使用方法,缺少详细说明,对于初入前端的人来说,很难明白其中的意思,特此整理这篇文章,希望 ...