JavaScript canvas实现加载图片
更新时间：2021年08月18日 08:36:48 作者：imk_
这篇文章主要为大家详细介绍了JavaScript canvas实现加载图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript canvas实现加载图片的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using image</title>
<style type="text/css">
* {
/* margin: 0;
padding: 0; */
box-sizing: border-box;
}
canvas {
border-width: 1px;
border-color: #000000;
border-style: solid;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div>
<input type="file" accept="image/*" />
</div>
<script type="text/javascript">
window.onload = (event) => {
main()
}
function main() {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const inputFile = document.querySelector("input[type=file]");
inputFile.onchange = (event) => {
const files = event.target.files;
if (files.length > 0) {
const file = files[0]; // First file
console.log(file);
const image = new Image();
image.src = URL.createObjectURL(file);
image.onload = function(event) {
// console.log(event, this);
URL.revokeObjectURL(this.src);
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
}
}
}
}
</script>
</body>
</html>
参考：链接
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇Canvas放置反弹效果随机图形(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了小程序实现计时器小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章给大家详细介绍了javascript中双等号(==)隐性转换机制，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-10-10
JavaScript静态的动态...2006-09-09
本篇文章主要是对js实现文本框中焦点在最后位置的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所 帮助2014-03-03
这篇文章主要介绍了使用postMessage实现iframe跨域通信，第一种使用postMessage在irfame中实现跨域数据传递，第二种使用postMessage在window.open()中的使用，本文结合示例代码给大家详细讲解，需要的朋友跟随小编一起看看吧2022-03-03
这篇文章主要介绍了JavaScript判断浏览器版本的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章主要介绍了js防止DIV布局滚动时闪动的解决方法,通过js的window.requestAnimationFrame来解决这一问题,非常具有实用价值,需要的朋友可以参考下2014-10-10
这篇文章主要给大家介绍了关于echarts横向柱状图简单实现的相关资料,ECharts是百度前端开发部开发的一个开源可视化库,它可以帮助开发者轻松的实现各种数据可视化,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
解决前端接收 type:"application/octet-stream" 格
前端接收 type: “application/octet-stream“ 格式的数据并下载,还有后端既返回octet-stream还返回JSON数据时的处理方法,今天给大家分享前端接收 type:"application/octet-stream" 格式的数据并下载(解决后端返回不唯一问题)的解决方案,感兴趣的朋友一起看看吧2023-12-12
最新评论