图片获取像素坐标html,HTML5画布Canvas图片抽取、像素信息获取、命中检测

5268f80b9b1e01f982625ef6fac83ca1.png

今天主要介绍canvas中比较强大的功能

比如将画布内容抽取为图片

获取、修改画布的像素信息

以及画布的命中检测

首先我仍然需要创建画布

图片抽取

首先要明确的一点是

toDataURL()是canvas对象自身的方法而不是环境对象的

这个方法会将canvas的内容抽取为一张图片(base64编码)

我们来看一下它的使用方法

canvas转化为图像

我闲着没事用canvas做了一个太极图

js代码如下let canvas = document.getElementById('myCanvas');

let cxt = canvas.getContext('2d');

let l = canvas.width/2;

const PI = Math.PI;

cxt.translate(l, l);let createTaiChi = () => {

cxt.clearRect(-l, -l, l, l);

cxt.arc(0, 0, l, 0, 2*PI, 0);

cxt.stroke();

cxt.beginPath();

cxt.arc(0, -l/2, l/2, -PI/2, PI/2, 0);

cxt.arc(0, l/2, l/2, 3/2*PI, PI/2, 1);

cxt.arc(0, 0, l, PI/2, PI*3/2, 0);

cxt.fill();

cxt.beginPath();

cxt.fillStyle = '#fff';

cxt.arc(0, -l/2, l/7, 0, PI*2, 0);

cxt.fill();

cxt.beginPath();

cxt.fillStyle = '#000';

cxt.arc(0, l/2, l/7, 0, PI*2, 0);

cxt.fill();

};

createTaiChi();

再配合css做成一个持续旋转的样子#myCanvas {

width: 250px;

height: 250px;

margin: 100px;

animation: rotate 3s linear infinite;

}@keyframes rotate{

0% {

transform: rotateZ(0);

}

100% {

transform: rotateZ(360deg); }}

注意这里我设置的css宽高要比canvas本来的宽高小一倍

(这样可以让canvas更清晰一些)

d7b43c77ba15220e462af324c4dd3a3b.gif

下面我就要将我在canvas画的太极图转化为一张图片

首先要获取canvas的base64编码let data = canvas.toDataURL();console.log(data);

这里我们在控制台打印一下看看它的样子

710964111b379ebd7e2cdeb1e414a8f7.png

我们要向将它变成图片,

只需要创建一个img标签,然后将src设置为data即可let img = document.createElement('img');

img.src = data;document.body.appendChild(img);

这时我们就会发现页面中多了一个静态的太极图

大小与canvas的width/height属性相同 500×500

同源策略限制

注意这个方法是受同源策略限制的

比如说我在页面中添加一个本地图片

然后将这张图片画到canvas中let img = document.getElementsByTagName('img')[0];

cxt.drawImage(img, 0, 0);let data = canvas.toDataURL();

浏览器会报错

29864ba638958d88ff89b64e60430f1c.png

我们使用本地服务器的话就可以使用这个方法

证明这个方法受同源策略限制

像素信息

使用getImageData(x, y, dx, dy)可以获取canvas的像素信息

方法由环境对象调用(我们这里是cxt)

(同样受同源策略限制)

前两个参数是要获取图像信息的起始坐标,后两个参数就是要获取图像信息的宽高

(类似于矩形绘制函数)

这个方法返回一个ImageData对象(包括像素信息数组data还有宽高width/height)

我们主要用这个对象的data属性

我们画布的大小是500×500

所以获取canvas上所有像素信息就是这样console.log(cxt.getImageData(0, 0, 500, 500).data);

f235f05990d3768f02069a961dc55da4.png

我们发现这个数组的长度为100w

377079c2cd422738cbc74a4d3335376d.png

假如我们的canvas有四个像素点

每个像素点信息有分为RGBA四个方面的值

那么数组长度就应该是4×4 = 16

它们分别是

1R 1G 1B 1A

2R 2G 2B 2A

