上传图片并将图片展示在页面中

html需要一个上传的input，一个canvas


<input type="file" id="img"/><br /><br /><br /><canvas id="canvas"></canvas>

input是用来上传图片的，而canvas则是用来展示上传的图片的，由于上传的图片获取的路径是经过保护的假路径，所以需要经过特殊处理之后，在由canvas展示

js代码：

var image;
img.onchange = function () {let file = document.querySelector('input[type=file]').files[0]  // 获取选择的文件，这里是图片类型let reader = new FileReader()reader.readAsDataURL(file) //读取文件并将文件以URL的形式保存在resulr属性中 base64格式reader.onload = function(e) { // 文件读取完成时触发 let result = e.target.result // base64格式图片地址 image = new Image();image.src = result // 设置image的地址为base64的地址 image.onload = function(){ var canvas = document.querySelector("#canvas"); var context = canvas.getContext("2d"); canvas.width = image.width; // 设置canvas的画布宽度为图片宽度 canvas.height = image.height; context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上绘制图片 //let dataUrl = canvas.toDataURL('image/jpeg', 0.92) // 0.92为压缩比，可根据需要设置，设置过小会影响图片质量 // dataUrl 为压缩后的图片资源，可将其上传到服务器 } }
}

js代码是由上传图片成功开始的，所以监控input的onchange事件，如果传输成功执行以下代码，可以js绘制在页面中前提是浏览器支持canvas，下面代码才有效果

上传图片并将图片展示在页面中相关推荐

用jQuery封装的Ajax把json数据展示到页面中去
实现一个聊天页面我们下来看一下效果图中的聊天信息先把它放在json数据中,通过jQuery封装的Ajax来把数据拿过来,再把它展示到页面中去,分为以下几步为了方便操作,我们直接使用php stu ...
百度编辑器上传图片时设置图片展示的最大宽度
我们公司制作常用的网站使用的是我们自己的cms,今天产品提了一个需求,希望在编辑器中上传图片时图片的最大宽度不要超过600px,在百度编辑器中上传图片有两种方式,单图上传和多图上传,而单图上传又分为点 ...
html 中用canvas加载图片,【实例】使用canvas缓缓加载一个图片到web页面中
由于要做web前端设计,用到这个效果,弄了一个晚上,总算是弄出来了效果从上到下缓缓载入一个图片思路获取一个空白canvas,使用drawImage方法画出整个图像获取这个图像中的每一行的数据清 ...
js怎么将json数据展示在html代码,JS格式化json数据展示到页面中
html页面: 查询json结果 studyid* partnerId token 查询查询结果: css代码: .red-text { color: red; } .size-big { widt ...
移动端HTML5长按图片会选中页面中某个位置的文字
通过设置user-select能够解决,但觉得应该还有更好的方法吧 img {user-select:none;}复制代码转载于:https://juejin.im/post/5ad7f279f26 ...
将页面中的指定 div 下载为图片
文章目录 1. 下载页面div为本地图片 2. 下载页面 div 为本地图片并添加水印 1. 下载页面div为本地图片要将页面中的指定 div 下载为图片,可以使用 JavaScript 的 htm ...
15款JQuery图片展示效果插件
在图片展示的效果中,滑动门和幻灯片放映在这几年的web页面中越来越流行了,随着jQuery的流行趋势渐增,更多的开发者都致力于创建惊人的,多用途的,时髦的jquery图片展示效果.真的要感谢jQuer ...
html动画图片重叠,CSS3炫酷堆叠图片展示动画特效
这是一款效果的CSS3炫酷堆叠图片展示动画特效.该堆叠图片展示效果是将一组图片堆叠在一起,然后以各种CSS动画效果来切换最上面的一张图片.该特效将使用纯CSS3制作,它可以在所有现代浏览器和移动设备上 ...
Android 更改纯色背景图片颜色，可实现一张背景圆形图片展示不同颜色
Android 更改纯色背景图片颜色,可实现一张背景圆形图片展示不同颜色项目中可能会遇到比如多个纯色圆形背景列表或者说纯色圆形头像背景,一般让UI设计师设计多张背景图:但是有更好的方法只需一张图就可 ...

上传图片并将图片展示在页面中

上传图片并将图片展示在页面中相关推荐

最新文章

热门文章