<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转图片的更多相关文章

  1. canvas学习笔记：canvas对图片的像素级处理--ImageData的应用

    学习了canvas的基本绘图功能后,惊喜的发现canvas对图片数据也有相当强大的处理功能,能够从像素级别操作位图,当然[lte ie8]不支持. 主要的函数有三个: ctx.createImageD ...

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

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

  3. 用canvas实现图片滤镜效果详解之灰度效果

    前面展示了一些canvas实现图片滤镜效果的展示,并且给出了相应的算法,下面来介绍一下具体的实现方法. 前面介绍的特效中灰度效果最简单,就从这里开始介绍吧. 1.获取图像数据 img.src = ’h ...

  4. 使用canvas进行图片裁剪简单功能

    1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="fi ...

  5. 利用canvas 导出图片

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

  6. canvas将图片转为base64

    最简例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta ...

  7. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  8. canvas和图片之间的互相装换

    canvas和图片之间的互相装换 一.总结 一句话总结:一个是canvas的drawImage方法,一个是canvas的toDataURL方法 canvas drawImage() Image对象 c ...

  9. Canvas 实现图片合成并下载合成图片

    现在经常会遇到那种带二维码的推广图片,如下图所示: 1是整张推广图的背景,2是二维码.这种图片的背景是保持不变的,里面的二维码是变化的.所以我们需要把二维码单独生成然后与背景合并. 我们可以通过can ...

随机推荐

  1. iOS中使用RegexKitLite来试用正则表达式

    转:http://blog.csdn.net/nullcn/article/details/6338592 准备工作,下载RegexKitLite 软件包,解压后有2个文件,需要加载到project中 ...

  2. Unity 动画知识之一

    Unity现在已经用的很广泛啦,可是却一直没有什么美术向的教程. 程序用方面的内容在各个论坛都有讨论,但是美术似乎很弱势啊. 明明美术也很需要掌握引擎方面的内容嘛! 山谷里的野百合还有春天呢 我们美术 ...

  3. Material Designer的低版本兼容实现（八）—— Flat Button

       除了中规中矩的矩形按钮外,5.0中将按钮扁平化,产生了一个扁平按钮——Flat Button.这个按钮降低了很多存在感,主要用于在对话框,提示栏中.让整个界面减少层级.今天说的就是它的用法. 这 ...

  4. Android反编译工具的用法

    Android的APK文件时可以反编译的,通过反编译我们就能查看到大体的代码,帮助学习.反编译仅仅提供的是学习的方式,禁止使用该技术进行非法活动. 其实就是两个命令: 1:运行(WIN+R)-> ...

  5. C# 根据注册表获取当前用户的常用目录整理

    1.使用C#获取当前程序或解决方案的路径 2.使用C#获取当前登录用户的相关目录 3.也可以获取当前系统通用目录 4.获取Windows系统的目录,从注册表中获取. 一.当前用户的目录,HKEY_Cu ...

  6. Makefile:160: recipe for target 'all' failed （Ubuntu 16.06 + Opencv3.2）解决办法

    前言 之前一直用的opencv 好好的,今天安装了anaconda之后,python中的opencv不能用了,即便是拷贝cv2.so之后也是不能用,问题如下: 根本原因 安装anaconda之后,很多 ...

  7. SQL Server：使用 PIVOT 行转列和 UNPIVOT 列转行

    ylbtech-SQL Server:使用 PIVOT 行转列和 UNPIVOT 列转行 可以使用 PIVOT 和 UNPIVOT 关系运算符将表值表达式更改为另一个表.PIVOT 通过将表达式某一列 ...

  8. 解决MTP device安装失败，手机无法被读取

    操作步骤: 1.  我的电脑—>管理—>设备管理器—>便携设备(MTP)-->右击-更新驱动 2.  选择浏览计算机以查找驱动程序软件—>从计算机列表选择—>MTP ...

  9. Cantor展开式

    X=an*(n-1)!+an-1*(n-2)!+...+ai*(i-1)!+...+a2*1!+a1*0! 其中,a为整数,并且0<=ai<i(1<=i<=n).这就是康托展开 ...

  10. easyui +ASP.NET 前后台乱码解决方法

    前端接口 decodeURIencodeURI 后台接口 System.Web.HttpUtility.UrlEncode(user.name) 凡是涉及到中文的地方都要使用这几个接口