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. mac 下修改 jenkins 端口以及Jenkins的启动、关闭与更新

    安装包安装的Jenkins修改默认端口的方法: 先关闭jenkins ; 命令行下修改端口:sudo defaults write /Library/Preferences/org.jenkins-c ...

  2. 一篇干货满满的 NFS 文章

    目录 NFS 1. 安装 2. 配置 3. 启动并添加到开机自启 4. NFS 客户端挂载 5 报错与解决办法 6. Win 系统安装 NFS client NFS 1. 安装 yum install ...

  3. Python小游戏——猜数字教程（random库教程）

    今天来开发一个简单的数字逻辑游戏,猜数字(数字炸弹) 首先开发游戏第一件事,了解需求. 猜数字游戏规则: 计算机随机生成一个指定范围的数字,由玩家来猜测, 之后计算机会根据玩家提供数字来与自己生成的数 ...

  4. .Net Core API使用ODP.NET操作Oracle数据库

    .Net Core API使用ODP.NET操作Oracle数据库 1.下载Oracle.ManagerDataAccess.Core. 右键依赖项——管理NuGet程序包. 在浏览选项中查询Orac ...

  5. Python3+PyCharm+PyQt5配置进行GUI开发

    一.安装Python3.5以上版本. 链接:https://www.python.org/downloads/windows/ 二.安装PyQt5. 使用pip安装:1.进入 C:\Users\你的计 ...

  6. 爬虫2：html页面+beautifulsoap模块+post方式+demo

    爬取html页面,有时需要设置参数post方式请求,生成json,保存文件中. 1)引入模块 import requests from bs4 import BeautifulSoup url_ = ...

  7. Vue 全家桶，深入Vue 的世界

    内容简介: Vue 实例上的属性 Vue 生命周期 Vue 数据绑定 computed 计算属性 watch 监听器 Vue 组件 Vue 组件 extend Vue 组件高级属性 Vue 的rend ...

  8. ‎Cocos2d-x 学习笔记(15.3) EventDispatcher DirtyFlag 脏标记

    1. 定义 用枚举定义脏标记的4种类型. enum class DirtyFlag { NONE = , FIXED_PRIORITY = << , SCENE_GRAPH_PRIORIT ...

  9. std::weak_ptr

    weak_ptr 是一种不控制对象生命周期的智能指针, 它指向一个 shared_ptr 管理的对象. 进行该对象的内存管理的是那个强引用的 shared_ptr. weak_ptr只是提供了对管理对 ...

  10. pytest2-收集与执行测试用例规则

    pytest收集测试用例规则 测试文件以test_开头(以_test结尾也可以) 测试类以Test开头,并且不能带有 init 方法 测试函数以test_开头(以_test结尾也可以) pytest执 ...