开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用<input>,<img>和canvas从本地文件系统预览一张大图片

输入: <input>、<img> 和 canvas，以及本地文件系统中的大图片 URL。

输出: 如何使用 <input>、<img> 和 canvas 从本地文件系统预览大图片。

使用 `<input>`、`<img>` 和 `canvas` 从本地文件系统预览大图片：

1. 创建一个 `<input>` 元素，设置 `type` 为 `file`。
2. 获取 `<input>` 元素的 `files` 属性，得到本地文件系统的文件对象。
3. 创建一个 `<img>` 元素，设置其 `src` 属性为文件对象的 `path` 属性。
4. 创建一个 `canvas` 元素，设置其 `width` 和 `height` 属性为图片的宽度和高度。
5. 使用 `canvas.toDataURL()` 方法将 `canvas` 元素的内容绘制到一幅图像上。
6. 创建一个 `<img>` 元素，设置其 `src` 属性为 `canvas.toDataURL()` 方法返回的图像 URL。
7. 将 `<input>` 元素的文件对象添加到 `files` 属性中。
8. 将 `<img>` 元素和 `canvas` 元素添加到页面中。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Local File Preview</title>
    <script>
        function previewImage(file) {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                const img = new Image();
                img.src = reader.result;
                const canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
                document.body.appendChild(canvas);
            };
        }
    </script>
</head>
<body>
    <input type="file" id="file-input" accept="image/*" onchange="previewImage(this.files[0])">
    <canvas id="image-canvas"></canvas>
</body>
</html>

这段代码将允许用户选择一张图片，并将其展示在 canvas 元素中，以便进一步处理或预览。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

《你不知道的 Blob》番外篇

图片本地预览这里整理 2 种图片本地预览的方式：使用 DataURL 方式； 1.DataURL方式： <input type="file" accept...Blob URL/Object URL 方式；上面主要介绍 Blob URL 和 Data URL 两种方式实现图片本地预览，这两个类型的区别在《五、拓展》中介绍。...图片本地预览 + 分片上传实现本地预览：将 input 获取到的 file 对象，通过实例化 FileReader ，赋值给变量 reader ，调用reader 的 readAsDataURL 方法...图片本地预览 + 分片上传 + 暂停 + 续传 ...”部分中，也主要介绍了我们实际开发中非常常见的“图片预览”、“图片下载”和“生成文件”的场景。

2.5K0 0

【笔记】618- 读《你不知道的 Blob》笔记

图片本地预览这里整理 2 种图片本地预览的方式：使用 DataURL 方式；使用 Blob URL/Object URL 方式； 1.DataURL方式：...Data URL 两种方式实现图片本地预览，这两个类型的区别在**《五、拓展》**中介绍。...图片本地预览 + 分片上传实现本地预览：将 input 获取到的 file 对象，通过实例化 FileReader ，赋值给变量 reader ，调用reader 的 readAsDataURL 方法...图片本地预览 + 分片上传 + 暂停 + 续传 ...从互联网下载数据在实现“从互联网下载数据”方法时，我们使用 createObjectURL 显示图片，在请求互联网图片时，我们有两种方式：使用 XMLHttpRequest ；使用 fetch ；

3.3K4 0

玩转前端图片上传

确实是这样的，但是，我们想要做得更加的友好一些，比如需要过滤掉非图片文件，或只允许从摄像头拍照获取图片等，还是需要进行一些简单配置的。...下面就介绍一下如何使用这两个方法。 1....下面是使用 FileReader 预览图片的示例： <img src="" id="previewImage...如果想要学习更多关于图片预览，可以阅读以下两篇文章：使用FileReader实现前端图片预览 js图片/视频预览 - URL.createObjectURL() 裁剪图片关于图片的裁剪，很自然的会想到使用...img 下面就以这张图片为例，介绍一下如何使用 EXIF 来检测图片角度。

3.1K2 1

ajax+php上传图片，等比压缩，canvas压缩减少上传带宽，优化上传速度

; } // 删除本地的图，仅保留文件系统上的一份，可选 @unlink($destFileName...M的大图，难免浪费上传带宽，而且会导致速度非常慢，影响用户体验，于是可以使用canvas在上传之前压缩一遍，解决速度慢的问题。...前端使用canvas压缩再上传前端示例代码： ....var fileInput = document.querySelector("#myfiles"); // 所有type属性(attribute)为file的元素都有一个files...// 普通方式上传二进制文件 if (files[0]) { uploadImg(files[0]) } // 将file生成blob链接,可用于本地预览

