最简例子

<!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. Codeforces 725B Food on the Plane

    B. Food on the Plane time limit per test:2 seconds memory limit per test:256 megabytes input:standar ...

  2. BZOJ:4820: [Sdoi2017]硬币游戏&&BZOJ:1444: [Jsoi2009]有趣的游戏（高斯消元求概率）

    1444: [Jsoi2009]有趣的游戏 4820: [Sdoi2017]硬币游戏 这两道题都是关于不断随机生成字符后求出现给定字符串的概率的问题. 第一题数据范围较小,将串建成AC自动机以后,以A ...

  3. 51 Nod 1029 大数除法【Java大数乱搞】

    1029 大数除法 基准时间限制:4 秒 空间限制:131072 KB 分值: 160 难度:6级算法题 给出2个大整数A,B,计算A / B和A Mod B的结果.   Input 第1行:大数A ...

  4. [bzoj1223] [HNOI2002]Kathy函数

    首先由题解可得TAT,f(i)=i当且仅当i在二进制下为回文串. 那么问题就变成了1~n中有多少个二进制下的回文串. 把m转成2进制后就是正常的统计了= =. f[i]表示二进制下,有多少个i位的回文 ...

  5. 2017ecjtu-summer training #4 UESTC 1584

    此题链接 http://acm.uestc.edu.cn/#/problem/show/1584 此题和hdu1541几乎完全一样,我们要先对坐标排序,再进行操作. hdu1541题解 http:// ...

  6. insertBefore方法（javascript与jQuery）

    说到insertBefore()方法,其实javascript与jQuery中都有此方法,那么他们用法是否相同呢? 其实,还是有点区别的.反正我是爱搞混淆了,先做个小笔记吧! 1.insertBefo ...

  7. win处navicat直接导出的sql脚本导入Linux mysql报错问题

    最近几天在把win上的项目的数据库转移到Ubuntu,于是第一件事就是从win处的navicat直接导出sql脚本,然后进入Ubuntu导入的时候会报错误,跳过错误继续执行导致数据库表的缺失. 跨平台 ...

  8. 访问远程MySQL数据库的方法

    请问各位部署LAMP的时候MySQL是独立出来的服务器,在apache上编译安装php的时候有个--with-mysql后面应该是带mysql路径的,可我应该怎样把这个连接到mysql服务器,因为不是 ...

  9. php网站在服务器上邮件发送不了，在本地可以

    标签: php邮箱 2015-11-27 13:58 879人阅读 评论(0) 收藏 举报 分类: php(2) 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近在做phpmailer发送邮 ...

  10. 评论发布信息可插入QQ表情

    demo例子: HTML文本内容: <template> <div id="publish"> <!-- 发布内容输入框,利用Html5的新属性con ...