js canvas获取图片base64 dataUrl

function getImgBase64(path,callback){
	        var img = new Image();
	        img.src = path;

	        //图片加载完成后触发
	        img.onload = function(){
		        var canvas = document.createElement("canvas");
		        //获取绘画上下文
		        ctx = canvas.getContext("2d");

		        // 获取图片宽高
		        var imgWidth = img.width;
		        var imgHeight = img.height;

		        //设置画布宽高与图片宽高相同
		        canvas.width = imgWidth;
		        canvas.height = imgHeight;

		        //绘制图片
		        ctx.drawImage(img,0,0,imgWidth,imgHeight);
		        //图片展示的 data URI
		        var dataUrl = canvas.toDataURL(‘image/jpeg‘);
		        callback ? callback(dataUrl) : ‘‘;
	        };
        }

        getImgBase64(‘wood.png‘,function(dataUrl){
        	console.log(dataUrl);
        });

  

时间: 2024-07-30 10:10:35

js canvas获取图片base64 dataUrl的相关文章

python获取图片base64编码的例子

用python语言获得图片的Base64编码. #!/usr/bin/env python # -*- coding: utf-8 -*- # www.jbxue.com import os, base64 icon = open('ya.png','rb') iconData = icon.read() iconData = base64.b64encode(iconData) LIMIT = 60 liIcon = [] while True: sLimit = iconData[:LIMI

JS快速获取图片宽高的方法

快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器.一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new I

转载:JS快速获取图片宽高的方法

快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一步进入这个过程. 一.简陋的获取图片方式 1 2 3 4 5 6 7 8 9 10 11 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.par

[转]js动态获取图片长宽尺寸

http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果).javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它. 这是大部分人使用预加载获取图片大小的例子: 01 var imgLoad = function (url, callback) { 02     var img = ne

转载:js动态获取图片长宽尺寸(兼容所有浏览器,速度极快)

转自:http://blog.phpdr.net/js-get-image-size.html lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才能显示,体验不佳(如filick相册的全屏效果).javascript无法获取img文件头数据,真的是这样吗?本文通过一个巧妙的方法让javascript获取它. 这是大部分人使用预加载获取图片大小的例子: 01 var imgLoad = function (url, callback) { 02     var img =

使用 JavaScript 获取图片 base64 编码格式的文本

function getBase64Image(img) { // Create an empty canvas element var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; // Copy the image contents to the canvas var ctx = canvas.getContext("2d&q

前端小程序——js+canvas 给图片添加水印

市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧 html: <canvas id="shuiyinTest"> </canvas> <div> <input id="shuiyinText" value="" type="text"/> <button id="shuiyinBtn" class=&quo

获取图片base64的方法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> &l

js上传图片获取图片地址,兼容苹果

别人写的一个例子我记下了先,自己测试通过的 是别人分享的页面,原作者我是不知道了,感谢原作者写的代码 下面是代码:全部复制就是例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/jquery/1.8.3/jquery.js"><