阅读 2278

原生js实现图片的放大缩小和下载

效果如下:



特点:

用原生js实现了网页图片的放大缩小和下载,用了es6的字符串拼接语法,部分布局用flex;

  • 图片放大缩小下载的demo,通过handleImage.init()来唤起交互区域;
  • 通过handleImage.showImg()来展示操作的图片,(需要改为动态的src);
  • 用图片的高度的缩放来让图片宽度自适应缩放;
  • 下载图片功能用的是a标签的`download`属性,需要代码部署在服务器环境,并且同源才能下载;

源码地址:github.com/qylcx7758/e…

核心代码:

console.log("fun_handleImage.js");var handleImage = {};handleImage.init = function () {    handleImage.createWrap()}/** * @description: 创造图片放大的区域 * @param {type}  * @return:  */handleImage.createWrap = function () {    var imgWrap = document.createElement("div");    imgWrap.setAttribute("class", "handleimg-wrap");    imgWrap.setAttribute("id", "imgWrap")    document.body.appendChild(imgWrap);    imgWrap.innerHTML = `    <div class="handleimg-head">    <img class="imgbtn expand" src="./images/expand.png" onclick="handleImage.expand()" alt="放大"></img>    <img class="imgbtn narrow" src="./images/narrow.png" onclick="handleImage.narrow()"   alt="缩小"></img>    <a class="downloadhref" id="downloadHref" onclick="handleImage.download()" download><img class="imgbtn download" src="./images/download.png" alt="下载"></img> </a>    </div>    <img class="imgbtn close" src="./images/close.png" alt="关闭"></img>    `}/** * @description: 展示图片,绑定图片的点击事件 * @param {type}  * @return:  */handleImage.showImg = function () {    console.log(this)    // var src = this.getAttribute("src");    src = "./images/close.png"    var imgContent = document.createElement("img");    imgContent.setAttribute("src", src);    imgContent.setAttribute("id", "imgContent")    imgContent.setAttribute("class", "handleimg-box")    var imgWrap = document.getElementById("imgWrap");    if (imgContent && imgWrap) {        // imgContent.setAttribute("src", src);        imgWrap.style.display = "block"        imgWrap.appendChild(imgContent)    }    // this.}/** * @description: 关闭图片 * @param {type}  * @return:  */handleImage.closeImg = function () {    var imgWrap = document.getElementById("imgWrap");    imgWrap.style.display = "none"}/** * @description: 放大图片 * @param {type}  * @return:  */handleImage.expand = function () {    var imgContent = document.getElementById("imgContent");    if (imgContent) {        imgContent.style.height = imgContent.offsetHeight * 1.1 + "px"    }}/** * @description:缩小图片 * @param {type}  * @return:  */handleImage.narrow = function () {    var imgContent = document.getElementById("imgContent");    if (imgContent) {        imgContent.style.height = imgContent.offsetHeight / 1.1 + "px"    }}/** * @description:下载图片,通过a标签的形式只能下载同源图片 * @param {type}  * @return:  */handleImage.download = function () {    var downloadHref = document.getElementById("downloadHref");    var imgContent = document.getElementById("imgContent")    if (downloadHref && imgContent) {        var src = imgContent.getAttribute("src");        downloadHref.setAttribute("href", src)    }}handleImage.init()复制代码





文章分类
前端
文章标签