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

示例

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

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

image.src = "imageURL";

image.onload = function(){

ctx.drawImage(this,0,0);

}

创建图像

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

document.createElement("img")

作为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事件，您可以采取适当的措施来防止错误。

html5 canvas 图像预览,html5-canvas 加载并显示图像相关推荐

uniapp swiper实现图片预览预览一张图片加载前后两张实现性能优化
背景: 使用uniapp框架在做h5项目时,领导要求预览图片时不能一次性加载完所有的图片,需要看一张加载一张,这样用户不费流量,优化h5的性能. 首先uniapp官网实现图片预览使用的是uni.pre ...
如何一步步实现异步上传图片并预览图片(异步加载图片)
写在开头最近在做一个美食博客的网站系统,还没有完工,在制作发布文章页面的时候(类似CSDN的Markdown写文章的功能),碰到了需要上传文章图片的的需求,实不相瞒,耗了不少脑细胞!! 准备:文件上 ...
html画布显示PPT,【Web前端问题】有没有办法让HTML5 canvas显示/预览word/excel/powerpoint 文档？...
目前想实现类似百度文库那样的在线文档预览,但是他们使用的一般都是Flash,而HTML5 canvas可以在大多数情况下代替Flash,那么有没有办法让canvas显示/预览Office文档? 如果不 ...
html blob处理图片,将Blob图像预览为HTML5
将Blob图像预览为HTML5 (Preview Blob Image to HTML5 ) 我使用Java开发一个网站,我有一个图像存储在数据库中作为BLOB ,当它在浏览器中加载时,输出看起来像这 ...
html图片查看代码实现,如何用HTML5实现图片预览和查看原图的功能
html5实现图片预览和查看原图 html5实现图片预览和查看原图相对以前容易多了,在以前,为了安全,web端的js是不能读取文件的本地真实路径的,只能将图片上传到服务器上,再取图片的链接,这样才能实 ...
html5实现图片预览和查看原图
html5提供了很多新的API,减轻了很多开发者的工作,比如这次要讲解的FileReader和naturalWidth,naturalHeight就能实现图片预览和查看原图功能 html5 从一开始就 ...
HTML5点击图片查看大图,科技常识：HTML5 实现图片预览和查看原图
今天小编跟大家讲解下有关HTML5 实现图片预览和查看原图 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 实现图片预览和查看原图的相关资料,希望小伙伴们看了有所帮助. htm ...
上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...
本文实例讲述了JS+HTML5实现上传图片预览效果.分享给大家供大家参考,具体如下: 在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件 ...
java 视频转码工具类_JavaCV入门指南：FrameConverter转换工具类及CanvasFrame图像预览工具类（javaCV教程完结篇）...
JavaCV入门指南:FrameConverter转换工具类及CanvasFrame图像预览工具类(javaCV教程完结篇) 前言再此章之前,我们已经详细介绍和剖析了javacv的结构和ffmpeg ...

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

html5 canvas 图像预览,html5-canvas 加载并显示图像相关推荐

最新文章

热门文章