2722 0

本地与在线图片转Base64及图片预览

查看效果：http://sandbox.runjs.cn/show/tgvbo9nq 本地图片转Base64（从而可以预览图片）： function localImgLoad() { var src...localBase64StrContainer').value = e.target.result; } read.readAsDataURL(src) }; 本地图片预览...(本地图片转Base64)： ...('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'...; img.onload = function() { canvas.height = img.height; canvas.width = img.width;

2.4K1 0

Blob

读完本文你将了解到以下内容： Blob 是什么 Blob API 简介构造函数属性和方法 Blob 使用场景分片上传从互联网下载数据 Blob 用作 URL Blob 转换为 Base64 图片压缩...这里我们来看一下如何使用 fetch API 获取线上图片并本地显示，具体实现如下： const myImage = document.querySelector('img'); const myRequest...除此之外，利用 FileReader API，我们也可以方便的实现图片本地预览功能，具体代码如下： <input type="file" accept="image/*" onchange="loadFile...在完成本地图片预览之后，我们可以直接把图片对应的 Data URLs 数据提交到服务器。...介绍完上述的内容，我们来看一下本地图片压缩完整的示例： <!

6.2K4 0

图片处理不用愁，给你十个小帮手

该章节你将会学到以下知识：如何区分图片的类型（非文件后缀名）；如何获取图片的尺寸（非右键查看图片信息）；如何预览本地图片（非图片阅读器）；如何实现图片压缩（非图片压缩工具）；如何操作位图像素数据...在浏览器端要实现图片压缩，除了使用 canvas.toBlob API 之外，还可以使用 Canvas 提供的另一个 API，即 toDataURL API，它接收 type 和 encoderOptions...3.3 如何预览本地图片利用 HTML FileReader API，我们也可以方便的实现图片本地预览功能，具体代码如下： <input type="file" accept="image/*" onchange...output.src = reader.result; }; reader.readAsDataURL(event.target.files[0]); }; 在完成本地图片预览之后...; } }); }); 3.4 如何实现图片压缩在一些场合中，我们希望在上传本地图片时，先对图片进行一定的压缩，然后再提交到服务器，从而减少传输的数据量。

5.1K5 0

你不知道的 Blob

读完本文你将了解到以下内容： Blob 是什么 Blob API 简介构造函数属性和方法 Blob 使用场景分片上传从互联网下载数据 Blob 用作 URL Blob 转换为 Base64 图片压缩...这里我们来看一下如何使用 fetch API 获取线上图片并本地显示，具体实现如下： const myImage = document.querySelector('img'); const myRequest...除此之外，利用 FileReader API，我们也可以方便的实现图片本地预览功能，具体代码如下： <input type="file" accept="image/*" onchange="loadFile...在完成本地图片预览之后，我们可以直接把图片对应的 Data URLs 数据提交到服务器。...介绍完上述的内容，我们来看一下本地图片压缩完整的示例： <!

4.1K2 0

面试官昨天问我对base64的理解，着实被问懵了

除此之外，利用 HTML FileReader API，我们也可以方便的实现图片本地预览功能，具体代码如下： <input type="file" accept="image/*" onchange="...output.src = reader.result; }; reader.readAsDataURL(event.target.files[0]); }; 在完成本地图片预览之后...; } }); }); 3.2 浏览器端图片压缩在一些场合中，我们希望在上传本地图片时，先对图片进行一定的压缩，然后再提交到服务器，从而减少传输的数据量。...介绍完上述的内容，我们来看一下本地图片压缩完整的示例： <!...base64 编码和解码 4.1 使用 btoa 与 atob 函数在 JavaScript 中，有两个函数被分别用来处理解码和编码 base64 字符串： btoa()：从字符串创建一个 base64

4.2K1 1

5分钟搞定图片裁剪，上传

Q1：为什么选择Cropper.js和如何安装Cropper.js？...一开始制作这个需求思路有两个，使用canvas原生或者寻找现成的库，对比了一番觉得canvas实现时间耗费较长，且秉承着不重复造轮子的原则（其实是菜），决定使用Cropper.js。...-- 2.一个用于给Cropper.js覆盖使用的img --> <!...Q3：如何将图片读取显示和使用Cropper.js添加裁剪控件？...Q4：如何进行实时预览？

