Canvas 生成base64的PNG图片快照,So Amazing!!!

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...."); }

时间: 2024-10-13 17:28:18

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

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

一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不够. 下面我们就说说,利用canvas 生成带水印的图片. 1.我们要实现一下效果 2.创建一个canvas var canvas = document.createElement('canvas'); var time = new Date(); var logoCanvas =time+' '+

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

原文:减少HTTP请求之将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片(大型网站优化技术) 在网站开发过程中,对于页面的加载效率一般都想尽办法求快.那么,怎么让才能更快呢?减少页面请求 是一个优化页面加载速度很好的方法.上一篇博文我们讲解了 “利用将小图标合成一张背景图来减少HTTP请求”,那么,这一篇博文将讲解  “ 将图片转成二进制并生成Base64编码,可以在网页中通过url查看图片”. 一.为何选择将图片转成二进制并生成Base64编码,可以在网页中通过url查看

java 使用qrcode生成二维码图片或者base64字符串

通过传入字符串,生成二维码图片或者base64格式字符串 1 public static String barcode2Base64(String msg) throws Exception{ 2 Qrcode x = new Qrcode(); 3 //N代表数字,A代表a-z,B代表其他字符 4 x.setQrcodeEncodeMode('B'); 5 //设置纠错等级 6 x.setQrcodeErrorCorrect('M'); 7 //设置版本号(1-40) 8 x.setQrcod

用Canvas+Javascript FileAPI 实现一个图片剪切、滤镜处理、上传下载工具

直接上代码,其中上传功能需要自己配置允许跨域的文件服务器地址~ 或者将html文件贴到您的站点下同源上传也OK. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区域. 上传选中的区域. 几种简单的滤镜(自己添加滤镜函数即可添加滤镜效果) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt

canvas和base64

base64是二进制数据的一个编码格式,就像utf8一样的东西 他跟json一样,也是前后端交互能够相互识别的数据,他更多的是用来传递文件数据 在js里生成base64的API有两个,一个是FileReader,一个是画布canvas FileReader <input type="file" onchange="change(this.files[0])"> function change(file){ var fr = new FileReader(

PHP《将画布(canvas)图像保存成本地图片的方法》

用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名. 这需要我们评审软件里提供这样一个功能:打开浏览器,登录,进入评审意见页,页面最下部有个方块区域,用户在这里用触摸笔进行签名,然后这个签名将会保持 的服务器上. 这样的一个需求在当时是让我大费周折,但如今想起来,如果用html5的canvas实现,真是太简单了.在

base64码转图片

1将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一些小的图片是极为方便的,因为你不需要再去寻找一个保存图片的地方. 2.假定生成的代码为"data:image/jpeg;base64, .....",那么你只需要全部复制,然后在插入图片的时候,地址填写这段代码即可. 3.CSS中使用:background-image: url("data:image/png;base64,iVBORw0KGgo=..."

保存头像-base64字符串转图片

<img :onerror="errpic" class="customerHead" :src="param.customerHead" alt=""> data() { return { param:{ id:"", customerHead: "", } } } let _this = this let files = e.target.files[0] if (fil

JavaScript生成二维码图片

1.引入一个二维码工具的js文件,同时需要引入jquery文件 下面是jquery.qrcode.min.js文件内容: 1 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.data=a}function o(a,c){this.typeNumber=a;this.errorCorrectLevel=c;this.modules=null;this.moduleCount=0;this.dataC