PS图片切片和canvas分块加载

作者: 雨中的单车 | 来源:发表于2020-06-28 23:57 被阅读0次

PS图片切片和canvas分块加载
移动开发tips
菠萝小记 | canvas图片问题汇总
canvas - 绘制图片
canvas版像素碰撞
前端图片优化的方案
加载图片数据，以及设置开放域画布的宽高
canvas图片懒加载
canvas 多张图片绘制层级问题
前端必会的切图技能

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