最简例子

<!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. Two 观察者 observer pattern

    Two 观察者 定义 在对象之间定义一对多的依赖,当一个对象改变状态,依赖它的对象都会收到通知.并自动更新. 可以观察者自取,也可以主题去推送 其实就是设计两个接口. 相关原则 为交互对象之前的松耦合 ...

  2. 【经验分享】安装VirtualBox的时候遇到的问题

    错误代码: Failed to instantiate CLSID_VirtualBox w/ IVirtualBox, but CLSID_VirtualBox w/ IUnknown works. ...

  3. bzoj 2806: [Ctsc2012]Cheat

    传送门 好久没刷bzoj惹…… 题意不说可以嘛. 首先二分答案. SAM的事情搞完以后就是dp辣. 我们已经对于每个位置i,找到了最小的一个k,使得[k,i]这个子串在模版串中出现过.那么我们需要做的 ...

  4. Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2)(A.思维题，B.思维题)

    A. Vicious Keyboard time limit per test:2 seconds memory limit per test:256 megabytes input:standard ...

  5. [bzoj4592] [Shoi2015]脑洞治疗仪

    题面无法直视系列. 中规中矩的线段树题. 涉及的操作有:区间赋值为0,计算区间内1的个数,区间赋值为1,求区间内最大的连续的1的个数. #include<cstdio> #include& ...

  6. maven（01）--安装及其介绍

    1:下载maven windows下载 2:将下载文件夹解压,然后放在一个安装目录(可任意选择),例如就放在D盘的根目录 然后在设置环境变量,新建一个环境变量,名称为M2_HOME,其设置值为mave ...

  7. .NET MongoDB Driver 2.2 API注释

    主要内容 1 MongoClient 1.1构造函数 1.2 方法 2 IMongoDatabase 3 IMongoCollection 4 IMongoCollectionExtensions 5 ...

  8. [国嵌攻略][103][Linux内核模块基础]

    什么是内核模块 Linux内核的整体结构非常庞大,其中包含的组件也非常多,如何使用这些组件.一种方式是把所有的组件都编译进内核文件,即zImage或bzImage,但这样会导致一个问题,占用内存过多. ...

  9. [UWP]使用Acrylic

    1. 前言 在 如何使用Fluent Design System 这篇文章里已经简单介绍过Reveal的用法,这篇再详细介绍其它内容. 自Windows 8 放弃Aero后,群众对毛玻璃回归的呼声一致 ...

  10. java中数组中一些方法的总结

    这个方法可以控制复制原数组的长度,想要复制多少就可以复制多少 这种复制方法不是特别灵活.只能复制整个数组或者对数组从首部开始进行截取.无法灵活的想复制哪里就复制哪里.因此一般用在数组的扩容上. jdk ...