javascript canvas 生成图片的方法

先生成base64格式的图片 然后ajax传到后台 写入服务器文件夹即可
<pre>
<!DOCTYPE HTML>
<html>

<body>
<canvas id="myCanvas">
your browser does not support the canvas tag
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 80, 100);

var data = getBase64Image();
console.log(data);

function getBase64Image() {
var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL("image/png");
return dataURL
// return dataURL.replace("data:image/png;base64,", "");
}
</script>
</body>

</html>
</pre>

javascript canvas 生成图片的方法的更多相关文章

  1. [ javascript canvas toDataURL() clip() ] javascript canvas toDataURL() clip() 属性及方法演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  2. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  3. [JavaScript] canvas 合成图片和文字

    Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...

  4. Android和JavaScript相互调用的方法

    转载地址:http://www.jb51.net/article/77206.htm 这篇文章主要介绍了Android和JavaScript相互调用的方法,实例分析了Android的WebView执行 ...

  5. JavaScript document属性和方法

    JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes     存储节点的属性列表 ...

  6. 将JavaScript 插入网页的方法

    将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...

  7. JavaScript常用对象的方法和属性

    ---恢复内容开始--- 本文将简单介绍JavaScript中一些常用对象的属性和方法,以及几个有用的系统函数. 一.串方法 JavaScript有强大的串处理功能,有了这些串方法,才能编写出丰富多彩 ...

  8. js 判断数组包含某值的方法 和 javascript数组扩展indexOf()方法

    var  questionId = []; var anSwerIdValue = []; ////javascript数组扩展indexOf()方法 Array.prototype.indexOf ...

  9. PHP使用内置函数生成图片的方法详解

    原文地址:http://www.poluoluo.com/jzxy/201605/475301.html 本文实例讲述了PHP使用内置函数生成图片的方法.分享给大家供大家参考,具体如下: 第一步:创建 ...

随机推荐

  1. 【TencentOS tiny】深度源码分析（7）——事件

    引言 大家在裸机编程中很可能经常用到flag这种变量,用来标志一下某个事件的发生,然后在循环中判断这些标志是否发生,如果是等待多个事件的话,还可能会if((xxx_flag)&&(xx ...

  2. windows服务器多端口Redis安装步骤

    1.从官网获取最新稳定版redis文件.按端口号复制多个文件,比如6379和6380端口的文件包, 修改各自Conf文件的port号,分别为6379和6380.然后重命名为redis6379.conf ...

  3. django创建表单以及表单数据类型和属性

    08.15自我总结 关于django的表单不同关系之间的创建 一.不同关系之间的创建 1.一对一 举例 母表:userinfo id name age 1 张三 12 2 李四 58 字表:priva ...

  4. 程序猿的产品思考：2C与2B产品思维的区别

    原创/朱季谦   我最早接触到互联网产品的时候,听到最多的,是做产品要有用户思维,即站在用户角度去看待产品.这个先入为主的概念,在很长一段时间里,都被我效作经典.然而也在很长一段时间里,我竟混淆了其中 ...

  5. 四jmeter脚本开发

    4.1工作区介绍 4.2http协议录制 a.使用badboy进行录制(目前公司测试系统使用badboy界面不友好,暂时不用,之后再补充) b.jmeter代理服务器进行录制 (1)浏览器代理配置(以 ...

  6. 时针.html

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

  7. SpringBoot整合RabbitMq(二)

           本文序列化和添加package参考:https://www.jianshu.com/p/13fd9ff0648d RabbitMq安装 [root@topcheer ~]# docker ...

  8. Flask源码分析二：路由内部实现原理

    前言 Flask是目前为止我最喜欢的一个Python Web框架了,为了更好的掌握其内部实现机制,这两天准备学习下Flask的源码,将由浅入深跟大家分享下,其中Flask版本为1.1.1. 上次了解了 ...

  9. 用Python编写简单的发红包程序和计算器原理

    用Python编写简单的发红包程序: 第一种解法:数轴方法解决 import random def red_packet(money,num): money = money * 100 #将钱数转换成 ...

  10. CTR@因子分解机(FM)

    1. FM算法 FM(Factor Machine,因子分解机)算法是一种基于矩阵分解的机器学习算法,为了解决大规模稀疏数据中的特征组合问题.FM算法是推荐领域被验证效果较好的推荐算法之一,在电商.广 ...