<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. C#编程（五十三）----------字典Dictionary<TKey,TValue>

    字典 关键字:Dicitionary 说明: 必须包含命名空间System.Collection.Generic Dictionary里面的每一个元素都是一个键值对(由两个元组组成:键和值). 键必须 ...

  2. Ubuntu Linux下安装Oracle JDK

    from://http://blog.csdn.net/gobitan/article/details/24322561 Ubuntu Linux下安装Oracle JDK Dennis Hu 201 ...

  3. [shiro学习笔记]第四节 使用源码生成Shiro的CHM格式的API文档

    版本号为1.2.3的shiro API chm个事故文档生成. 获取shiro源码 编译生成API文档 转换成chm格式 API 获取shiro源码 shiro官网: http://shiro.apa ...

  4. JAVA card 应用开发（二） 在项目添加APPLET

    在上篇博文中.<JAVA card 应用开发创建第一个APPLET>.介绍了一个项目从无到有. 那么.我们建立了这个项目后,仅仅有一个应用(一个可选AID),假设我希望这个项目能够有多个应 ...

  5. Orchard之在前台显式一个属于自己的列表

    一:当前现状 Orchard 并不提供筛选 Owner 的 Query,但是 Gallery 中有提供,那就是:Owner Queries. Install 之,然后在解决方案中引入该 Project ...

  6. JAVAWEB开发之HttpServletResponse和HttpServletRequest详解(上)（各种乱码、验证码、重定向和转发）

    HttpServletResponse简介 Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象 request和re ...

  7. python的日志模块：logging；django的日志系统；django日志输出时间修改

    Django的log,主要是复用Python标准库中的logging模块,在settings.py中进行配置 源代码 1.__init__.py包含以下类: StreamHandler Formatt ...

  8. arcsde10 postgresql8.3 服务停止问题

    ---恢复内容开始--- arcsde10 安装在windows server2008 R2 X64 上. 从.gdb文件数据库 拷贝40W多的数据到ArcSDE ,然后postgresql就停止了, ...

  9. SpringMVC request生命周期

    When the request leaves the browser, it carries information about what the user is asking for. At ve ...

  10. Android -- DecorView

    DecorView 开发中,通常都是在onCreate()中调用setContentView(R.layout.custom_layout)来实现想要的页面布局.页面都是依附在窗口之上的,而Decor ...