最简例子

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title>canvas将图片转为base64</title>

		<style type="text/css">

			body {

				margin: 0;

			}

		</style>

	</head>

	<body>

		<img src="//img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png" id="img" />

		<canvas id="load_area" width="100%" height="224px"></canvas>

		<script type="text/javascript">

			var imgEl = document.getElementById('img');

			var loadCanvas = document.getElementById('load_area');

			var context = loadCanvas.getContext('2d');

			var base64Str = '';

			var tmpImage = new Image();

			tmpImage.setAttribute('crossOrigin', 'anonymous');

			tmpImage.src = imgEl.src;

			tmpImage.onload = function() {

				loadCanvas.width = imgEl.width;

				loadCanvas.height = imgEl.height;

				context.drawImage(tmpImage, 10, 10);

				base64Str = loadCanvas.toDataURL('image/jpg');

			};

		</script>

	</body>

</html>

纯js版

var appendCanvas = function() {

	var body = document.body;

	var canvas = document.createElement('canvas');

	body.appendChild(canvas);

	return canvas;

};

var createImage = function(url) {

	var img = new Image();

	img.setAttribute('crossOrigin', 'anonymous');

	img.src = url;

	return img;

};

var imageToBase64 = function(url) {

	var canvas = appendCanvas();

	var context = canvas.getContext('2d');

	var tmpImage = createImage(url);

	var base64Str = '';

	tmpImage.onload = function() {

		canvas.width = tmpImage.width;

		canvas.height = tmpImage.height;

		context.drawImage(tmpImage, 0, 0);

		base64Str = canvas.toDataURL('image/jpg');

		console.log(base64Str);

	};

};

canvas将图片转为base64的更多相关文章

  1. 解决 canvas 将图片转为base64报错

    var canvas=document.getElementById("canvas"),//获取canvas ctx = canvas.getContext("2d&q ...

  2. 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...

    问题描述 当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png" ...

  3. 011_如何decode url及图片转为base64文本编码总结

    一.咱们经常会遇到浏览器给encode后的url,如何转换成咱们都能识别的url呢?很简单,talk is easy,Please show me your code,如下所示: (1)英文decod ...

  4. js将图片转为base64编码，以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  5. html5 图片转为base64格式异步上传

    因为有这个需求(移动端),所以就研究了一下,发现还挺不错的.这个主要是用了html5的API,不需要其他的JS插件,不过只有支持html5的浏览器才行,就现在而言应该大部份都支持的.<!DOCT ...

  6. jquery 图片转为base64

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. 将图片转为base64

    DEMO: <input type="file" id="file" multiple="multiple"> <div ...

  8. 使用JS将图片转为Base64

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. C# 图片转为Base64

    /// <summary> /// 图片转Base64 /// </summary> /// <param name="ImageFileName"& ...

随机推荐

  1. junit测试模板 unit-test

    一个项目能否发布上线,重要的环节就是测试.经过集成测试.性能测试.压力测试等不断循环的测试过后依据测试报告来确定上线.这些由专业的测试人员来完成,因此会导致程序开发者对自身的单元测试的弱化.若在代码中 ...

  2. MFC获取可执行文件（exe）所在文件目录

    可以应用函数GetModuleFileName(),举一个例子: CString strexe; ::GetModuleFileName(NULL,strexe.GetBufferSetLength( ...

  3. [国嵌攻略][174][CGI快速入门-网页控制LED]

    CGI程序(Common Gate Way Interface) 在服务器外部供服务器调用的程序,CGI程序与服务器配合后能让服务器完成更强大的功能. 1.浏览器通过HTML表单或超链接请求指向一个C ...

  4. Content Provider Test过程中遇到的坑

    Content Provider(内容提供器) 一.什么是Content Provider? 直接贴官方文档简介图,笔者太懒了,而且 坑 不在这

  5. PHP实现伪静态方法汇总

    PHP伪静态的使用主要是为了隐藏传递的参数名,下面给大家介绍php实现伪静态的方法,对php实现伪静态相关知识感兴趣的朋友一起学习吧 PHP伪静态的使用主要是为了隐藏传递的参数名,下面给大家介绍php ...

  6. 学习总结：libevent--简单入门

    libevent--简单入门 一．简介 libevent是一个c语言写的事件驱动库,轻量级,专注于网络,跨平台特性好,支持多种 I/O 多路复用．支持I/O,定时器和信号等事件,允许设置注册事件优先级 ...

  7. mybatis_SQL映射(3)

    文章摘录自:http://blog.csdn.net/y172158950/article/details/17304645 1. 表关联 a) 嵌套查询(传说中的1+N问题) <resultM ...

  8. 5dfda1332b67817b0f2d7839242021ce'Java数据结构和算法

    1.return 一个空的集合,而不是 null 如果一个程序返回一个没有任何值的集合,请确保一个空集合返回,而不是空元素.这样你就不用去写一大堆 "if else" 判断null ...

  9. React版本更新及升级须知（持续更新）

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 18.0px "PingFang SC Semibold& ...

  10. 2018/1/28 每日一学 单源最短路的SPFA算法以及其他三大最短路算法比较总结

    刚刚AC的pj普及组第四题就是一种单源最短路. 我们知道当一个图存在负权边时像Dijkstra等算法便无法实现: 而Bellman-Ford算法的复杂度又过高O(V*E),SPFA算法便派上用场了. ...