function canvasSupport(){
     return Modernizr.canvas;
}
function callCanvasApps(){
  var canvasOne=document.getElementById("canvasOne");
  //if(!canvasSupport())
      //return;
  var context=canvasOne.getContext("2d");
  context.fillStyle = "#ffffaa";
  context.fillRect(0, 0, 500, 300);
 
  context.fillStyle  = "#000000";
  context.font = "20px Sans-Serif";
  context.textBaseline = "top";
  context.fillText  ("xxx 我稀罕你", 195, 80 );
  console.log(canvasOne.toDataURL());//  这句生成快照,可以将结果直接拷贝放到浏览器的URL里回车看到结果,这个以后做PNG图片似乎不需要美工了么 ,O(∩_∩)O哈哈~
}
if(window.addEventListener){
   window.addEventListener("load",callCanvasApps,false);
}else{
   window.onload=callCanvasApps;
}

如果想生成jpeg图片,可以这样指定类型:canvasOne.toDataURL("image/jpeg"); 其他类型 you must know

至于base64图片的作用 ,大概就是减少request吧

:<img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />

.demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }
 
一个demo如下:
http://jsbin.com/yaley/edit?js,output

Canvas 生成base64的PNG图片快照,So Amazing!!!的更多相关文章

  1. 小程序canvas生成二维码图片踩的坑

    1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是 上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...

  2. svg转化成canvas以便生成base64位的图片

    很久前写了关于把html转成图片的一个例子,最近有出了新的问题.利用html2canvas.js文件把html转成base64位的图片是没什么问题的,但也不是绝对的,比如这时候不能碰见svg这个鬼,h ...

  3. 使用canvas给图片添加水印, canvas转换base64,,canvas,图片,base64等转换成二进制文档流的方法,并将合成的图片上传到服务器,

    一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...

  4. 根据图片的路径(绝对路径/相对路径都可以),生成base64的

    根据图片的路径(绝对路径/相对路径都可以),生成base64的 <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  5. 减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术)

    在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”, ...

  6. HTML5浏览器端图片预览&生成Base64

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...

  7. js 选择图片生成base64数据

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. 把一个base64编码的图片绘制到canvas (canvas的图片在转成dataurl)

    把一个base64编码的图片绘制到canvas 需要引入jquery. <canvas id="myCanvas" width="800" height= ...

  9. 移动端实现裁剪图片生成base64图片(可缩放)

    移动端实现裁剪图片生成base64图片(可缩放)<pre><!DOCTYPE html><html lang="en"> <head> ...

随机推荐

  1. 在阿里云上布置git server

    前言 东莞,晴,26至32度. 一直以为都是使用SVN Server作为私用的版本号控制器.随着Git的大行其道.近期由于项目须要,也试着在阿里云上部署Git Server.这里由于团队人员少.我採用 ...

  2. 作为一个.net程序猿,需要掌握这些有点前途的人才,一些开发---Shinepans

    1.基础 C#基础                    参考书目:   <c#入门经典>         <ASP.NET揭秘> IIS  HTML              ...

  3. Android ImageButton Example 图片按钮

    Android ImageButton Example 图片按钮 使用“android.widget.ImageButton” 展现一个具有背景图片的按钮 本教程将展现一个具有名字为 c.png背景图 ...

  4. C#语音录制

    客服小妹是如何泡到手的——C#定时提醒·语音录制·语音播放·文件转录Demo——倾情奉献!   一.需求提出 客服小妹跟我说,每天要统计新加好友数,得先记下昨天的数目,然后查看今天的数目,还要相减,打 ...

  5. 二十7天 春雨滋润着无形 —Spring依赖注入

    6月11日,明确."夏条绿已密,朱萼缀明鲜.炎炎日正午,灼灼火俱燃." IT人习惯把详细的事物加工成的形状一致的类.正是这种一致,加上合适的规范.才干彰显对象筋道的牙感和bean清 ...

  6. 王立平--include在Android应用

    它包括一个布局和布局 1.在layout确定activity_other.xml布局 2.代码中的包括例如以下: <LinearLayout xmlns:android="http:/ ...

  7. C++ - Identifier not found

     This is because forward declaration in C++: Compiler needs to know function prototype when functi ...

  8. Oracle 阅读器-刚看完表空间回复的详细解释

    (一) 当使用一个控制文件的备份恢复,例如下面的附图.使用备份控制文件恢复位置 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGVtb25zb24=/fo ...

  9. JavaScript模式读书笔记 文章3章 文字和构造

    1.对象字面量     -1.Javascript中所创建的自己定义对象在任务时候都是可变的.能够从一个空对象開始,依据须要添加函数.对象字面量模式能够使我们在创建对象的时候向其加入函数.       ...

  10. ALSA安装编程指南

     ALSA全指南 一.什么是ALSA ALSA是Advanced Linux Sound Architecture,高级Linux声音架构的简称,它在Linux操作系统上提供了音频和MIDI(Mu ...