/* canvas-toBlob.js
* A canvas.toBlob() implementation.
* 2016-05-26
*
* By Eli Grey, http://eligrey.com and Devin Samarin, https://github.com/eboyjr
* License: MIT
* See https://github.com/eligrey/canvas-toBlob.js/blob/master/LICENSE.md
*/ /*global self */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
plusplus: true */ /*! @source http://purl.eligrey.com/github/canvas-toBlob.js/blob/master/canvas-toBlob.js */ (function(view) {
"use strict";
var
Uint8Array = view.Uint8Array
, HTMLCanvasElement = view.HTMLCanvasElement
, canvas_proto = HTMLCanvasElement && HTMLCanvasElement.prototype
, is_base64_regex = /\s*;\s*base64\s*(?:;|$)/i
, to_data_url = "toDataURL"
, base64_ranks
, decode_base64 = function(base64) {
var
len = base64.length
, buffer = new Uint8Array(len / 4 * 3 | 0)
, i = 0
, outptr = 0
, last = [0, 0]
, state = 0
, save = 0
, rank
, code
, undef
;
while (len--) {
code = base64.charCodeAt(i++);
rank = base64_ranks[code-43];
if (rank !== 255 && rank !== undef) {
last[1] = last[0];
last[0] = code;
save = (save << 6) | rank;
state++;
if (state === 4) {
buffer[outptr++] = save >>> 16;
if (last[1] !== 61 /* padding character */) {
buffer[outptr++] = save >>> 8;
}
if (last[0] !== 61 /* padding character */) {
buffer[outptr++] = save;
}
state = 0;
}
}
}
// 2/3 chance there's going to be some null bytes at the end, but that
// doesn't really matter with most image formats.
// If it somehow matters for you, truncate the buffer up outptr.
return buffer;
}
;
if (Uint8Array) {
base64_ranks = new Uint8Array([
62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1
, -1, -1, 0, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25
, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35
, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51
]);
}
if (HTMLCanvasElement && (!canvas_proto.toBlob || !canvas_proto.toBlobHD)) {
if (!canvas_proto.toBlob)
canvas_proto.toBlob = function(callback, type /*, ...args*/) {
if (!type) {
type = "image/png";
} if (this.mozGetAsFile) {
callback(this.mozGetAsFile("canvas", type));
return;
} if (this.msToBlob && /^\s*image\/png\s*(?:$|;)/i.test(type)) {
callback(this.msToBlob());
return;
} var
args = Array.prototype.slice.call(arguments, 1)
, dataURI = this[to_data_url].apply(this, args)
, header_end = dataURI.indexOf(",")
, data = dataURI.substring(header_end + 1)
, is_base64 = is_base64_regex.test(dataURI.substring(0, header_end))
, blob
;
if (Blob.fake) {
// no reason to decode a data: URI that's just going to become a data URI again
blob = new Blob
if (is_base64) {
blob.encoding = "base64";
} else {
blob.encoding = "URI";
}
blob.data = data;
blob.size = data.length;
} else if (Uint8Array) {
if (is_base64) {
blob = new Blob([decode_base64(data)], {type: type});
} else {
blob = new Blob([decodeURIComponent(data)], {type: type});
}
}
callback(blob);
}; if (!canvas_proto.toBlobHD && canvas_proto.toDataURLHD) {
canvas_proto.toBlobHD = function() {
to_data_url = "toDataURLHD";
var blob = this.toBlob();
to_data_url = "toDataURL";
return blob;
}
} else {
canvas_proto.toBlobHD = canvas_proto.toBlob;
}
}
}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this));

