最简例子

<!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. UVA 10382 - Watering Grass【贪心+区间覆盖问题+高精度】

    UVa 10382 - Watering Grass n sprinklers are installed in a horizontal strip of grass l meters long a ...

  2. POJ3041-Asteroids-匈牙利算法

    Asteroids Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 23963   Accepted: 12989 Descr ...

  3. volatile 与 synchronized 区别

    在Java中,为了保证多线程读写数据时保证数据的一致性,可以采用两种方式: 同步 如用synchronized关键字,或者使用锁对象. volatile 使用volatile关键字用一句话概括vola ...

  4. 免费V P N获取方式。

    给需要加速器链接国外网站的朋友, 打开网址:http://miaoaff.com/reg.php?id=204250: 用一个邮箱注册,就会得到一个免费的vpn软件账号(包含300M流量时间永久): ...

  5. the server responded with a status of 414 (Request-URI Too Large)

    nginx 配置不当,前端ajax调用报错: the server responded with a status of 414 (Request-URI Too Large) 浏览器F12报错如下: ...

  6. 我的第一个python web开发框架（20）——产品发布（部署到服务器）

    首先按上一章节所讲述的,将服务器环境安装好以后,接下来就是按步骤将网站部署到服务器上了. 我们的站点是前后端分离的,所以需要部署两个站点.首先来发布前端站点. 部署前端站点 输入命令进入svn管理文件 ...

  7. Effective Java 第三版——25. 将源文件限制为单个顶级类

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  8. DEDECMS开启邮箱验证通知的解决方法

    [摘要]织梦CMS是开源内容管理系统,是国内开源CMS的领先品牌,目前程序安装量已达七十万,本文介绍DEDECMS会员注册时,开启邮箱验证通知的解决方法. 在论坛上看到很多人都说这个功能没用,邮箱根本 ...

  9. Servlet&&Jsp 概述

    主题 Servlet的作用 构建动态网页 Servlet代码初探 Servlet与其他技术的对比 Jsp的作用 Servlet的作用 Servlet是在web服务器或应用服务器上用来动态生成html的 ...

  10. 【WebApi系列】浅谈HTTP

    [01]浅谈HTTP在WebApi开发中的运用 [02]聊聊WebApi体系结构 [03]详解WebApi如何传递参数 [04]详解WebApi测试和PostMan [05]浅谈WebApi Core ...