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. jQuery.noConflict()解决imgBox.js依赖jquery版本问题

    jQuery提供两种点击图片放大效果出处 在使用imgbox.js是出现的jquery版本不兼容问题,之后了解到jQuery.noConflict()的用法 jQuery.noConflict()的存 ...

  2. Elasticsearch Java API 很全的整理

    Elasticsearch 的API 分为 REST Client API(http请求形式)以及 transportClient API两种.相比来说transportClient API效率更高, ...

  3. flask 微电影网站

    flask简介 轻量级web应用框架 WSGI工具箱才用Werkzeug 模版引擎则使用Jinja2 Flask使用BSD授权 1.virtualenv的使用 (1)创建虚拟环境:virtualenv ...

  4. JVM垃圾回收（下）

    接着上一篇,介绍完了 JVM 中识别需要回收的垃圾对象之后,这一篇我们来说说 JVM 是如何进行垃圾回收. 首先要在这里介绍一下80/20 法则: 约仅有20%的变因操纵着80%的局面.也就是说:所有 ...

  5. Maya零基础新手入门教程第一部分：界面

    第1步:菜单 如果您曾经使用过一个软件,那么您将习惯菜单!在Maya中,菜单包含用于在场景中工作的工具和操作.与大多数程序一样,主菜单位于Maya窗口的顶部,然后还有面板和选项窗口的单独菜单.您还可以 ...

  6. Oier们的幸运数字

    题目描述 JerryC对数字痴迷到了一种非正常的境界.每天JerryC都有喜欢的一些数字.第 iii 天JerryC就喜欢Ai−BiA_i-B_iAi​−Bi​中的数字.但是他觉得这样并不是很有趣,于 ...

  7. PHP代码审计基础-中级篇

    初级篇更多是对那些已有的版本漏洞分析,存在安全问题的函数进行讲解,中级篇更多是针对用户输入对漏洞进行利用 中级篇更多是考虑由用户输入导致的安全问题. 预备工具首先要有php本地环境可以调试代码 总结就 ...

  8. vue实现简单学生信息管理案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 了解这一行的，腰包都鼓鼓的了，程序辅导，CS作业

    我们都知道计算机这类理科专业,可能你打开电脑聊几分钟微信,可能你就已经错过了成为程序员大佬的机会.就像数学专业的同学弯腰捡了一支笔,然后发现黑板被写满从此再也没有学懂数学.所以课后的作业自然也就没法顺 ...

  10. Sublime Text 3 安装 Package Control 结果返回 275309，找不到 Install Package

    打开 Preferences->Settings , 查看 ignored-packages 数组中是否有 Package Control,如果有,删除即可.