html5+上传图片时有没有截图的插件(手机端的)

html5+上传图片时有没有截图的插件(手机端的),第1张

按住电源键(关机键)的同时按主屏幕(HOME)键,听见"咔嚓"一声,就代表截图成功了。

另外还有用截图软件截图的,你可以下载一款在你手机上最好用的截图软件,安装后就可以使用截图功能了。答题不易,互相帮助,手机提问的朋友在客户端右上角评价点满意即可.

如果你认可我的回答,请点击采纳为满意回答按钮!

Clipic.js插件可以为移动端 (仅支持移动端) 提供头像上传并裁剪成指定尺寸,用原生js开发的,轻量级,包含html跟css,不到8kb。点此链接体验: https://teojs.github.io/clipic/

https://github.com/teojs/clipic

参数说明

width:Number (默认:500) – 裁剪宽度

height:Number (默认:500) – 裁剪高度

ratio:Number (可选) – 裁剪的比例,当传入ratio时width/height将无效

src:String (必传) – 需要裁剪的图片,可以是图片链接,或者 base64

type:String (默认:jpeg) – 裁剪后图片的类型,仅支持 jpeg/png 两种

quality:Number (默认:0.9) – 压缩质量

buttonText:Array (默认:[‘取消’, ‘重置’, ‘完成’]) – 底部三个按钮文本

http://bbs.itying.com/topic/5cb17892c6a71b10bcef96b0

拖拽的过程就不说了,这里主要说一下如何在前端获取到图片的相关信息。

html5里有一个fileReader的全局变量,用来读取本地文件,比如txt,img等,下面是一个简单的代码。

function checkFile(files){

var file = files[0]

var reader = new FileReader()

// show表示<div id='show'></div>,用来展示图片预览的

if(!/image\/\w+/.test(file.type)){

            show.innerHTML = "请确保文件为图像类型"

            return false

        }

        // onload是异步 *** 作

reader.onload = function(e){

show.innerHTML = '<img src="'+e.target.result+'" alt="img">'

}

reader.readAsDataURL(file)

}

这样就能够在不上传到服务器的前提下预览图片。当然,这个问题的重点是获取图片的原始尺寸,html5里还提供了两个变量来获取:naturalWidth和naturalHeight,这两个分别来获取图片的原始宽度和原始高度。

在上面的例子中,就能通过下面的方式获取到:

var width = e.target.naturalWidth

var height = e.target.naturalHeight

还有一种情况就是,如果已经存在页面里的图片,怎么获取到原始尺寸呢,可以这样:

var img = document.getElementsByTagName('img')[0] // 获取到图片

var width = img.naturalWidth

var height = img.naturalHeight


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7233790.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存