html5 canvas 图像预览,html5-canvas 加载并显示图像

示例

加载图像并将其放置在画布上

var image = new Image();  // 请参阅有关创建图像的注释

image.src = "imageURL";

image.onload = function(){

ctx.drawImage(this,0,0);

}

创建图像

有几种创建图像的方法new Image()

document.createElement("img")

imageUrl  作为HTML正文的一部分,并通过 document.getElementById('myImage')

该图像是 HTMLImageElement

Image.src属性

该图像src可以是任何有效的图像URL或编码的dataURL。有关图像格式和支持的更多信息,请参见本主题的备注。image.src = "http://my.domain.com/images/myImage.jpg"

image.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=" *

* dataURL是包含黑色的1乘1像素gif图像

关于加载和错误的说明

设置其src属性后,图像将开始加载。加载是同步的,但是onload直到函数或代码退出/返回后才调用该事件。

如果您从页面获取图像(例如document.getElementById("myImage")),并且图像src已设置,则可能已加载或可能未加载。您可以检查与图像的状态HTMLImageElement.complete,这将是true,如果完成。这并不意味着图像已经加载,这意味着它已经已加载

有一个错误

尚未设置src属性,该属性等于空字符串 ""

如果图像来自不可靠的来源,并且由于各种原因可能无法访问,则它将生成错误事件。发生这种情况时,图像将处于损坏状态。如果随后尝试将其绘制到画布上,则会引发以下错误

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.

通过提供image.onerror = myImgErrorHandler事件,您可以采取适当的措施来防止错误。

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

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

相关文章

html能插入背景的行级元素,Html元素类型:块级元素、行内元素(内联元素)和行内块级元素...

8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?html中的标签元素大体被分为三种不同的类型:块级元素、内联元素(又叫行内元素)和内联块级元素。事实上,我以前用的时候只是建立在对它们的初…

fox pro删除单条数据_Mac文件夹数据同步工具——Sync Folders Pro

Mac版同步文件夹Pro(文件夹数据同步工具)分享给大家!Mac版同步文件夹Pro是一种功能强大的文件夹数据同步工具,可帮助您同步两一个文件夹的内容,包括任何子文件夹。使用文件夹同步软件,允许您在任一方向或两…

bp神经网络预测未来五年数据_预测 | 未来五年以太网收发器出货将达2.75亿只

新闻导读LC最新预测表明,从2021年到2025年间,供应商将售出2.75亿只以太网收发器,为其带来240亿美元的收入。但由于激烈的竞争、电信和企业网络投资的放缓,以及中美敌对升级可能导致中国云数据中心升级的延迟,LC下调了未…

计算机知识竞赛决赛流程,计算机知识竞赛决赛圆满结束!还不快戳?!

原标题:计算机知识竞赛决赛圆满结束!还不快戳?!温 馨 提 示 :热烈庆祝:青海大学 “计算机知识竞赛”圆满结束!计算机莅临本场比赛的嘉宾有:计算机协会指导老师:贾金芳老师…

开关造成的毛刺_玻璃面板开关钻孔加工

玻璃面板开关,也叫做钢化玻璃开关。与传统的面板开关不同在于它是用钢化玻璃制作而成,但是同样能够达到控制电路的作用,这种开关的设计理念是为了能够达到简约时尚的作用,同时也具有美观与安全性,可以说是受到许多家庭…

html播放rtsp流,浏览器播放rtsp视频流解决方案

最近项目中需要实时播放摄像头rtsp视频流,于是就专门做了些研究。而浏览器不能直接播放,只有通过插件或者转码来实现这个需求。要实现这个目的,可以采用的方案非常得多,有商业的也有开源的,这里主要列举一些开源的方案…

本科计算机专业在车辆段,机电与轨道车辆工程系2021届毕业生参加成都铁路局车辆段及电务段认知实习...

2020年10月28日,在机电与轨道车辆工程系专业教师及辅导员们的带领下,轨道交通学院机电与轨道车辆工程系2017级本科车辆工程专业、机械设计制造及其自动化专业、2018级专科城市轨道交通车辆技术专业共108名学生,以及2017级本科电气工程专业45名…

java参数注解pam_吃透Java基础十:注解

一、什么是注解官方定义:注解是一系列元数据,它提供数据用来解释程序代码,但是注解并非是所解释的代码本身的一部分。注解对于代码的运行效果没有直接影响。注解有许多用处,主要如下:提供信息给编译器:编译…

广州计算机操作员培训,汕尾市计算机操作员报名考试时间地址及培训入口

