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. 【JZOJ5264】化学

    Description Input Output Sample Input 3 10 1 2 10 Sample Output 5 Hint   题解: 这个题目通过30%部分分的提示,我们可以猜出这 ...

  2. GUI篇 tkinter (Label,Button)之一

    import tkinterfrom tkinter import * # tkinter._test() # 实例化一个窗口对象base = tkinter.Tk()# 修改窗口的标题base.wm ...

  3. 超炫酷的 IntelliJ IDEA 插件(一)

    工善其事必先利器 打开setting文件选择Plugins选项 Ctrl + Alt + S File -> Setting 我的idea是最新版本2019.02 有的和别人界面可能不一样 主界 ...

  4. 树莓派(4B)Linux + .Net Core嵌入式-初始化环境(一)

    一.树莓派简单介绍 二.软&件准备 硬件:树莓派4B主机.电源线.TF卡&TF读卡器.PC 软件:win32diskimager(用于烧系统到TF卡).Xshell或Windows T ...

  5. Ajax：后台jquery实现ajax无刷新删除数据及demo

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8gAAAFSCAIAAAChUmFZAAAgAElEQVR4nO29z4scWZbn2/+Hb30zi8

  6. JS中的事件委托/事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  7. php反序列化漏洞复现过程

    PHP反序列化漏洞复现 测试代码 我们运行以上代码文件,来证明函数被调用: 应为没有创建对象,所以构造函数__construct()不会被调用,但是__wakeup()跟__destruct()函数都 ...

  8. stm32cubeMX配置LWIP

    MCU:stm32f769NIHx  PHY:LAN8742A LWIP_VERSION:2.0.3 1.配置RCC,串口(printf debug log) (1)开启RCC,配置时钟系统 图1.1 ...

  9. 2. Rsync-远程同步(上)

    课程大纲: 1.什么是备份? 就是给源文件 增加 一个 副本. U盘 D --> E 2.为什么要做备份? 1.数据重要? 2.防止误操作 3.能够快速恢复 3.能不能不做备份? 可以, 不重要 ...

  10. StringBuffer类讲解

    package Main; import java.util.Scanner; public class Main { public static void main(String[] args) { ...