PS图片切片和canvas分块加载
2020-06-28 本文已影响0人
雨中的单车
image
右键选择“划分切片”
image
水平、垂直进行划分
image
image
image
image
image
<html>
<head>
<title>dlsinopac_map</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<canvas id="canvas" width="900" height="345"></canvas>
<input type="range" id="slider" name="slider" value="1.0" min="0.5" max="3.0" step="0.01" style="display: block;margin: 20px auto; width: 800px;" />
<script type="text/javascript">
var image=new Image();
var context = canvas.getContext("2d");
/*
var dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
// Get the size of the canvas in CSS pixels.
var oldWidth = canvas.width;
var oldHeight = canvas.height;
// Give the canvas pixel dimensions of their CSS
// size * the device pixel ratio.
canvas.width = Math.round(oldWidth * dpr);
canvas.height = Math.round(oldHeight * dpr);
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
// Scale all drawing operations by the dpr, so you
// don't have to worry about the difference.
//然后将画布缩放，将图像放大两倍画到画布上
context.scale(dpr, dpr);
*/
let img1 = new Image(),
img2 = new Image(),
img3 = new Image(),
img4 = new Image(),
img5 = new Image(),
img6 = new Image();
window.onload=function(){
var scale=slider.value;
img1.src = "dlsinopac_map_01.jpg";
img2.src = "dlsinopac_map_02.jpg";
img3.src = "dlsinopac_map_03.jpg";
img4.src = "dlsinopac_map_04.jpg";
img5.src = "dlsinopac_map_05.jpg";
img6.src = "dlsinopac_map_06.jpg";
img1.setAttribute("crossOrigin",'Anonymous');
img2.setAttribute("crossOrigin",'Anonymous');
img3.setAttribute("crossOrigin",'Anonymous');
img4.setAttribute("crossOrigin",'Anonymous');
img5.setAttribute("crossOrigin",'Anonymous');
img6.setAttribute("crossOrigin",'Anonymous');
// 加载img1到img6
let pm1 = new Promise((res,rej)=>{
img1.onload = ()=>{
res();
}
});
let pm2 = new Promise((res,rej)=>{
img2.onload = ()=>{
res();
}
});
let pm3 = new Promise((res,rej)=>{
img3.onload = ()=>{
res();
}
});
let pm4 = new Promise((res,rej)=>{
img4.onload = ()=>{
res();
}
});
let pm5 = new Promise((res,rej)=>{
img5.onload = ()=>{
res();
}
});
let pm6 = new Promise((res,rej)=>{
img6.onload = ()=>{
res();
}
});
// 全部图片都加载完成后绘制于Canvas中
let drawAllImg = Promise.all([pm1, pm2,pm3, pm4,pm5,pm6]).then((res)=>{
context.drawImage(img1, 0, 0, 450, 115);
context.drawImage(img2, 450, 0, 450, 115);
context.drawImage(img3, 0, 115, 450, 115);
context.drawImage(img4, 450, 115, 450, 115);
context.drawImage(img5, 0, 230, 450, 115);
context.drawImage(img6, 450, 230, 450, 115);
image.src = context.canvas.toDataURL();
});
drawImageByScale(scale);
slider.onmousemove=function(){
scale=slider.value;
drawImageByScale(scale);
}
//}
}
function drawImageByScale(scale){
//console.log(context.canvas.toDataURL());
var imageWidth=900*scale;
var imageHeight=345*scale;
var dx=canvas.width/2-imageWidth / 2;
var dy=canvas.height/2-imageHeight / 2;
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(image,dx,dy,imageWidth,imageHeight);
}
</script>
</body>
</html>
参考文档：
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images
https://www.jianshu.com/p/e57bc47a625c
https://www.jianshu.com/p/84c1d79dbefc
https://hehuiyun.github.io/2019/02/15/js-canvas%E5%AE%9E%E7%8E%B0%E5%A4%9A%E5%BC%A0%E5%9B%BE%E7%89%87%E6%8B%BC%E6%8E%A5%E6%88%90%E4%B8%80%E5%BC%A0%E5%9B%BE%E7%89%87/
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL
http://www.mahaixiang.cn/Photoshop/689.html
