第一种：原图尺寸压缩50%、放大倍数3
<style>
.outer { left: 50%; transform: translateX(-50%); width: fit-content; height: fit-content; text-align: center; position: relative; }
.canv { display: block; cursor: crosshair; }
.canv:nth-of-type(2) { position: absolute; pointer-events: none; border-radius: 50%; }
.tb input { margin-left: 10px; }
</style>
<div class="outer">
<canvas class="canv"></canvas>
<canvas class="canv" width="150" height="150"></canvas>
<p class="tb">
<label for="btnUri">图片:</label>
<input id="btnUri" type="text" size="100" value="" placeholder="请输入图片地址" />
<input id="btnOkey" type="button" value="中" />
</p>
</div>
<script type="text/javascript">
var beShown = false, mTimer;
var canvs = document.querySelectorAll('.canv');
var size = {w: 300, h: 150}, msize = {w: canvs[1].width, h: canvs[1].height};
var ctx1 = canvs[0].getContext('2d'), ctx2 = canvs[1].getContext('2d');
var loadImage = (url) => {
var promise = new Promise((resolve, reject) => {
var img = new Image();
img.onload = () => {
var ele = img;
resolve(ele);
};
img.onerror = (err) => {
reject(err);
};
img.src = url;
});
return promise;
};
var update = (pic) => {
loadImage(pic).then(e => {
size.w = e.width;
size.h = e.height;
canvs[0].width = size.w / 2;
canvs[0].height = size.h / 2;
ctx1.clearRect(0, 0, size.w / 2, size.h / 2);
ctx1.drawImage(e, 0, 0, size.w / 2, size.h / 2);
}).catch(e => {
ctx1.save();
ctx1.font = 'bold 40px sans-serif';
ctx1.textBaseline = 'middle';
ctx1.textAlign = 'center';
ctx1.globalCompositeOperation = 'xor';
ctx1.fillText('图片加载失败', size.w / 4, size.h / 4);
ctx1.restore();
});
};
canvs[0].onmousemove = (e) => {
clearTimeout(mTimer);
var x = e.offsetX, y = e.offsetY;
if(x - 25 < 0) x = 25;
if(size.w - x < 25) x = size.w - 25;
if(y - 25 < 0) y = 25;
if(size.h - y < 25) y = size.h - 25;
canvs[1].style.left = x - msize.w / 2 + 'px';
canvs[1].style.top = y - msize.h / 2 + 'px';
ctx2.clearRect(0, 0, msize.w, msize.h);
ctx2.drawImage(canvs[0], x - 25, y - 25, 50, 50, 0, 0, msize.w, msize.h);
mTimer = setTimeout('ctx2.clearRect(0, 0, msize.w, msize.h)', 3000);
};
canvs[0].onmouseout = () => ctx2.clearRect(0, 0, msize.w, msize.h);
btnOkey.onclick = () => {
if(btnUri.value) update(btnUri.value.trim());
};
btnUri.onclick = () => btnUri.select();
btnUri.onkeydown = (e) => {
e = window.event || e;
var code = e.keyCode || e.which || e.charCode;
if(code === 13) btnOkey.click();
};
var pic = 'https://638183.freep.cn/638183/t24/webp/magnifier.webp';
update(pic);
</script>
第二种：按原图尺寸显示、放大倍数4
<style>
#wrapper { margin: 20px auto; width: fit-content; height: fit-content; position: relative; }
#canv { position: absolute; transform: scale(var(--size)); border-radius: 50%; pointer-events: none; --size: 1; }
</style>
<div id="wrapper">
<img id="img1" src="https://img.zcool.cn/community/01e8bf5c00a77aa801209252bda875.jpg@1280w_1l_2o_100sh.jpg" alt="" />
<canvas id="canv" width="200" height="200"></canvas>
</div>
<script type="text/javascript">
let ww, hh, beShown = false, mTimer;
let ctx = canv.getContext('2d');
let getSize = (img) => {
ww = img.width;
hh = img.height;
};
img1.onload = (callback) => getSize(img1);
img1.onmousemove = (e) => {
clearTimeout(mTimer);
img1.style.cursor = 'crosshair';
let x = e.offsetX, y = e.offsetY;
if(x - 25 < 0) x = 25;
if(ww - x < 25) x = ww - 25;
if(y - 25 < 0) y = 25;
if(hh - y < 25) y = hh - 25;
canv.style.left = x - 100 + 'px';
canv.style.top = y - 100 + 'px';
ctx.clearRect(0, 0, 200, 200);
ctx.drawImage(img1, x - 25, y - 25, 50, 50, 0, 0, 200, 200);
mTimer = setTimeout('ctx.clearRect(0, 0, 200, 200)', 1000);
};
</script>
前一篇: 单图背景无缝滚动模板一：伪元素移动
下一篇: canvas画布中小球碰撞简单处理
