H5图片预览
官方链接下载示例项目需要注册账号,似乎有点不友好,不想注册账号的可以去gitee上下载示例项目
如果你上来就是把previewImg.js 放在head中可能会出现意想不到的错误,比如下面这样子,遇到这个不要慌,咱们可以考虑给这个js换个地方引入,比如放在body中,这样就可以完美解决掉这个报错信息
Uncaught TypeError: Cannot read property 'appendChild' of null
at new i (previewImage.min.js:1)
at previewImage.min.js:1
at previewImage.min.js:1
at previewImage.min.js:1
使用说明
// 获取所有的图片
var imgs = findViewsByClassName("previewImg");
// 存放获取过来图片的src链接
var urls = [];
// 循环往urls中添加图片链接
for (var i = 0; i < imgs.length; i++) {
(function(i) {
var elm = imgs[i];
// 获取图片的src属性,不同地方不同写法,我这是嵌入到sdk中的,你们写还是按照js的语法书写即可
urls.push(elm.getElement().src);
// 图片的点击事件
elm.setOnclickListener(function() {
var current = elm.getElement().src;
var obj = {
urls: urls,
current: current
};
previewImage.start(obj);
})
})(i)
}
当你都书写完成后,会发现控制台又来了个报错信息,但是这个报错并没有影响你的程序执行
http://static.luyanghui.com/svg/oval.svg 404 (Not Found)
解决方法去源码中将这个地址【http://static.luyanghui.com/svg/oval.svg】 换成其他的,随便啥都可以,但是不能为空
H5图片预览的更多相关文章
- H5图片预览、压缩、上传
目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...
- H5图片预览功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- h5的图片预览
h5的图片预览是个好东西,不需要保存到后台就能预览图片 代码也很短 <!DOCTYPE html> <html> <head> <meta charset=& ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- 浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
- JS魔法堂之实战:纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
- js实现图片预览
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 普通图片预览及demo(非分块)
演示地址: http://codeman35.itongyin.com:19003/v2/image.html 功能:通过加载大图预览,这种方式无法和google art 比较.只能应用于简单的图片预 ...
随机推荐
- MySQL正则表达式:REGEXP 和 LIKE
正则表达式作用: 根据指定的匹配模式匹配文中符合要求的特殊字符. REGEXP : ①操作符中常用的匹配列表: ②匹配特殊字符使用\\进行转义 \\. 能够匹配 . \\f 换页 \\n 换行 ...
- 力扣396(java)-旋转数组(中等)
题目: 给定一个长度为 n 的整数数组 nums . 假设 arrk 是数组 nums 顺时针旋转 k 个位置后的数组,我们定义 nums 的 旋转函数 F 为: F(k) = 0 * arrk[0 ...
- CSS选择器练习--餐厅选择
1.题目:Select the plates 答案:plate 1 <div class="table"> 2 <plate></plate> ...
- 做ToB软件质量保障的这两年
简介:自己算是阿里的老兵了,从实习开始一直投身在 toB 业务的质量保障领域内,不能说是资深的专家,但所经历的.感受的业务特点和体会还是具有一定的代表性,希望能通过这篇文章,总结一下过往,并能和已经 ...
- 提升Java字符串编码解码性能的技巧
简介:常见的字符串编码有LATIN1.UTF-8.UTF-16.GB18030,他们各有各的特点,且之间的转换比较复杂.本文将为大家介绍提升Java字符串编码解码性能的技巧. 作者 | 温绍锦 (高 ...
- 技术解析:一文看懂 Anolis OS 国密生态 | 龙蜥专场
简介: Anolis OS国密是社区在Anolis OS上做的国密技术解决方案. 编者注:本文系两位演讲者整理,他们在2021年阿里云开发者大会的「开源操作系统社区和生态分论坛」上带了分享,演讲主 ...
- Vue源码-手写mustache源码
引言 在Vue中使用模板语法能够非常方便的将数据绑定到视图中,使得在开发中可以更好的聚焦到业务逻辑的开发. mustache是一个很经典且优秀的模板引擎,vue中的模板引擎也对其有参考借鉴,了解它能更 ...
- RT-Thread 时钟管理
一.时钟节拍 任何操作系统都需要提供一个时钟节拍,以供系统处理所有和时间有关的事件,如线程的延时.线程的时间片轮转调度以及定时器超时等.时钟节拍是特定的周期性中断,这个中断可以看做是系统心跳,中断之间 ...
- Solution Set - NOI级别真题选做
[NOI2007] 社交网络 Link&Submission. key:Floyd Floyd求出任意两点间最短路,以及最短路的条数.求点 \(k\) 的答案时枚举所有点对 \(i,j\),若 ...
- ES Monitoring 整理笔记
Monitoring是elastic stack的监控模块,监控信息存在es索引中,并且可以通过kibana进行可视化的展示.(收集监控数据的方式从6.5版本起由Collectors-Exporter ...