生活习惯越来越多的计算机进入了人们的日常生活,随着计算机价格的逐步便宜,越来越多的家长为自己的孩子购置了计算机,但是计算机目前在我们的日常生活中,却没有扮演一个下面的角色,现在家庭中的计算机一般都是作为娱乐…

go get如何删除_Go 每日一库之 xorm

简介Go 标准库提供的数据库接口database/sql比较底层,使用它来操作数据库非常繁琐,而且容易出错。因而社区开源了不少第三方库,如上一篇文章中的sqlc工具,还有各式各样的 ORM (Object Relational Mapping,对象关系映射…

浮点加法器计算机组成原理,计算机组成原理 第二章运算方法与运算器

第二章运算方法与运算器运算方法:指算术(四则)运算和逻辑运算,在运算器的实现方法,而实现这两种运算的硬设备就是算术逻辑部件ALU(Arithmeticand Logic Unit)或称运算器由于逻辑运算及实现较简单,所以本章主要讨论计算机中算术四则…

wordpress添加html媒体文件,WordPress“添加媒体”文件时只显示上传到当前文章的附件图片...

最近子凡把很大一部分精力都分散在了泪雪建站的改版和泪雪网的运营中去了,随着泪雪网的定位和内容的新增,网站也需要有很多细节的升级,而在今天就给大家分享一个 WordPress 如何在编辑文章时“添加媒体”中默认只显示上传到本文中的附件的方法…

世界上最大的计算机硬盘,全球我最大 忆捷A600 2TB移动硬盘评测

评测工程师简介:PConline评测工程师:韩松评测工程师点评:移动领域里面的新霸主,为需要安全的人士提供了一个全新的移动理念。集安全性、技术性、容量、兼容性、稳定性、散热性等重要指标于一身。可以说忆捷A600绝对是移动硬盘领域…

tplink连接服务器失败_管家婆财贸双全连接失败,服务器端没有找到加密狗

管家婆财贸双全连接失败,服务器端没有找到加密狗管家婆财贸双全找不到狗判断步骤1、先判断电脑能否识别管家婆财贸双全加密狗我的电脑--右键--属性--硬件--设备管理器--通用串行总线控制器(或人体学接口设备)看有没有这个 SafeNet Inc. USB Key 出现,插上…

2020年秋计算机科学导论,南开大学《主干课1-计算机科学导论》2020秋主干课考试...

试卷总分:100 得分:303 R- k9 d3 ^1 } F一、单选题 (共 10 道试题,共 20 分)- z" x3 C% Z7 V |9 D p5 s1.数字836的基数可能是( )3 D) j2 h- l N OA.2" D# H% r2 b3 ]; d" iB.57 E; n, U4 v# |; L4 k% r4 u- QC.78 x) x" r3 r; y6 A2 oD.10) X3…

两直线平行交叉相乘_人教版初中数学七年级下册 平行线判定2公开课优质课课件教案视频...

平 行 线 的 判 定 一、教材分析1、主要内容及其地位本节的主要内容是平行线的判定公理及两个判定定理,由分析画平行线的过程得知,画平行线实际上就是画相等的同位角,由此得到平行线的判定公理——“同位角相等,两直线平行”&…

相关系数矩阵计算_corrplot包:相关性矩阵可视化

今天学习下相关性矩阵的可视化,可以用来可视化相关性矩阵的包有corrplot包、corrgram包、GGally包、ggcorrplot包等,这些包在大部分情况下都可以满足需求。今天先来学习corrplot包的使用,后面几天有空会详细讲解下另外三个包。目 录1. 安装和…

pat根据中序遍历和先序遍历_[leetcode/lintcode 题解] 前序遍历和中序遍历树构造二叉树...

【题目描述】根据前序遍历和中序遍历树构造二叉树.在线评测地址:九章算法 - 帮助更多中国人找到好工作,硅谷顶尖IT企业工程师实时在线授课为你传授面试技巧​www.jiuzhang.com【样例】样例 1:输入:[],[] 输出:{} 解释: 二叉树为空…

java中审核订单流程图_「数据架构」数据流程图:实例-订餐系统

数据流图(DFD)提供了系统内信息流(即数据流)的可视化表示。通过绘制数据流程图,您可以了解由参与系统流程的人员提供并交付给他们的信息、完成流程所需的信息以及需要存储和访问的信息。本文以一个订餐系统为例,对数据流图(DFD)进行了描述和说明。食品订…

jsp项目放入宝塔windows环境_商业裂变,之项目技术实战(第八节:宝塔面板介绍)...

一、宝塔简介:宝塔面板是一款服务器管理软件,支持windows和linux系统,可以通过Web端轻松管理服务器,提升运维效率。例如:创建管理网站、FTP、数据库,拥有可视化文件管理器,可视化软件管理器&…