4.9K1 2

从web图片裁剪出发：了解H5中的Blob

有人会疑惑，为什么不用H5的Canvas和FormData，第一要考虑ie8的兼容性，第二那时候眼界没到，这种新东西光是听听都怕。　　...这篇随笔先做个初步的拆解，就是当通过input选择一张图片后，这张图片在浏览器里是怎样的一个存在。　　...我们从应用场景出发，回到文章开头的问题，图片的裁剪和上传。...图片的裁剪我们要倚仗牛逼的canvas，而canvas的context有这么一个方法toDataURL，就是把canvas的内容转换为图片数据，而数据的表现形式就是DataURL！...以下的example就是把图片数据从input中取出，然后以DataURL的格式进行预览，提交时把预览生成图片上传的整个流程。 <!

2.1K7 0

前端：选取、预览、裁剪、上传、断点续传，关于图片上传那点事

拿到 File 后，与前面处理逻辑一样。 03 — 预览以前在页面上实现预览功能，要么将图片上传到服务器上，拿到 url 再拉回本地，赋值给 img 显示；要么使用 Flash 技术。...现在好了，可以直接使用 URL.createObjectURL 将 input[file] 选择的文件在用户本地转化为一个可以赋值给 img 组件 src 属性的图片地址。...img 组件接受并预览的图片地址。...从 input[file] 选择拿到的对象是一个 File 对象，它继续于 Blob。...每次上传完一个切片，就将标识存储在本地，页面刷新后先看看本地哪些分片已经上传过了。 — END — 2019 年冬天于北京 ---- ▼ 往期精选 ▼ JS是如何计算 1+1=2 的？

1.6K4 0

canvas入门实战--邀请卡生成与下载

1.前言写了很多的javascript和css3的文章，是时候写一篇canvas的了。canvas是html5提供的一个新的功能！至于作用，就是一个画布。然后画笔就是javascript。...canvas没有层级的说法，只要改canvas，都要重绘。哪怕就是一个字移动一个像素。做好了这个，下面做选择图片的功能！...其他的属性，字体大小和颜色，基本是一样的代码，运行的效果图我不放了！...就是预览当前canvas的一个效果，这个就很简单了，就是新开一个窗口，然后把图片写进去而已 //预览图片 function saveImageInfo() { var mycanvas = document.getElementById...批量下载图片这个复杂一点，但也不难，下面一步一步来！ 1.首先批量导出，那么用户名我这里是使用空格分割，那么现在我在option里面，弄一个字段textAll，所有文字的集合。

5713 0

前端如何实现一键截图功能?

精彩回顾有点意思的gif动图生成平台开发实战(二) 如何实现H5可视化编辑器的实时预览和真机扫码预览功能在线IDE开发入门之从零实现一个在线代码编辑器基于React+Koa实现一个h5页面可视化编辑器...正文在实现具体功能之前, 我们先看看具体的实现效果: 从演示中我们可以看出, 我们最终目标是实现在PC端生成H5页面的截图, 所以可能会涉及到以下几个问题: 如何实现将页面转化为图片如何实现H5...如何实现将页面转化为图片在亲自调研了html2canvas库并使用的过程中, 笔者发现了很多问题, 比如如果样式中出现%单位, 或者有一些图片背景的问题, 导致html2canvas并没有很好的work...第一个问题就这么解决了, 不过在使用过程中发现图片模糊的问题, 这块网上也有很多解决方案. 比如先放大dom, 在处理成canvas最后生成图片的时候在缩小等, 这块笔者就不一一举例了....如何实现H5效果模拟并截取实际的H5页面因为我们设计的H5页面都在pc端完成的, 所以要想生成H5预览图, 无非是本地模拟尺寸, 进行渲染, 具体方案如下: 采用iframe作为H5页面容器去生成截图

1.5K1 0

面试简书（五）

