JavaScript canvas實現(xiàn)加載圖片
更新時間：2021年08月18日 08:36:48 作者：imk_
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實現(xiàn)加載圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript canvas實現(xiàn)加載圖片的具體代碼，供大家參考，具體內(nèi)容如下
代碼：
<!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>
參考：鏈接
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript使用RegExp進(jìn)行正則匹配的方法
這篇文章主要介紹了JavaScript使用RegExp進(jìn)行正則匹配的方法,實例分析了RegExp對象在進(jìn)行正則匹配時的相關(guān)使用技巧,需要的朋友可以參考下2015-07-07
JS數(shù)據(jù)格式化是在進(jìn)行web前端開發(fā)時常碰到的事情,特別是在數(shù)據(jù)類型為Float的數(shù)據(jù)就需要特殊處理,如保留兩位小數(shù)、小數(shù)點(diǎn)后的數(shù)據(jù)是否需要四舍五入等等,下面這篇文章主要給大家介紹了關(guān)于js保留兩位小數(shù)最簡單的實現(xiàn)方法,需要的朋友可以參考下2023-05-05
JavaScript如何正確聲明和使用變量詳細(xì)代碼實例
變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間,下面這篇文章主要給大家介紹了關(guān)于JavaScript如何正確聲明和使用變量的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
使用Javascript開發(fā)sliding-nav帶滑動條效果的導(dǎo)航插件
這篇文章主要介紹了使用Javascript開發(fā)sliding-nav帶滑動條效果的導(dǎo)航插件,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-03-03
js利用遞歸與promise 按順序請求數(shù)據(jù)的方法
這篇文章主要介紹了js利用遞歸與promise 按順序請求數(shù)據(jù),需要的朋友可以參考下2019-08-08
url參數(shù)中有+、空格、=、%、&、#等特殊符號的問題解決
url參數(shù)中有+、空格、=、%、&、#等特殊符號的問題解決，需要的朋友可以參考一下2013-05-05
本篇文章主要介紹了JS幾種變量交換方式以及性能分析對比，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
固定背景滾動特效，使用background-attachment: fixed和導(dǎo)航菜單，頁面會非常平滑的滾動，感興趣的朋友可以參考下哈希望對你有所幫助2013-05-05
本文主要介紹了JavaScript可選鏈的實現(xiàn)示例,它通過使用問號（?）來判斷屬性或函數(shù)是否存在,避免了因為屬性或函數(shù)不存在而導(dǎo)致的錯誤,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了JavaScript中防止微信瀏覽器被整體拖動的方法,需要的朋友可以參考下2017-08-08