背景色填充

{"value":"**imageMogr2** \u63d0\u4f9b\u4e00\u7cfb\u5217\u9ad8\u7ea7\u56fe\u7247\u5904\u7406\u529f\u80fd\uff0c\u672c\u6587\u4ecb\u7ecd **\u56fe\u7247\u80cc\u666f\u8272\u586b\u5145**\uff0c\u53ef\u4e0e **imageMogr2** \u7684\u5176\u4ed6\u53c2\u6570\u4e00\u8d77\u4f7f\u7528\u3002\n\n### **\u9650\u5236\u8bf4\u660e**\n\n- \u539f\u56fe\u9650\u5236\n - \u539f\u56fe\u683c\u5f0f\u652f\u6301\uff1a `psd`\u3001`jpeg`\u3001`png`\u3001`gif`\u3001`webp`\u3001`tiff`\u3001`bmp`\uff08webp\u52a8\u56fe\uff0c\u4ec5\u652f\u6301 \u6301\u4e45\u5316\u5904\u7406\uff09\n- \u8f93\u51fa\u9650\u5236\n - \u5982\u679c\u60a8\u6709\u591a\u5f20\u591a\u5e27 gif \u56fe\u7247\u9700\u8981\u5904\u7406\uff0c\u53ef\u5728\u56fe\u7247\u4e0a\u4f20\u5b8c\u6210\u540e\u5f02\u6b65\u8fdb\u884c\u9884\u8f6c\uff0c\u8fd9\u6837\u4e0d\u5fc5\u5728\u521d\u6b21\u8bbf\u95ee\u65f6\u8fdb\u884c\u56fe\u7247\u5904\u7406\uff0c\u8bbf\u95ee\u901f\u5ea6\u66f4\u5feb\u3002\u5efa\u8bae\u4f18\u5148\u4f7f\u7528 \u6301\u4e45\u5316\u5904\u7406\n- \u540c\u6b65\u5904\u7406\n - \u540c\u6b65\u5904\u7406\u53ea\u652f\u6301 20MB \u4ee5\u5185\u7684\u56fe\u7247\uff0c\u8d85\u8fc7 20MB \u7684\u56fe\u7247\u9700\u8981\u4f7f\u7528\u6301\u4e45\u5316\u5904\u7406\n - \u540c\u6b65\u5904\u7406\u524d\u7684gif\u6700\u5927\u5e27\u6570\u4e3a 200\n - \u540c\u6b65\u5904\u7406\u524d\u7684\u56fe\u7247`w`\u548c`h`\u53c2\u6570\u4e0d\u80fd\u8d85\u8fc73\u4e07\u50cf\u7d20\uff0c\u603b\u50cf\u7d20\u4e0d\u80fd\u8d85\u8fc71.5\u4ebf\u50cf\u7d20\n - \u540c\u6b65\u5904\u7406\u540e\u7684\u56fe\u7247`w`\u548c`h`\u53c2\u6570\u4e0d\u80fd\u8d85\u8fc79999\u50cf\u7d20\uff0c\u603b\u50cf\u7d20\u4e0d\u5f97\u8d85\u8fc724999999\uff082500w-1\uff09\u50cf\u7d20\n- \u6301\u4e45\u5316\u5904\u7406\n - \u6301\u4e45\u5316\u5904\u7406\u65e0\u5927\u5c0f\u9650\u5236\n - \u6301\u4e45\u5316\u5904\u7406\u524d\u7684`gif`\u3001`webp\u52a8\u56fe`\uff0c\u6700\u5927\u5e27\u6570\u4e3a 500\n - \u6301\u4e45\u5316\u5904\u7406\u524d\u7684\u56fe\u7247`w`\u548c`h`\u53c2\u6570\u4e0d\u80fd\u8d85\u8fc73\u4e07\u50cf\u7d20\uff0c\u603b\u50cf\u7d20\u4e0d\u80fd\u8d85\u8fc71.5\u4ebf\u50cf\u7d20\n - \u6301\u4e45\u5316\u5904\u7406\u540e\u7684\u56fe\u7247`w`\u548c`h`\u53c2\u6570\u4e0d\u80fd\u8d85\u8fc714999\u50cf\u7d20\uff0c\u603b\u50cf\u7d20\u4e0d\u5f97\u8d85\u8fc759999999\uff086000w-1\uff09\u50cf\u7d20\n\n### **\u63a5\u53e3\u89c4\u683c**\n\n**\u6ce8\u610f**\uff1a\u63a5\u53e3\u89c4\u683c\u4e0d\u542b\u4efb\u4f55\u7a7a\u683c\u4e0e\u6362\u884c\u7b26\u3002\n\n```\nimageMogr2\/background\/<background>\n \/ignore-error\/<ignoreError>\n```\n\n### \u53c2\u6570\u8bf4\u660e\n\n### **\u586b\u5145\u64cd\u4f5c\u53c2\u6570\u8868**\n\n| \u53c2\u6570\u540d\u79f0 | \u5fc5\u586b | \u8bf4\u660e |\n| ----------------------------- | ---- | ------------------------------------------------------------ |\n| `\/background\/<background>` | | \u586b\u5145\u80cc\u666f\u989c\u8272\uff0c\u53ef\u4ee5\u662f\u989c\u8272\u540d\u79f0\uff08\u6bd4\u5982red\uff09\u6216\u5341\u516d\u8fdb\u5236\u989c\u8272\uff08\u6bd4\u5982#FF0000\uff09\u7684[URL\u5b89\u5168\u7684Base64\u7f16\u7801](https:\/\/portal.7oss-hk.cdncloud.com\/doc\/kodo\/api\/1276\/data-format.html)\u3002\u6211\u4eec\u652f\u6301\u7684\u989c\u8272\u540d\u79f0\u6709transparent\uff08#00000000\uff09\u3001none\uff08#00000000\uff09\u3001white\uff08#FFFFFF\uff09\u3001black\uff08#000000\uff09\u3001red\uff08#FF0000\uff09\u3001orange\uff08#FFA500\uff09\u3001yellow\uff08#FFFF00\uff09\u3001green\uff08#008000\uff09\u3001blue\uff08#0000FF\uff09\u3001purple\uff08#800080\uff09\u3001gray\uff08#7E7E7E\uff09\u3001pink\uff08#FFC0CB\uff09\uff0c\u5176\u4e2dnone\u4e0etransparent\u5747\u4e3a\u900f\u660e\u80cc\u666f\u8272\uff0c\u53e6\u5916\u5341\u516d\u8fdb\u5236\u989c\u8272\u4e0d\u533a\u5206\u5927\u5c0f\u5199\uff0c\u5177\u4f53\u989c\u8272\u8bf7\u53c2\u8003[\u989c\u8272\u7f16\u7801\u8868](http:\/\/www.imagemagick.org\/script\/color.php#color_names)\u3002\u7f3a\u7701\u80cc\u666f\u8272\u4e3awhite\uff08#FFFFFF\uff09\u3002 |\n| `\/extent\/<extent>` | | \u80cc\u666f\u989c\u8272\u586b\u5145\u7684\u5927\u5c0f\u548c\u504f\u79fb\uff0c\u5373 {size}{offset}\uff0c\u5177\u4f53\u53c2\u6570\u5982\u4e0b\uff1a |\n| `\/ignore-error\/<ignoreError>` | | \u53d6\u503c\u4e3a 1 \u65f6\uff0c\u5219\u5904\u7406\u5931\u8d25\u65f6\u8fd4\u56de\u539f\u56fe\uff1b\u53d6\u503c\u4e3a 0 \u65f6\uff0c\u5219\u5904\u7406\u5931\u8d25\u65f6\u8fd4\u56de\u9519\u8bef\u4fe1\u606f\u3002\u9ed8\u8ba4\u503c\u4e3a 0\u3002 |\n\n### **\u80cc\u666f\u989c\u8272\u586b\u5145\u5927\u5c0f&\u504f\u79fb\u53c2\u6570\u8868**\n\n| {size}{offset} | \u5fc5\u586b | \u8bf4\u660e |\n| ------------------------------------- | ---- | ------------------------------------------------------------ |\n| `\/extent\/<Width>x<height>` | | \u76f8\u5bf9\u4e8e\u539f\u56fe\u4e2d\u5fc3\u4f4d\u7f6e\uff0c\u586b\u5145\u6307\u5b9a\u5927\u5c0f\u7684\u80cc\u666f\u989c\u8272\u3002 |\n| `\/extent\/<Width>x<height>a<dx>a<dy>` | | \u76f8\u5bf9\u4e8e\u539f\u56fe\u5de6\u4e0a\u89d2\uff0c\u5411\u53f3\u504f\u79fbdx\u4e2a\u50cf\u7d20\uff0c\u540c\u65f6\u5411\u4e0b\u504f\u79fbdy\u4e2a\u50cf\u7d20\uff0c\u586b\u5145\u6307\u5b9a\u5927\u5c0f\u7684\u80cc\u666f\u989c\u8272\u3002 |\n| `\/extent\/!<Width>x<height>-<dx>-<dy>` | | \u76f8\u5bf9\u4e8e\u539f\u56fe\u5de6\u4e0a\u89d2\uff0c\u5411\u5de6\u504f\u79fbdx\u4e2a\u50cf\u7d20\uff0c\u540c\u65f6\u5411\u4e0a\u504f\u79fbdy\u4e2a\u50cf\u7d20\uff0c\u586b\u5145\u6307\u5b9a\u5927\u5c0f\u7684\u80cc\u666f\u989c\u8272\u3002 |\n| `\/extent\/!<Width>x<height>-<dx>a<dy>` | | \u76f8\u5bf9\u4e8e\u539f\u56fe\u5de6\u4e0a\u89d2\uff0c\u5411\u5de6\u504f\u79fbdx\u4e2a\u50cf\u7d20\uff0c\u540c\u65f6\u5411\u4e0b\u504f\u79fbdy\u4e2a\u50cf\u7d20\uff0c\u586b\u5145\u6307\u5b9a\u5927\u5c0f\u7684\u80cc\u666f\u989c\u8272\u3002 |\n| `\/extent\/!<Width>x<height>a<dx>-<dy>` | | \u76f8\u5bf9\u4e8e\u539f\u56fe\u5de6\u4e0a\u89d2\uff0c\u5411\u53f3\u504f\u79fbdx\u4e2a\u50cf\u7d20\uff0c\u540c\u65f6\u5411\u4e0a\u504f\u79fbdy\u4e2a\u50cf\u7d20\uff0c\u586b\u5145\u6307\u5b9a\u5927\u5c0f\u7684\u80cc\u666f\u989c\u8272\u3002 |\n\n**\u6ce8\u610f**\uff1a`dx`\u3001`dy` \u53d6\u503c\u8303\u56f4\u4e0d\u9650\uff0c\u5c0f\u4e8e\u539f\u56fe\u5bbd\u9ad8\u5373\u53ef\u3002\u793a\u4f8b\u5982\u4e0b\uff1a\n\n- \/extent\/!642x492a10a10 \uff0c\u8868\u793a\u76f8\u5bf9\u539f\u56fe\u5de6\u4e0a\u89d2\uff0c\u5411\u53f3\u504f\u79fb10\uff0c\u5411\u4e0b\u504f\u79fb10\uff0c\u586b\u5145 642x492 \u5927\u5c0f\u7684\u80cc\u666f\u989c\u8272\u3002\n- \/extent\/!642x492-10-10 \uff0c\u8868\u793a\u76f8\u5bf9\u539f\u56fe\u5de6\u4e0a\u89d2\uff0c\u5411\u5de6\u504f\u79fb10\uff0c\u5411\u4e0a\u504f\u79fb10\uff0c\u586b\u5145 642x492\u5927\u5c0f\u7684\u80cc\u666f\u989c\u8272\u3002\n\n### **\u8f6c\u4e49\u8bf4\u660e**\n\n\u90e8\u5206\u53c2\u6570\u4ee5 `!` \u5f00\u5934\uff0c\u8868\u793a\u53c2\u6570\u5c06\u88ab\u8f6c\u4e49\u3002\u4e3a\u4fbf\u4e8e\u9605\u8bfb\uff0c\u6211\u4eec\u91c7\u7528\u7279\u6b8a\u8f6c\u4e49\u65b9\u6cd5\uff0c\u5982\u4e0b\u6240\u793a\uff1a\n\n```\np => % (percent)\nr => ^ (reverse)\na => + (add)\n```\n\n\u5373`!50x50r` \u5b9e\u9645\u4ee3\u8868 50x50\u8fd9\u6837\u4e00\u4e2a\u5b57\u7b26\u4e32\u3002\u800c`!50x50`\u5b9e\u9645\u4ee3\u8868 50x50 \u8fd9\u6837\u4e00\u4e2a\u5b57\u7b26\u4e32\uff08\u8be5\u5b57\u7b26\u4e32\u5e76\u4e0d\u9700\u8981\u8f6c\u4e49\uff09\u3002 `<ImageSizeAndOffsetGeometry>` \u4e2d\u7684 OffsetGeometry \u90e8\u5206\u53ef\u4ee5\u7701\u7565\uff0c\u9ed8\u8ba4\u4e3a +0+0\u3002\u5373 \/extent\/50x50 \u7b49\u4ef7\u4e8e \/extent\/!50x50a0a0\u3002\n\n### **\u793a\u4f8b**\n\n**0.** \u539f\u56fe\n\n```\nhttps:\/\/dn-odum9helk.qbox.me\/resource\/gogopher.jpg\n```\n\n**1.** \u65cb\u8f6c\u5e76\u6dfb\u52a0\u80cc\u666f\u8272\uff1a\n\n```\nhttps:\/\/dn-odum9helk.qbox.me\/resource\/gogopher.jpg?imageMogr2\/auto-orient\/thumbnail\/!256x256r\/gravity\/center\/crop\/!256x256\/blur\/3x9\/quality\/80\/rotate\/45\/background\/b3Jhbmdl\n```\n\n**2.** \u6dfb\u52a01\u50cf\u7d20\u7684\u7ea2\u8272\u8fb9\u6846\uff1a\n\n```\nhttps:\/\/dn-odum9helk.qbox.me\/resource\/gogopher.jpg?imageMogr2\/extent\/!642x429\/background\/cmVk\n```\n\n**3.** \u90e8\u5206\u6dfb\u52a03\u50cf\u7d20\u7684\u7ea2\u8272\u8fb9\u6846\uff1a\n\n```\nhttps:\/\/dn-odum9helk.qbox.me\/resource\/gogopher.jpg?imageMogr2\/extent\/!642x429a1a1\/background\/cmVk\n```\n"}