使用JavaScript平移和缩放图像的示例代码_Javascript

前言

平移和缩放是查看图像时常用的功能。我们可以放大图像以查看更多细节，进行图像编辑。

dynamsoft document viewer是一个用于此目的的sdk，它为文档图像提供了一组查看器。在本文中，我们将演示如何使用它来平移和缩放图像。此外，我们还将探讨如何使用javascript从头实现这一功能。

使用dynamsoft document viewer平移和缩放图像

创建一个包含以下模板的新html文件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>edit viewer</title>
  <style>
  </style>
</head>
<body>
</body>
<script>
</script>
</html>

在页面中包含dynamsoft document viewer的文件。

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/ddv.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/ddv.css" rel="external nofollow" >

使用许可证初始化dynamsoft document viewer。可以在这里申请一个证书。

dynamsoft.ddv.core.license = "dls2eyjoyw5kc2hha2vdb2rlijoimjawmdaxlte2ndk4mjk3oti2mzuilcjvcmdhbml6yxrpb25jrci6ijiwmdawmsisinnlc3npb25qyxnzd29yzci6indtcgr6vm05wdjrceq5yuoifq=="; //one-day trial
dynamsoft.ddv.core.engineresourcepath = "https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@1.1.0/dist/engine";// lead to a folder containing the distributed wasm files
await dynamsoft.ddv.core.init();

创建一个新的文档实例。

const docmanager = dynamsoft.ddv.documentmanager;
const doc = docmanager.createdocument();

创建一个edit viewer实例，将其绑定到一个容器，然后用它来查看我们刚刚创建的文档。

html：

<div id="viewer"></div>

javascript：

const uiconfig = {
  type: dynamsoft.ddv.elements.layout,
  flexdirection: "column",
  classname: "ddv-edit-viewer-mobile",
  children: [
    dynamsoft.ddv.elements.mainview // the view which is used to display the pages
  ],
};
editviewer = new dynamsoft.ddv.editviewer({
  uiconfig: uiconfig,
  container: document.getelementbyid("viewer")
});

editviewer.opendocument(doc.uid);

css：

#viewer {
  width: 320px;
  height: 480px;
}

使用input选择图像文件并将其加载到文档实例中，然后可以用edit viewer进行查看。

html：

<label>
  select an image:
  <br/>
  <input type="file" id="files" name="files" onchange="filesselected()"/>
</label>

javascript：

async function filesselected(){
  let filesinput = document.getelementbyid("files");
  let files = filesinput.files;
  if (files.length>0) {
    const file = files[0];
    const blob = await readfileasblob(file);
    await doc.loadsource(blob); // load image
  }
}

function readfileasblob(file){
  return new promise((resolve, reject) => {
    const filereader = new filereader();
    filereader.onload = async function(e){
      const response = await fetch(e.target.result);
      const blob = await response.blob();
      resolve(blob);
    };
    filereader.onerror = function () {
      reject('oops, something went wrong.');
    };
    filereader.readasdataurl(file);
  })
}

然后，我们可以按住控制键，使用鼠标滚轮放大、缩小和平移图像。在移动设备上，我们可以通过双指实现缩放。

从头开始实现平移和缩放

有几种方法可以实现平移和缩放。

使用绝对像素值。它易于理解，可以有滚动条。
使用css transform。它可以使用gpu来获得更好的性能，但不能保留滚动条。
使用canvas。它具有较高的性能和定制性。dynamsoft document viewer使用此方法。

下面，我们将使用第一种方式进行演示。

创建一个容器作为查看器。包含一张图像。

<div id="viewer">
  <img id="image"/>
</div>

样式：

使用flex布局来对齐组件。

查看器的css：

#viewer {
  width: 320px;
  height: 480px;
  padding: 10px;
  border: 1px solid black;
  overflow: auto;
  display: flex;
  align-items: center;
}

加载所选图像文件。使图像的宽度适合查看器。

let currentpercent;
async function filesselected(){
  let filesinput = document.getelementbyid("files");
  let files = filesinput.files;
  if (files.length>0) {
    const file = files[0];
    const blob = await readfileasblob(file);
    const url = url.createobjecturl(blob);
    loadimage(url);
  }
}

function loadimage(url){
  let img = document.getelementbyid("image");
  img.src = url;
  img.onload = function(){
    let viewer = document.getelementbyid("viewer");
    let percent = 1.0;
    resizeimage(percent);
  }
}

function resizeimage(percent){
  currentpercent = percent;
  let img = document.getelementbyid("image");
  let viewer = document.getelementbyid("viewer");
  let borderwidth = 1;
  let padding = 10;
  let ratio = img.naturalwidth/img.naturalheight;
  let newwidth = (viewer.offsetwidth - borderwidth*2 - padding*2) * percent
  img.style.width = newwidth + "px";
  img.style.height = newwidth/ratio + "px";
}

function readfileasblob(file){
  return new promise((resolve, reject) => {
    const filereader = new filereader();
    filereader.onload = async function(e){
      const response = await fetch(e.target.result);
      const blob = await response.blob();
      resolve(blob);
    };
    filereader.onerror = function () {
      reject('oops, something went wrong.');
    };
    filereader.readasdataurl(file);
  })
}

添加一个wheel事件，以便在按下控制键的情况下使用鼠标进行缩放。

img.addeventlistener("wheel",function(e){
  if (e.ctrlkey || e.metakey) {
    if (e.deltay < 0) {
      zoom(true);
    }else{
      zoom(false);
    }
    e.preventdefault();
  }
});

function zoom(zoomin,percentoffset){
  let offset = percentoffset ?? 0.1;
  if (zoomin) {
    currentpercent = currentpercent + offset;
  }else{
    currentpercent = currentpercent - offset;
  }
  currentpercent = math.max(0.1,currentpercent);
  resizeimage(currentpercent);
}

添加pointer事件以使用鼠标或触摸屏实现平移。

let downpoint;
let downscrollposition;
img.addeventlistener("pointerdown",function(e){
  previousdistance = undefined;
  downpoint = {x:e.clientx,y:e.clienty};
  downscrollposition = {x:viewer.scrollleft,y:viewer.scrolltop}
});
img.addeventlistener("pointerup",function(e){
  downpoint = undefined;
});
img.addeventlistener("pointermove",function(e){
  if (downpoint) {
    let offsetx = e.clientx - downpoint.x;
    let offsety = e.clienty - downpoint.y;
    let newscrollleft = downscrollposition.x - offsetx;
    let newscrolltop = downscrollposition.y - offsety;
    viewer.scrollleft = newscrollleft;
    viewer.scrolltop = newscrolltop;
  }
});

添加touchmove事件以支持缩放。计算两个触摸点的距离，以知道需要放大还是缩小。

img.addeventlistener("touchmove",function(e){
  if (e.touches.length === 2) {
    const distance = getdistancebetweentwotouches(e.touches[0],e.touches[1]);
    if (previousdistance) {
      if ((distance - previousdistance)>0) { //zoom
        zoom(true,0.02);
      }else{
        zoom(false,0.02);
      }
      previousdistance = distance;
    }else{
      previousdistance = distance;
    }
  }
  e.preventdefault();
});

function getdistancebetweentwotouches(touch1,touch2){
  const offsetx = touch1.clientx - touch2.clientx;
  const offsety = touch1.clienty - touch2.clienty;
  const distance = offsetx * offsetx + offsety + offsety;
  return distance;
}

好了，我们已经用javascript实现了平移和缩放功能。

以上就是使用javascript平移和缩放图像的示例代码的详细内容，更多关于javascript平移和缩放图像的资料请关注代码网其它相关文章！