将任意图像转成 HTML5 Canvas
2019独角兽企业重金招聘Python工程师标准>>> 
在开始讲解技术细节之前请先看这个演示程序，输入任意的图像URL，然后点击 Img2Canvas 按钮
BTW: 同样接受 data-uri 格式数据。
代码：
01
|
function draw() {
|
02
|
// Get the canvas element and set the dimensions.
|
03
|
var canvas = document.getElementById('canvas');
|
04
|
canvas.height = window.innerHeight;
|
05
|
canvas.width = window.innerWidth;
|
06
|
|
07
|
// Get a 2D context.
|
08
|
var ctx = canvas.getContext('2d');
|
09
|
|
10
|
// create new image object to use as pattern
|
11
|
var img = new Image();
|
12
|
img.src = document.getElementById('url').value;
|
13
|
img.onload = function(){
|
14
|
// Create pattern and don't repeat!
|
15
|
var ptrn = ctx.createPattern(img,'no-repeat');
|
16
|
ctx.fillStyle = ptrn;
|
17
|
ctx.fillRect(0,0,canvas.width,canvas.height);
|
18
|
|
19
|
}
|
20
|
}
|
应用逻辑：
关键的地方在于 createPattern()
nsIDOMCanvasPattern createPattern(in nsIDOMHTMLElement image, in DOMString repetition);
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
01
|
var img = new Image,
|
02
|
canvas = document.createElement("canvas"),
|
03
|
ctx = canvas.getContext("2d"),
|
04
|
src = "http://example.com/image"; // insert image url here
|
05
|
06
|
img.crossOrigin = "Anonymous";
|
07
|
08
|
img.onload = function() {
|
09
|
canvas.width = img.width;
|
10
|
canvas.height = img.height;
|
11
|
ctx.drawImage( img, 0, 0 );
|
12
|
localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
|
13
|
}
|
14
|
15
|
img.src = src;
|
16
|
// make sure the load event fires for cached images too
|
17
|
if ( img.complete || img.complete === undefined ) {
|
18
|
img.src ="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
|
19
|
img.src = src;
|
20
|
}
|
英文原文，OSCHINA原创翻译
转载于:https://my.oschina.net/u/558276/blog/77383
将任意图像转成 HTML5 Canvas相关推荐
- html滑动直播,HTML5 canvas实现的静态循环滚动播放弹幕
本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕,分享给大家,具体如下: 使用方法和API 语法如下: canvasBarrage(canvas, data); 其中: canvas ...
- 基于HTML5 Canvas 实现弹出框
2019独角兽企业重金招聘Python工程师标准>>> 用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理HTML元素实现时简单,但是如果是对HTML5 Canvas 构成的图 ...
- 画正圆角矩形 - HTML5 Canvas 作图
function DrawRoundRect(Canvas,P1,P2,Radius) 功能:画正圆角矩形 参数:P1:矩形左上角坐标:P2:矩形右下角坐标: Radius:圆角大小 源代码: fun ...
- html画布显示PPT,【Web前端问题】有没有办法让HTML5 canvas显示/预览word/excel/powerpoint 文档？...
目前想实现类似百度文库那样的在线文档预览,但是他们使用的一般都是Flash,而HTML5 canvas可以在大多数情况下代替Flash,那么有没有办法让canvas显示/预览Office文档? 如果不 ...
- HTML5 Canvas
HTML5 Canvas 转自:https://blog.csdn.net/u012468376/article/details/73350998 一.canvas简介 <canvas&g ...
- 基于php的地铁查询系统,HTML5 Canvas实现交互式地铁线路图
这篇文章给大家介绍的文章内容是关于基于 HTML5 Canvas 的交互式地铁线路图,有很好的参考价值,希望可以帮助到有需要的朋友. 前言 前两天在 echarts 上寻找灵感的时候,看到了很多有关地 ...
- 利用HTML5 canvas合并图片并解决Filaed to execute 'toDataURL' on 'HTMLCanvasElement'异常
有两张图片,如下图所示,如何将两张图片合并成一张? 使用HTML5的canvas相关知识可以简单快捷地解决此需求. 目录结构: 源码使用原生js,不需要引入第三方库: <!DOCTYPE htm ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- android 弹出弹框2秒消失_基于HTML5 Canvas 实现弹出框
前言 用户鼠标移入时,有弹出框出现,这样的需求很常见.这在处理 HTML 元素实现时简单,但是如果是对 HTML5 Canvas 构成的图形进行处理,这种方法不再适用,因为 Canvas 使用的是另外 ...
最新文章
- 新疆弃光量下降14% 弃光问题仍然难解
- docker应用到生产环境的前提
- java oom_Java中关于OOM的场景及解决方法
- C# WinForm DataGridView单击选中一整行，只能单选
- mysql基础命令大全
- 对vector中的数据排序
- （四）数据结构与算法-链表
- Python 数据结构与算法 —— list与deque（双端队列）
- 只需简单的整理，让你的Mac 更安全、更智能
- 分析公司盈利能力的方法
- c语言结构体应用例程：输入今天日期，输出明天日期
- Python Revisited Day 08 (高级程序设计技术)
- Unity学习2：如何实现个性化渲染平面（图文详细）
- 关于SCI论文发表的五不准原则是
- 在CentOs7上部署Gunicorn
- C语言：根据集合元素有互异性，将两个集合并集(一种方法之一）
- Android7.0 BatteryStatsService
- React(Js)学习
- Arduino 74HC595驱动数码管0-9循环显示+Proteus仿真
- HBase原理 | HBase分区影响与合理分区设置