3R 3G 3B 3A

4R 4G 4B 4A

我们这里的canvas一共有500×500 = 25w个像素点

所以像素信息数组大小为 25w×4 = 100w

我们还可以使用createImageData(width,height)方法

创建一个空白imageData对象let blankImg = cxt.createImageData(250, 250);

console.log(blankImg);

b080fd7a788bf995b8815ef5efbcf735.png

使用putImageData(imgData, x, y)可以将你的图像像素覆盖原canvas

imgData就是imgData对象,x,y是覆盖的起始坐标

比如说我将我们上面创建的250×250的空白图像覆盖原canvascxt.putImageData(blankImg, 0, 0);

94db17f5f994d2e6b86becb49eb33598.png

命中检测

isPointInPath()可以检测像素点是否在路径区域内

使用方法很简单cxt.rect(100, 100, 300, 300);if(cxt.isPointInPath(200, 200)){

cxt.stroke();}

isPointInStroke()用来检测像素点是否在路径上,用法也类似

不过它的兼容性不是很好

以上就是HTML5画布Canvas图片抽取、像素信息获取、命中检测的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

1428d0e076c3959ab11d28a39bc84fab.png

5268f80b9b1e01f982625ef6fac83ca1.png

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/392037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS6 下Samba服务器的安装与配置

原地址:http://www.cnblogs.com/mchina/archive/2012/12/18/2816717.html 一、简介 Samba是一个能让Linux系统应用Microsoft网络通讯协议的软件,而SMB是Server Message Block的缩写,即为服务器消息块 ,SMB主要是作为Microsoft的网…

傅里叶变换 直观_A / B测试的直观模拟

傅里叶变换 直观Many of us have heard, read, or even performed an A/B Test before, which means we have conducted a statistical test at some point. Most of the time, we have worked with data from first or third-party sources and performed these tests with ea…

phpstrom+phpstudy+postman

1.打开phpstudy xdebug 扩展 2.修改php.ini [XDebug]xdebug.profiler_output_dir"D:\phpStudy\tmp\xdebug"xdebug.trace_output_dir"D:\phpStudy\tmp\xdebug"zend_extension"D:\phpStudy\php\php-5.5.38\ext\php_xdebug.dll";是否允许Xdebug跟踪…

Java 8 Optional类深度解析

2019独角兽企业重金招聘Python工程师标准>>> 身为一名Java程序员,大家可能都有这样的经历:调用一个方法得到了返回值却不能直接将返回值作为参数去调用别的方法。我们首先要判断这个返回值是否为null,只有在非空的前提下才能将其作…

鸽子 迷信_人工智能如何帮助我战胜鸽子

鸽子 迷信鸽子回避系统 (Pigeon Avoidance System) Disclaimer: You are reading Part 1 that gives an overview of the project. Part 2 describes the technical setup and data collection. Part 3 is about how to train the Pigeon Recognition Model and run it on Rasp…

华为鸿蒙会议安排,2020华为HDC日程确定,鸿蒙、HMS以及EMUI 11成最关注点

原标题:2020华为HDC日程确定,鸿蒙、HMS以及EMUI 11成最关注点HDC:华为开发者大会,目前已经确定将在9月10日正式开幕。日前华为已经在其官网公布了HDC的日程,从现在的消息看华为开发者大会有三大点最受业内关注。鸿蒙操…

反射、元类

一、反射 1、什么是反射:就是反省,自省的意思 反射指的是一个对象应该具备,可以增、删、改、查属性的能力,通过字符串来操作属性 涉及的四个函数,这四个函数就是普通的内置函数,只是没有下划线而已&#xf…

html收款页面模板,订单收款.html

订单收款$axure.utils.getTransparentGifPath function() { return resources/images/transparent.gif; };$axure.utils.getOtherPath function() { return resources/Other.html; };$axure.utils.getReloadPath function() { return resources/reload.html; };…

pandas之时间数据

