Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

zoom-image-data

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

zoom-image-data - npm Package Compare versions

Comparing version
2.0.4
 to
2.0.5
+1
-1
package.json
{
"name": "zoom-image-data",
"version": "2.0.4",
"version": "2.0.5",
"description": "zoom-image-data",

@@ -5,0 +5,0 @@ "exports": {

+12
-6
README.md

@@ -102,3 +102,3 @@ # zoom-image-data

### 5. 使用
以下为将一个原宽高为10*10的图像按宽高比为2绘制到指定宽高canvas元素
以下为将一个原宽高为64*64的图像按宽高比为2绘制到指定宽高canvas元素。[示例网站](https://fengqing1101.github.io/zoom-image-data/)
##### html

@@ -125,4 +125,4 @@ ```html

const canvas = document.getElementById('canvas');
const inw = 10;
const inh = 10;
const inw = 64;
const inh = 64;
const inData = new ArrayBuffer(inw * inh * 4);

@@ -143,5 +143,5 @@ const outw = document.body.clientWidth;

cellRatio: 2,
cellWH: 8,
cellWH: 4,
splitCell: true,
splitCellSize: 8,
splitCellSize: 10,
})

@@ -167,3 +167,9 @@

function fillInData() {
transferImageData.inData.fill(4291611705);
const { inw, inh, inData } = transferImageData;
for (let y = 0; y < inh; y++) {
const s = 4291611705 - y * 512;
for (let x = 0; x < inw; x++) {
inData[y * inw + x] = s + x * 3;
}
}
}

@@ -170,0 +176,0 @@ 

-121
dist/index.html
<!DOCTYPE html>
<html>
<head>
<title>zoom-image-data</title>
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="module">
import ZoomImageData from './index.mjs';
window.onload = function () {
const canvas = document.getElementById('canvas');
const inw = 64;
const inh = 64;
const inData = new ArrayBuffer(inw * inh * 4);
const outw = document.body.clientWidth;
const outh = document.body.clientHeight;
const outImageData = new ImageData(outw, outh);
canvas.width = outw;
canvas.height = outh;
const ctx = canvas.getContext('2d');
const transferImageData = new ZoomImageData({
inw,
inh,
inData,
outw,
outh,
outData: outImageData.data.buffer,
cellRatio: 2,
cellWH: 4,
splitCell: true,
splitCellSize: 10,
})
let isDirty = true;
fillInData();
requestAnimationFrame(update);
/**
* 更新画布
*/
function update() {
requestAnimationFrame(update);
if (!isDirty) return;
isDirty = false
transferImageData.update();
ctx.putImageData(outImageData, 0, 0);
}
/**
* 初始化inData
*/
function fillInData() {
const { inw, inh, inData } = transferImageData;
for (let y = 0; y < inh; y++) {
const s = 4291611705 - y * 512;
for (let x = 0; x < inw; x++) {
inData[y * inw + x] = s + x * 3;
}
}
}
/**
* 获取鼠标相对于canvas的坐标
*/
function getPosition(e) {
let rect = canvas.getBoundingClientRect();
return [e.pageX - rect.left, e.pageY - rect.top];
}
/**
* 重置
*/
document.addEventListener('keyup', function (e) {
transferImageData.resize();
isDirty = true;
})
/**
* 缩放
*/
canvas.addEventListener('wheel', function (e) {
const coor = getPosition(e);
transferImageData.zoom(coor[0], coor[1], e.deltaY < 0 ? 1.1 : 0.9);
isDirty = true;
})
/**
* 平移
*/
let pos;
canvas.addEventListener('mousedown', function (e) {
pos = getPosition(e);
document.addEventListener('mousemove', mousemove)
document.addEventListener('mouseup', mouseup)
})
function mousemove(e) {
const cur = getPosition(e);
transferImageData.translate(cur[0] - pos[0], cur[1] - pos[1]);
pos = cur;
isDirty = true;
}
function mouseup() {
document.removeEventListener('mousemove', mousemove)
document.removeEventListener('mouseup', mouseup)
}
}
</script>
</body>
</html>