canvas转图片
<script> | |
var canvas, context2D, canvasimg, context2Dimg ,fontSize = 100; | |
window.onload = function() { | |
canvas =document.getElementById("canvas"); | |
context2D = canvas.getContext("2d"); | |
canvasimg =document.getElementById("canvasimg"); | |
context2Dimg = canvasimg.getContext("2d"); | |
context2D.font ="100px 黑体"; | |
context2D.fillText("V", 0, fontSize); | |
//添加range事件 | |
document.getElementById("range").addEventListener("mouseup", function() { | |
fontSize = this.value; | |
context2D.font = this.value +"px 黑体"; | |
context2D.clearRect(0, 0, canvas.width, canvas.height); | |
context2D.fillText("V", 0, fontSize); | |
}); | |
} | |
function go(){ | |
var img = convertCanvasToImage(document.getElementById("canvas")); | |
context2Dimg.clearRect(0, 0, canvas.width, canvas.height); | |
context2Dimg.drawImage(img, 0, 0); | |
//需要将Base64编码转换为Blob(一段二进制数据)对象 ,后才能生成文件下载 参考 http://javascript.ruanyifeng.com/htmlapi/file.html#toc0 | |
var blob = new Blob([Base64Binary.decodeArrayBuffer(canvas.toDataURL("image/png").substring(22))]); //删除字符串前的提示信息 "data:image/png;base64," | |
var a = document.createElement("a"); | |
a.href = window.URL.createObjectURL(blob); | |
a.download = "test.png"; | |
a.textContent = "下载图片->"; | |
document.body.appendChild(a); | |
//a.click(); | |
show(); | |
} | |
//将图片显示在网页中 | |
function show(){ | |
var img = convertCanvasToImage(document.getElementById("canvas")); | |
document.body.appendChild(img); | |
} | |
//将canvas变成图片png | |
function convertCanvasToImage(canvas) { | |
var image = new Image(); | |
image.style.border="1px solid blue"; | |
image.src = canvas.toDataURL("image/png"); | |
return image; | |
} | |
</script> | |
<style> | |
input[type=range]:before { content: attr(min); padding-right: 5px; } | |
input[type=range]:after { content: attr(max); padding-left: 5px;} | |
</style> | |
</head> | |
<body> | |
<input id="range" type="range" name="range" min="100" max="500" step="100" value="100" /> | |
<canvas id="canvas" style="border:1px solid red;" width=500 height=500></canvas> | |
<button onclick="go();">canvas转图片,再加载到右边canvas中</button> | |
<canvas id="canvasimg" style="border:1px solid red;" width=500 height=500></canvas> | |
</body> | |
<script> | |
//base64转Blob 地址 https://github.com/danguer/blog-examples/blob/master/js/base64-binary.js |
canvas转图片的更多相关文章
- canvas学习笔记:canvas对图片的像素级处理--ImageData的应用
学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...
- 快速解决Canvas.toDataURL 图片跨域的问题
出现Canvas.toDataURL 图片跨域问题怎么解决呢?下面小编就为大家带来一篇Canvas.toDataURL 图片跨域问题的快速解决方法.一起跟随小编过来看看吧 如题,在将页面的图片地址进行 ...
- 用canvas实现图片滤镜效果详解之灰度效果
前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...
- 使用canvas进行图片裁剪简单功能
1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...
- 利用canvas 导出图片
1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...
- canvas将图片转为base64
最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...
- [JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...
- canvas和图片之间的互相装换
canvas和图片之间的互相装换 一.总结 一句话总结:一个是canvas的drawImage方法,一个是canvas的toDataURL方法 canvas drawImage() Image对象 c ...
- Canvas 实现图片合成并下载合成图片
现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...
随机推荐
- FieldExists
import arcpy import os import sys def FieldExists(TableName,FieldName): desc = arcpy.Describe(TableN ...
- Java 下载文件
public @ResponseBody void exportExcel(HttpServletRequest request, HttpServletResponse response, Khxx ...
- 架构:Introducing Expert Systems and Distributed Architecure
原文地址:http://www.yourenterprisearchitect.com/2011/10/introducing-service-bus.html. Expert Systems. ...
- jquery插件--在input下输入密码时提示大写锁定键
//密码大写输入提示 function capitalTip(id){ $('#' + id).after('<div class="capslock" id="c ...
- Material Designer的低版本兼容实现(十二)—— Slider or SeekBar
Slider,我更喜欢叫他SeekBar,其实是一个东西啦,就是拖动条.5.0的拖动条和4.x上的HOLO风格完全不同,平添了一些精致.此外还加入了数值指示器,让用户在滑动的时候就能知道现在到了什么位 ...
- 开源项目MultiChoiceAdapter详解(三)——MulitChoiceNormalArrayAdapter的使用
MulitChoiceNormalArrayAdapter是我自己定义的一个类,其实就是实现了MulitChoiceArrayAdapter,为什么做这个简单的实现类呢,因为这样我们在不用Action ...
- [转]Redis作者:深度剖析Redis持久化
From : http://www.iteye.com/news/24675 Redis是一种面向“key-value”类型数据的分布式NoSQL数据库系统,具有高性能.持久存储.适应高并发应用场景等 ...
- SD内存卡禁止写入只读怎么办?另类SPI模式修复坏卡
这几天很郁闷,买的32G TF卡老出问题,三星的标,不知道是不是正品,标称C10,且不说是不是真的三星和真的C10,反正测试一下容量倒是真的,价格么也比较亲民,好像是69块? 哎,可惜呀,好景不长 ...
- linux 比较两个文件夹不同 (diff命令, md5列表)
比较文件夹diff,可以直接使用diff命令 [root@~]# diff -urNa dir1 dir2 -a Treat all files as text and compare them li ...
- Asp.net5 Session Set扩展
关于Asp.net 5 如何使用Session大家可以参考http://www.mikesdotnetting.com/article/270/sessions-in-asp-net-5 和http: ...