{
"title": "代码帮我画像素画",
"tags": [
"post",
"前端"
],
"sources": [
"xlog"
],
"external_urls": [
"https://magren.xlog.app/pixel"
],
"date_published": "2021-02-25T08:33:21.000Z",
"content": "这一阵子迷上了像素风格，很有复古的味道，加上小时候玩宝可梦的时候还是像素风格，牵扯出了太多情怀。 \n甚至把自己的电脑壁纸也换成了像素风。很有感觉😝\n\n\n\n想自己在像素风上创作，但是感觉自己是没有那种艺术细胞……所以就在想，能不能自己把一张正常的图片转换成像素风？🤔\n\n## 思路⭐\n1. 使用canvas将图片缩小，使其丢失部分像素信息\n2. 再将缩小的图片绘制出来\n3. 将缩小的图片放大，使能看到其像素点\n\n其实就是小的图片放大，会感觉到糊的效果。\n\n## Code💻\n禁止浏览器的平滑处理其实就是是否抗锯齿。 \n用正则表达式限制输入框只能输入0-100，意味着让图片缩放的百分比（100就是没有缩放，达不到像素化的效果）\n```js\nconst pixel = (canvas, image, scale)=> {\n scale *= 0.01;\n \n canvas.width = image.width;\n canvas.height = image.height;\n\n // 将图片缩小\n let scaledW = canvas.width * scale;\n let scaledH = canvas.height * scale;\n\n let ctx = canvas.getContext('2d');\n \n // 禁止浏览器的平滑处理\n ctx.imageSmoothingEnabled = false;\n ctx.mozImageSmoothingEnabled = false;\n ctx.webkitImageSmoothingEnabled = false;\n ctx.msImageSmoothingEnabled = false;\n\n //将缩小后的图片绘制出来\n ctx.drawImage(image, 0, 0, scaledW, scaledH);\n //将缩小后的图片还原到原来的大小\n ctx.drawImage(canvas, 0, 0, scaledW, scaledH, 0, 0, canvas.width, canvas.height);\n };\n\n\nbtn.addEventListener('click', function(){\n const Regex = new RegExp(/^100$|^(\\d|[1-9]\\d)(\\.\\d+)*$/)\n let scale = input.value;\n if(scale==''){\n scale = 40;\n }\n if(!Regex.test(scale)){\n window.alert('输入不规范')\n return;\n }\n console.log(scale);\n pixel(canvas,img,scale);\n}, false);\n```\n## 效果👇\n",
"attributes": [
{
"value": "pixel",
"trait_type": "xlog_slug"
}
]
}
