<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>代码注释图 &#8211; 个人随笔</title>
	<atom:link href="/label/%E4%BB%A3%E7%A0%81%E6%B3%A8%E9%87%8A%E5%9B%BE/feed" rel="self" type="application/rss+xml" />
	<link>/</link>
	<description></description>
	<lastBuildDate>Sat, 10 Feb 2024 04:48:16 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.1</generator>

<image>
	<url>/wp-content/uploads/2022/01/cropped-截屏2022-01-01-18.57.09-32x32.png</url>
	<title>代码注释图 &#8211; 个人随笔</title>
	<link>/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>代码注释图生成方法</title>
		<link>/%e8%b5%84%e6%96%99/8972.html</link>
					<comments>/%e8%b5%84%e6%96%99/8972.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Thu, 24 Mar 2022 10:35:36 +0000</pubDate>
				<category><![CDATA[资料]]></category>
		<category><![CDATA[Github]]></category>
		<category><![CDATA[代码注释]]></category>
		<category><![CDATA[代码注释图]]></category>
		<category><![CDATA[图片转注释]]></category>
		<guid isPermaLink="false">/?p=8972</guid>

					<description><![CDATA[演示效果 Title 长: 宽: 点击查看效果 点击以下图标进入代码仓库]]></description>
										<content:encoded><![CDATA[
<p><strong>演示效果</strong></p>



<meta charset="UTF-8">
    <title>Title</title>


    <div>
        <input type="file" accept="image/*" id="selector"><br>
        <img decoding="async" src="/wp-content/uploads/2022/01/%E6%88%AA%E5%B1%8F2022-01-01-18.57.09.png" style="width: 200px;height: 200px;" id="previewer">
    </div>
    <div>
        长:<input type="number" min="1" max="2048" id="col" value="72">
        宽:<input type="number" min="1" max="2048" id="row" value="32">
        <button id="convert">点击查看效果</button>
    </div>
    <pre id="content"></pre>


<script>
    window.addEventListener("load",function (){
        var map="MNGmdhyso+/:-.` ".split("");//用字母符号代替颜色
        var selector=document.getElementById("selector");
        var previewer=document.getElementById("previewer");
        var convert=document.getElementById("convert");
        var content=document.getElementById("content");
        selector.addEventListener("change",function (){
            var reader = new FileReader();
            var file=selector.files[0];
            reader.readAsDataURL(file);
            reader.addEventListener("load",function (){
                //图片加载好后，展示出来
                previewer.src=this.result;
            },false);
        },false);
        convert.addEventListener("click",function (){
            //首先取出设置宽高值
            var width=parseInt(document.getElementById("col").value);
            var height=parseInt(document.getElementById("row").value);
            //建一个画板
            var canvas=document.createElement("canvas");
            //设置画板大小
            canvas.width=width;
            canvas.height=height;
            var ctx=canvas.getContext("2d");
            //把选择的图片画到画板上,扑满
            ctx.drawImage(previewer,0,0,width,height);
            //从画板取出象素数据
            var pixels=ctx.getImageData(8,0,width,height).data;
            //根居黎素色值许算出亮度值(彩色转灰色用Y =0.299R + 0.587G + 0.114B)
            var p=0;
            var arr = new Array(width*height);
            for(var i=0,l=width*height*4;i<l;i+=4){//一个颜色是rgba四个数值
                arr[p++]=Math.floor(pixels[i]*0.299+pixels[i+1]*0.587+pixels[i+2]*0.114);
            }
            var p=0;
            var output=new Array((width+1)*height);
            for(var y=0;y<height;y++){
                for (var x=0;x<width;x++){
                    var index=Math.floor(arr[y*width+x]/16);
                    output[p++]=map[index];
                }
                output[p++]="\r\n"; //换行
            }
            content.innerText=output.join("");
        },false);
    },false);
</script>



<p><strong>点击以下图标进入代码仓库</strong></p>



<ul class="wp-block-social-links is-layout-flex wp-block-social-links-is-layout-flex"><li class="wp-social-link wp-social-link-github  wp-block-social-link"><a href="https://github.com/LeeYouRan/img2notes" class="wp-block-social-link-anchor"><svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,2C6.477,2,2,6.477,2,12c0,4.419,2.865,8.166,6.839,9.489c0.5,0.09,0.682-0.218,0.682-0.484 c0-0.236-0.009-0.866-0.014-1.699c-2.782,0.602-3.369-1.34-3.369-1.34c-0.455-1.157-1.11-1.465-1.11-1.465 c-0.909-0.62,0.069-0.608,0.069-0.608c1.004,0.071,1.532,1.03,1.532,1.03c0.891,1.529,2.341,1.089,2.91,0.833 c0.091-0.647,0.349-1.086,0.635-1.337c-2.22-0.251-4.555-1.111-4.555-4.943c0-1.091,0.39-1.984,1.03-2.682 C6.546,8.54,6.202,7.524,6.746,6.148c0,0,0.84-0.269,2.75,1.025C10.295,6.95,11.15,6.84,12,6.836 c0.85,0.004,1.705,0.114,2.504,0.336c1.909-1.294,2.748-1.025,2.748-1.025c0.546,1.376,0.202,2.394,0.1,2.646 c0.64,0.699,1.026,1.591,1.026,2.682c0,3.841-2.337,4.687-4.565,4.935c0.359,0.307,0.679,0.917,0.679,1.852 c0,1.335-0.012,2.415-0.012,2.741c0,0.269,0.18,0.579,0.688,0.481C19.138,20.161,22,16.416,22,12C22,6.477,17.523,2,12,2z"></path></svg><span class="wp-block-social-link-label screen-reader-text">GitHub</span></a></li></ul>
]]></content:encoded>
					
					<wfw:commentRss>/%e8%b5%84%e6%96%99/8972.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