1.时间戳Timestamp() 参数可以为各种形式的时间,Timestamp()会将其转换为时间。 time1 pd.Timestamp(2019/7/13) time2 pd.Timestamp(13/7/2019 13:05) time3 - pd.Timestamp(2019-7-13) time4 pd.Timestamp(2019 7 13 13:05) time5 pd.Timestamp(2019 July 13 …

scikit keras_Scikit学习,TensorFlow,PyTorch,Keras…但是天秤座呢?

scikit kerasWelcome all! In the first episode of this series, I investigated the four most known machine learning frameworks and discussed which of these you should learn depending on your needs and goals.w ^迎阅读所有! 在本系列的第一集中 &#…

Educational Codeforces Round 25 C. Multi-judge Solving

题目链接:http://codeforces.com/contest/825/problem/C C. Multi-judge Solving time limit per test1 secondmemory limit per test256 megabytesinputstandard inputoutputstandard outputMakes solves problems on Decoforces and lots of other different onli…

山东省2021年高考成绩查询平台6,山东2021年高考成绩改为6月26日前公布

6月11日,山东省教育厅举行2021年第一次高考新闻发布会,介绍2021年高考基本情况、评卷安排、成绩公布等相关工作。山东省教育招生考试院新闻发言人、普招处处长李春光介绍,根据近期国家有关工作要求和强基计划招生工作需要,原定于6…

如何在vuejs里禁用eslint语法检查工具

eslint好是好,可要求很苛刻,对于我这种写代码很糙的媛。。。。。。 搜索的时候有的说加入 /* eslint-disabled */(有用,但只是部分代码享受此待遇) 还有说删除.eslintrc.js里包含eslint关键字的块,a---o---…

数据结构两个月学完_这是我作为数据科学家两年来所学到的

数据结构两个月学完It has been 2 years ever since I started my data science journey. Boy, that was one heck of a roller coaster ride!自从我开始数据科学之旅以来已经有两年了 。 男孩 ,那可真是坐过山车! There were many highs and lows, and…

数学哲学与科学哲学和计算机科学的能动作用,数学哲学与科学哲学和计算机科学的能动作用...

3 数学哲学与计算机科学的能动作用数学哲学对于计算机科学的影响主要表现于以下的事实:一些源于数学哲学(数学基础研究)的概念和理论在计算机科学的历史发展中发挥了十分重要的作用。例如,在此可以首先提及(一阶)谓词演算理论:这是由弗雷格(…

AngularDart4.0 指南- 表单

2019独角兽企业重金招聘Python工程师标准>>> 表单是商业应用程序的主流。您可以使用表单登录,提交帮助请求,下订单,预订航班,安排会议,并执行无数其他数据录入任务。 在开发表单时,创建一个数据…

迈向数据科学的第一步:在Python中支持向量回归

什么是支持向量回归? (What is Support Vector Regression?) Support vector regression is a special kind of regression that gives you some sort of buffer or flexibility with the error. How does it do that ? I’m going to explain it to you in simpl…

jQuery事件整合

一、jQuery事件 1、focus()元素获得焦点 2、blur()元素失去焦点 3、change() 表单元素的值发生变化(可用于验证用户名是否存在) 4、click() 鼠标单击 5、dbc…

tableau跨库创建并集_刮擦柏林青年旅舍,并以此建立一个Tableau全景。

tableau跨库创建并集One of the coolest things about making our personal project is the fact that we can explore topics of our own interest. On my case, I’ve had the chance to backpack around the world for more than a year between 2016–2017, and it was one…

1.0 Hadoop的介绍、搭建、环境

HADOOP背景介绍 1.1 Hadoop产生背景 HADOOP最早起源于Nutch。Nutch的设计目标是构建一个大型的全网搜索引擎,包括网页抓取、索引、查询等功能,但随着抓取网页数量的增加,遇到了严重的可扩展性问题——如何解决数十亿网页的存储和索引问题。20…