平时做活儿得用点照片处理技能，比如放大缩小、翻转、加个边框，或者把两张照片合在一起。虽然这玩意儿没啥高深的算法知识，但真的能提高工作速度和创意。所以今儿就和大家聊聊我是咋练这本事的，希望能给爱玩儿图的朋友们提供点儿启示。
图片加载与跨域问题
搞定图片处理前得先把图片加载搞懂，特别是防止出现那个什么跨域的麻烦事。网上的图就更得注意了，别忘了给服务器设个跨域头。为了省事儿，我会把所有图片转成base64格式，这样就不担心跨不过去，画布上也能正常显示图案。
确保图片加载完成
Canvas可是挺讲究的，要处理图片得先把图全加载完才能画出来，否则就会出问题！所以，咱实际做起来可得小心点，别让那些没弄好的图片影响了咱们的效果~
图片缩放与裁剪
function loadImage(image, loader, error){
// 创建 image 对象加载图片；
let img = new Image();
// 当为线上图片时，需要设置 crossOrigin 属性；
if(image.indexOf('http') == 0)img.crossOrigin = '*';
img.onload = () => {
loaded(img);
// 使用完后清空该对象，释放内存；
setTimeout(()=>{
img = null;
},1000);
};
img.onerror = () => {
error('img load error');
};
img.src = image;
}
图片缩放，这可是基本的图处理技术！我每次都牢记着保持图片的原始比例不变，这样才能避免变形。用drawImage这个方法，我能精准掌控图片的大小时和摆放位置。还有就是在裁剪时，根据实际需求来调整dx和dy这两个参数，立刻就能达到想要的宽高比了。
图片旋转的技巧
let imgRatio = img.naturalWidth / img.naturalHeight;
// 创建一个画布容器；
let cvs = document.createElement('canvas');
// 获取容器中的画板；
let ctx = cvs.getContext('2d');
cvs.width = 1000;
cvs.height = cvs.width / imgRatio;
简单说，旋转图片就是在画布（canvas）上画出图片，然后调整转动角度就行了。虽然看起来有点难，其实用起来特别容易理解和操作！只需要选好旋转角度，就能随心所欲地调整图片方向，满足各种设计要求。
图片合成与拼图
我最喜欢做的事就是把好几张照片合起来，弄成一个特色十足的东西，感觉像艺术家！而且特别有意思的是拼图，这就不仅仅需要想象力和耐心了，你得小心翼翼地调整每一张照片，让它们看起来最好看。这段经历真的教了我很多关于调整位置的技巧，每次都能得到满意的结果。
使用base64进行图片压缩
// 将原图等比例绘制到缩放后的画布上；
ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
// 将绘制后的图导出成 base64 的格式；
let b64 = cvs.toDataURL('image/jpeg', 0.9);
当你要处理很多图时，一个挺牛逼的主意就是把它们变成Base64编码的格式来压缩。这样做不仅能缩小图的体积，还能加快加载的速度！你只需要调整canvas里那个所谓的toDataURL方法的参数，就能随心所欲地控制图的画质和体积了。
实际应用中的挑战与解决
let file = e.files[0];
if(window.FileReader) {
let fr = new FileReader();
fr.onloadend = e => {
let b64 = e.target.result;
// b64即为base64格式的用户上传图;
};
fr.readAsDataURL(file);
}
做项目时遇到各种图片处理问题，比如要根据图片不同大小剪裁和放大。经过摸索和学习，终于学会了应对这种复杂状况的方法。
技术的进步：我的感受
随着科技越来越牛，我发现自己弄图也越来越顺手了。每次修好图，心里就特满足，感觉自己就是个整形大师！说实话，学这东西不只是为了应付差事，更重要的是享受创作之美。
评论0