或者寻找第三方压缩方式https://tinypng.com/ b.将图片改为jpeg渐进式图片想要将转化成渐进型jpeg格式，需要使用phtoshop 1、首先打开一个图片，选择“文件...d.用图片进行操作如果是一个gif图片，那么可以利用一张大图，通过位置的移动，通过肉眼的视觉残留弄成一个gif图,链接：https://blog.csdn.net/qq_34633111/article...3.图片太多怎么处理方案一:将图片服务和应用服务分离(从架构师的角度思考) 把图片服务器与应用服务器分开,图片服务器采用独立域名 ,css、js和图片就可以并发请求了方案二:简单粗暴的压缩方案...不然得不偿失,在webpack中可以设置最大多少byte的图片压缩成base64 针对decode base64编码的图片比较慢的问题,我们可以选择使用canvas来加速.当向canvas发出绘画命令时...,浏览器直接将指令发到图形加速器而不需要开发者更多的干预,硬件图形加速器则以难以执行的运算速度实时绘画和渲染图形.因此,我们可以使用canvas来渲染base64编码后的图片具体代码如下: // 缓存图片

1.1K1 0

【应用】Markdown 在线阅读器

因为没有服务器，所以为了显示本地图片，使用了替换图片 src 的方式。...首先读取本地文件，然后将的 src 路径替换为图片内容。...，我们可以将图片压缩一下，具体方法就是创建一个 canvas 元素，将图片绘制到 canvas 上，然后将 canvas 转为图片。...简单一点就是说如何在 for 循环中正确使用延迟调用的回调函数。...，使用时需要注意：存储空间有限制，一般是 5M 左右，和浏览器有关用户清除浏览器缓存之后有可能丢失本地缓存的数据不能直接存对象，要先使用 JSON.stringfy 方法将对象进行序列化处理之后再保存

3K2 0

利用canvas实现一个抠图小工具

-- 用于输入本地文件和远程URL --> <!...// 我们使用两个输入框来引入本地资源和线上资源 const oUpload = document.getElementById('input-upload'); const oInput = document.getElementById...('input-url'); // 除此之外还需要一个img标签来加载数据和进行展示 const oImg = document.getElementById('input-img'); // 注:...加载图片的img标签不一定需要放到页面上基本思路就是利用FileReader读取本地文件，并使用img标签加载数据 oUpload.onchange = loadFile; oInput.onchange

2.4K5 0

利用canvas实现一个抠图小工具

-- 用于输入本地文件和远程URL --> <!...// 我们使用两个输入框来引入本地资源和线上资源 const oUpload = document.getElementById('input-upload'); const oInput = document.getElementById...('input-url'); // 除此之外还需要一个img标签来加载数据和进行展示 const oImg = document.getElementById('input-img'); // 注:...加载图片的img标签不一定需要放到页面上基本思路就是利用FileReader读取本地文件，并使用img标签加载数据 oUpload.onchange = loadFile; oInput.onchange

2K1 1

【JS】936- File、Blob、dataURL 和 canvas 的应用与转换

一、概念介绍 1....File (1) 通常情况下， File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement...Canvas API 提供了一个通过JavaScript 和 HTML的 canvas 元素来绘制图形的方式。...从 canvas 中获取文件 dataURL function canvasToDataURL() { let canvas = document.createElement('canvas')...: http://8.131.67.8:8088/file.html 在线预览 ?

2.5K4 0

教你用200行代码写一个爱豆拼拼乐H5小游戏（附源码）

前言本文将带大家一步步实现一个H5拼图小游戏，考虑到H5游戏的轻量级和代码体积，我没有使用react或vue这些框架，而采用我自己写的dom库和原生javascript来实现业务功能，具体库代码可见我的文章如何用不到...你将学到：洗牌算法洗牌动画实现原理用FileReader API实现本地预览文件用Canvas生成海报零零总总花了半天的时间，希望对自己后面涉及H5游戏有所帮助，也希望大家通过这篇文章有所收获...海报具体实现思路如下，canvas代码后期会封装成一个类，基本用法和思路大致如下： function generateImg() { var canvas = document.createElement...公众号后台回复：拼拼乐体验游戏更多推荐基于react/vue生态的前端集成解决方案探索与总结 9012教你如何使用gulp4开发项目脚手架如何用不到200行代码写一款属于自己的js类库) 让你瞬间提高工作效率的常用...js函数汇总(持续更新) 一张图教你快速玩转vue-cli3 3分钟教你用原生js实现具有进度监听的文件上传预览组件使用Angular8和百度地图api开发《旅游清单》 js基本搜索算法实现与170万条数据下的性能测试

1.7K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