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 比较.只能应用于简单的图片预 ...
随机推荐
- 纯钧chunjun的http-x插件修复
简介 chunjun是一款基于flink的开源数据同步工具,官方文档,其提供了很多flink官方未提供的插件供大家来使用,特别是达梦插件在国产化环境中很方便! 本次介绍的是chunjun中的一款htt ...
- MMDeploy部署实战系列【第四章】:onnx,tensorrt模型推理
MMDeploy部署实战系列[第四章]:onnx,tensorrt模型推理 这个系列是一个随笔,是我走过的一些路,有些地方可能不太完善.如果有那个地方没看懂,评论区问就可以,我给补充. 目录: 0️⃣ ...
- xml转voc,voc转coco,coco转yolo,coco划分,coco检查,yolo检查,coco可视化
平常用coco格式的数据集比较多,所有这里整合一下数据集相关的常用的脚本. pycocotools安装 这个非常重要,因为处理coco数据集时,用pycocotools包非常方便. 自行搜索一下怎么安 ...
- dom4j 通用解析器,解析成List<Map<String,Object>>
import java.io.InputStream; import java.util.Iterator; import java.util.LinkedHashMap; import java.u ...
- Vue 3 进阶用法:异步组件
一.代码分割 一个大型前端应用,如果所有代码都放在单一文件,体积会特别大,下载时间长,白屏时间久,用户体验差. 代码分割是一种有效的优化方式.提前把代码切分为多个小块,只下载当前必需的部分,用到哪块下 ...
- CPU性能实战分析
1.从平均负载谈起 我们每次发现线上系统变慢时,第一件事往往都会使用top或者uptime命令查看cpu的负载以及占用率,比如top命令会有下面的结果: top - 15:51:39 up 84 da ...
- 力扣613(MySQL)-直线上的最近距离(简单)
题目: 表 point 保存了一些点在 x 轴上的坐标,这些坐标都是整数. 写一个查询语句,找到这些点中最近两个点之间的距离. 最近距离显然是 '1' ,是点 '-1' 和 '0' 之间的距离.所以输 ...
- 力扣586(MySQL)-订单最多的客户(简单)
题目: 编写一个SQL查询,为下了 最多订单 的客户查找 customer_number . 测试用例生成后, 恰好有一个客户 比任何其他客户下了更多的订单. 查询结果格式如下所示. 进阶: 如果有多 ...
- 13_总结Vue数据监测
总结: Vue监视数据的原理: 1.vue会监视data中所有层次的数据 2.如何监视对象中的数据? 通过setter实现监视,且要在new V ...
- 力扣119(java)-杨辉三角Ⅱ(简单)
题目: 给定一个非负索引 rowIndex,返回「杨辉三角」的第 rowIndex 行. 在「杨辉三角」中,每个数是它左上方和右上方的数的和. 示例 1: 输入: rowIndex = 3输出: [1 ...