大体上分如下步骤：
1、建立input标签通过定义type=‘file’来实现打开选择的文件

        var mousestart = cursorPosition(event);function cursorPosition(event){ //该函数需要在有效区域内mousemove事件中一直执行return{x  :  event.pageX,y  :  event.pageY,};}//accept="image/*"表示只选择图片文件var selEle = $("<input type='file' accept='image/*' οnchange='getImgSrc(this)' style='position:absolute;top:" +mousestart.y + "px; left:" + mousestart.x + "px;display: none'/>");$("usage_area").append(selEle);$(selEle).click(); //一次点击即可加载图片文件

2、将本地文件路径转换为img的src类型

3、通过canvas本地显示图片
4、将图片进行base64编码上传至服务端

  function getImgSrc(node) {var objUrl;var file = node.files[0];if (window.FileReader) {var reader = new FileReader();reader.readAsDataURL(file);reader.onloadend = function (e) {objUrl = e.target.result;  //获取到的src可以使用的信息var img = new Image();img.onload = function () {//异步等待图片加载完成后再显示var canvas = document.createElement("canvas");$("ussge_area").append(canvas);canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContex("2d");ctx.drawImage(img, mousestart.x, mousestart.y, canvas.width, canvas.height); //显示图片var dataUrl = canvas.toDataURL("image/jpg");//转成base64码格式sendToSever(dataUrl);//发送$(node).remove();img = null;ctx = null;}img.src = objUrl;//为img的src属性复制}}}

5、在从服务器都会图片的base64码信息后，进行简单的转换既可以显示图片

        function showPiture(dataURL){if(!dataURL) return;var img = new Image();img.onload = function(){var canvas = document.createElement("canvas");$("usage_area").append(canvas);canvas.width = img.width;canvas.height = img.height;var ctx = canvas.getContext("2d");ctx.drawImage(img,_x,_y,canvas.width,canvas.height);ctx = null;}img.src = dataURL;}

用js实现加载本地图片并显示并将图片信息上传至服务端相关推荐

UIWebView如何加载本地图片
UIWebView如何加载本地图片 UIWebView加载本地图片是有实用价值的.比方说,有时候我们需要本地加载静态页来显示相关帮助信息,而这些帮助信息当中含有很多很多的富文本,用代码实现难度较大,这 ...
【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
文章目录一.加载网络图片二.加载静态图片三.加载本地图片四.完整代码示例五.相关资源一.加载网络图片参考 [Flutter]Image 组件 ( Image 组件简介 | Image 构 ...
剖析Picasso加载压缩本地图片流程（解决Android 5.0部分机型无法加载本地图片的问题）
之前项目中使用Picasso遇到了一个问题:在Android 5.0以上版本的部分手机上使用Picasso加载本地图片会失败.为了解决这个问题,研究了一下Picasso加载和压缩本地图片的流程,才有了 ...
ios html异步加载图片,iOS 异步加载本地图片
iOS 异步加载本地图片问题当某个界面使用系统API + (nullable UIImage *)imageNamed:(NSString *)name;加载了过多本地图片资源时,不可避免的会产生 ...
短视频系统源代码，加载本地图片和加载网络图片
在短视频系统源代码中,上传照片时会涉及到加载本地图片或加载网络图片的情况,下面介绍一下相关代码从布局开始 <?xml version="1.0" encoding=&quo ...
c语言加载本地图片,Unity加载本地图片的2种方式
1. 使用 WWW 加载,详细查看 unity3d 官方文档. 2. 使用 System.IO 加载,lua 代码如下: local File = luanet.import_type("S ...
Android 加载本地图片(文件管理器中的图片墙)
Android 加载本地图片(文件管理器中的图片墙) --关于图片墙的一些感悟与疑问,希望大家共同探讨. (By伊叶也) 图片显示及监听 1.图片显示:基本上就5种显示形式(如果同时嵌入5种形式,采用 ...
可以加载本地图片和网络资源的轮播图：TuTu
轮播图可以加载本地图片或者网络资源的无限循环的轮播图,一行代码调用,图片三级缓存,节省流量,间隔自己设置,使用方便. 1.你只要写好布局就行,布局写成啥样你自己决定,扩展性强,满足多样化需求例如: ...
小程序加载本地图片解决方案
小程序加载本地图片: https://www.cnblogs.com/greengage/p/7742106.html 推荐使用下面的第三种方法: https://blog.csdn.net/qq_4 ...

用js实现加载本地图片并显示并将图片信息上传至服务端

大体上分如下步骤：
1、建立input标签通过定义type=‘file’来实现打开选择的文件

3、通过canvas本地显示图片
4、将图片进行base64编码上传至服务端

用js实现加载本地图片并显示并将图片信息上传至服务端相关推荐

最新文章

热门文章

用js实现加载本地图片并显示并将图片信息上传至服务端

大体上分如下步骤： 1、建立input标签 通过定义type=‘file’来实现打开选择的文件

3、通过canvas本地显示图片 4、将图片进行base64编码上传至服务端

用js实现加载本地图片并显示并将图片信息上传至服务端相关推荐

最新文章

热门文章

大体上分如下步骤：
1、建立input标签通过定义type=‘file’来实现打开选择的文件

3、通过canvas本地显示图片
4、将图片进行base64编码上传至服务端