canvas toBlob ,ie兼容的更多相关文章

  1. 某些浏览器没有canvas.toBlob 方法的解决方案

    var dataURLtoBlob = require('blueimp-canvas-to-blob'); // 80x60px GIF image (color black, base64 dat ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. canvas简介

    一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...

  4. canvas导出图片方法总结

    html代码 <canvas id="canvas" width="100" height="100" ></canvas ...

  5. 基于html5 canvas 的强大图表插件【Chart.js】

    名词解释 Chart.js:是基于html5和canvas的强大图表插件,支持多样的图表形式,柱状线性饼环极地雷达等等: canvas:只兼容到IE9 excanvas.js:强大的第三方兼容插件,可 ...

  6. H5的canvas绘图技术

    canvas元素是HTML5中新添加的一个元素,该元素是HTML5中的一个亮点.Canvas元素就像一块画布,通过该元素自带的API结合JavaScript代码可以绘制各种图形和图像以及动画效果. 1 ...

  7. canvas图片合成中的坑

    需求 要用代码来实现多张外部图片和文字的合并而且要上传到七牛云,再将图片链接通过客户端分享出去.图片背景需要支持用户自定义更换. 实现方案 在一个canvas上多次调用drawImage函数,分别绘制 ...

  8. Canvas入门到高级详解(上)

    神奇的 canvas--AICODER 全栈培训 IT 培训专家 一.canvas 简介 1.1 什么是 canvas?(了解) 是 HTML5 提供的一种新标签 <canvas>< ...

  9. he canvas has been tainted by cross-origin data and tainted canvases may not be exported

    来自: https://ourcodeworld.com/articles/read/182/the-canvas-has-been-tainted-by-cross-origin-data-and- ...

随机推荐

  1. Android SDK Android NDK Android Studio 官方下载地址<转>

    转自:http://www.cnblogs.com/yaotong/archive/2011/01/25/1943615.html 2016.10Android Studio 2.2.1.0https ...

  2. navigation ObtacleCostFunction源码分析

    ObtacleCostFunction 定义了一个ObstacleCostFunction类,继承自Trajectory类,Trajectory类有8个类参 总共有8个类参 double xv_,yv ...

  3. Jeecg心得篇--这个世界不缺程序员,而是缺少匠人和架构师

    真正的快乐,是用自己喜欢的方式过完这一生.来人间一趟,不能只为了活着. 这个世界不缺程序员,而是缺少匠人精神的架构师与产品经理. 因为他们通过自己的行为与理念默默地改变着世界,一个更好的世界. 这是我 ...

  4. 爱好-超级IP:超级IP

    ylbtech-爱好-超级IP:超级IP  IP,是Intellectual Property的缩写,字面粗译为“知识产权”,特指具有长期生命力和商业价值的跨媒介内容运营.一个具有可开发价值的真正的I ...

  5. centos7安装kafka

    1.官网或 wget 下载 kafka_2.12-2.2.0.tgz 二进制代码包 cd /home/tar wget http://mirror.bit.edu.cn/apache/kafka/2. ...

  6. 003-spring-data-elasticsearch 3.0.0.0使用【一】-spring-data之概述、核心概念、查询方法、定义Repository接口

    零.概述 Spring Data Elasticsearch项目提供了与Elasticsearch搜索引擎的集成.Spring Data Elasticsearch的关键功能区域是一个POJO中心模型 ...

  7. Android加载网络图片报android.os.NetworkOnMainThreadException异常

    Android加载网络图片大致可以分为两种,低版本的和高版本的.低版本比如4.0一下或者更低版本的API直接利用Http就能实现了: 1.main.xml <?xml version=" ...

  8. Pku2054 Color a Tree

    有一个N个结点的有根树,1是这个树的根.现在要对这N个结点依次进行染色,每个结点染色要花费1个单位的时候,同时要满足一个结点仅在其父亲被染色后才可被染色,每个结点有个权值Ci,如果我们在第Ti时间对i ...

  9. mysql 函数 时间函数,数学函数,字符串函数,条件判断函数

    =========================================== mysql 相关函数 ============================================= ...

  10. Node.js实战9:用EventEmitter触发和响应事件。

    Nodejs有一个重要的事件模块:EventEmitter. 它在Nodejs的内置及第三方模块中被大量使用,许多Nodejs项目的架构都是用它实现的. 可见,EventEmitter对于学习Node ...