最简例子

<!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. Error : Invalid Allocation Size ：·····Bytes 以及 abort() has been called

    把这两个Error放在一起,主要是因为在写代码的时候发现,他们有公共的错误. (一)Invalid Allocation Size 主要是因为new分配内存出了问题,从直观翻译来看,应该是内存分配长度 ...

  2. HDU 1012 u Calculate e【暴力打表，水】

    u Calculate e Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  3. [bzoj1706] [usaco2007 Nov]relays 奶牛接力跑

    大概是叫倍增Floyd? 显然最多200个点...f[i][j][k]表示从j到k,走2^i步的最小路程.就随便转移了.. 查询的话就是把n二进制位上是1的那些都并起来. #include<cs ...

  4. BZOJ 3106: [cqoi2013]棋盘游戏（对抗搜索）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3106 对抗搜索,f[x][y][a][b][c][d]表示当前谁走,走了几步,及位置. (因为 ...

  5. python面向对象进阶

    前言 上节大话python面向对象对面向对象有了一些了解,这次就不用大话风格了 (ps:真心不好扯啊) isinstance与issubclass isinstance(obj,cls)检查是否obj ...

  6. ubuntu配置服务器apache

    在配置apache之前我们需要先配置好ubuntu中的网络,如果不太懂的话可以看看这我的这篇文章:配置ubuntu网络,里面详细的介绍了怎么配置ubuntu的网络. 1.安装apache服务器 sud ...

  7. SDP（1）：ScalikeJDBC-基本操作介绍

    简单来说:JDBC是一种开放标准的跨编程语言.跨数据库类型编程API.各类型数据库产品厂商都会按它的标准要求来提供针对自身产品的JDBC驱动程序.最主要的这是一套成熟的工具,在编程人员中使用很普及.既 ...

  8. Vuejs实例-00Vuejs2.0全家桶结合ELementUI制作后台管理系统

    Vuejs2.0全家桶结合ELementUI制作后台管理系统 0: 系统环境的介绍 1: Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目 2: Vuejs实例-02Vue.js项目集 ...

  9. Android_基础控件

    目录 一.文本控件TextView 二.按钮控件Button 三.图片控件ImageView 四.输入控件EditText 一.文本控件TextView 1.布局文件 <TextView and ...

  10. 2017-06-30（ps pstree top kill w killall pkill）

    ps(查看系统下所有进程) -a 显示一个终端的所有进程,除了会话引线 -u 显示进程的归属用户以及内存的使用情况 -x 显示没有控制终端的进程 -l 长格式显示,更加详细的信息 -e 显示所有的进程 ...